/* ============================================================
   元时光 · 商家后台 —— 设计系统 v2
   保留：纸底、等宽数字读数带、细线分区、赭橙只用于行动
   补齐：卡片分组、状态徽章、批量操作、排序、密度、空/加载/错误态
   手机端布局约定见《交接报告》第 19 章「移动端密度规范」
   ============================================================ */

:root {
  color-scheme: light;

  /* 颜色 ------------------------------------------------ */
  --paper: #f3f2ee;
  --card: #fbfaf7;
  --ink: #1b1e1c;
  --slate: #5e6862;
  --line: #dcd9d2;
  --line-soft: #e8e5df;
  --pine: #21544a;
  --ember: #c2551d;
  --danger: #a3342a;
  --info: #2a6f97;

  --pine-soft: #e6eeeb;
  --ember-soft: #f8e8df;
  --slate-soft: #ebece8;
  --danger-soft: #f7e6e4;
  --info-soft: #e4edf3;

  /* 字体 ------------------------------------------------ */
  --font-sans:
    'PingFang SC', 'HarmonyOS Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --font-mono:
    ui-monospace, 'SFMono-Regular', 'IBM Plex Mono', 'Roboto Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* 版式 ------------------------------------------------ */
  --radius: 4px;
  --radius-card: 6px;
  --sidebar-w: 240px;
  --content-max: 1160px;
  --gutter: 28px;
  --row-py: 13px; /* 表格行距 */
  --shadow-card: 0 1px 2px rgba(27, 30, 28, 0.04);
  --shadow-pop: 0 6px 24px rgba(27, 30, 28, 0.12);
}

/* 基础 -------------------------------------------------- */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
dt {
  margin: 0;
}
a {
  color: var(--ink);
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
}
svg {
  flex: 0 0 auto;
}

.num,
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
::selection {
  background: rgba(194, 85, 29, 0.18);
}

/* 骨架 -------------------------------------------------- */
.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  height: 100vh;
  overflow-y: auto;
  padding: 26px 0 24px;
  border-right: 1px solid var(--line);
  background: var(--card);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  color: var(--ember);
}
.brand svg {
  width: 22px;
  height: 22px;
}
.brand span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.nav {
  margin-top: 30px;
}
.nav-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 22px 8px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.nav-toggle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--pine);
  opacity: 0.45;
  transition: opacity 0.15s;
}
.nav-toggle:hover {
  color: var(--pine);
}
.nav-toggle:hover::before {
  opacity: 1;
}
.nav-chevron {
  flex: none;
  color: var(--slate);
  transition: transform 0.15s, color 0.15s;
}
.nav-toggle:hover .nav-chevron {
  color: var(--pine);
}
.nav-group[data-collapsed='true'] .nav-chevron {
  transform: rotate(-90deg);
}
.nav-group[data-collapsed='true'] .nav-items {
  display: none;
}
.nav-items {
  margin-top: 4px;
}
.nav-group {
  margin-top: 16px;
}
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 22px;
  font-size: 14px;
  color: var(--slate);
  transition:
    color 0.15s,
    background 0.15s;
}
.nav-link:hover {
  color: var(--ink);
  background: var(--slate-soft);
}
.nav-link[aria-current='page'] {
  color: var(--ink);
  font-weight: 500;
  background: var(--slate-soft);
}
.nav-link[aria-current='page']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ember);
}
.nav-subgroup {
  margin-top: 2px;
}
.nav-subtitle {
  margin: 8px 22px 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--pine);
}
.nav-link.nav-sub {
  padding-left: 40px;
  font-size: 13px;
}
.nav-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--slate);
}
.nav-guide-top {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

/* 订单管理页的业务类型胶囊（卡片上方） */
#order-type-chips {
  margin-bottom: 12px;
}
.nav-foot {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.topbar-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--slate);
}
.topbar-meta .sep {
  width: 1px;
  height: 14px;
  background: var(--line);
}
.link-quiet {
  color: var(--slate);
}
.link-quiet:hover {
  color: var(--ember);
}
.menu-btn {
  display: none;
  align-items: center;
}

/* 顶栏头像下拉 -------------------------------------------- */
.user-menu {
  position: relative;
}
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 0;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  transition: background 0.15s;
}
.user-menu-btn:hover {
  background: var(--slate-soft);
}
.user-menu-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pine);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  flex: none;
}
.user-menu-text {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.user-menu-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-caret {
  color: var(--slate);
  flex: none;
}
.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 60;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
.user-menu-item:hover {
  background: var(--slate-soft);
}

.main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 26px var(--gutter) 64px;
}

/* 卡片与分区 -------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.card-body {
  padding: 18px;
}
.card-flush .card-body {
  padding: 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 12px;
}
.section-head:first-child {
  margin-top: 0;
}
.section-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--slate);
}
.section-head .link-quiet {
  font-size: 13px;
}
.page-intro {
  max-width: 64ch;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--slate);
}

/* 徽章 -------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-live {
  color: var(--pine);
  background: var(--pine-soft);
}
.badge-pending {
  color: var(--ember);
  background: var(--ember-soft);
}
.badge-draft {
  color: var(--slate);
  background: var(--slate-soft);
}
.badge-cancel {
  color: var(--danger);
  background: var(--danger-soft);
}
.badge-info {
  color: var(--info);
  background: var(--info-soft);
}

/* 合作者联动：入驻进度勾选标记 -------------------------------- */
.pl-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pl-check {
  font-size: 12px;
  white-space: nowrap;
}
.pl-check.yes {
  color: var(--pine);
}
.pl-check.no {
  color: var(--slate);
}

/* 提示条 ------------------------------------------------ */
.notice {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
  border-left: 2px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--slate-soft);
  font-size: 13px;
  color: var(--slate);
}
.notice strong {
  color: var(--ink);
  font-weight: 500;
}
.notice[data-tone='action'] {
  border-left-color: var(--ember);
  background: var(--ember-soft);
}
.notice[data-tone='error'] {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}
.notice[data-tone='error'] strong {
  color: var(--danger);
}
.notice a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 订单详情里的提示条：与上方内容拉开距离，连续多条之间留空隙 */
.order-detail-notice {
  margin: 0 0 12px;
}
.order-detail-notice:last-child {
  margin-bottom: 0;
}
/* 订单明细表与金额行 */
.table.order-items {
  min-width: 0;
}
.table.order-items td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.order-amount {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

/* 工具栏 ------------------------------------------------ */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
}
.search svg {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--slate);
  pointer-events: none;
}
.search input {
  padding-left: 32px;
  padding-right: 28px;
}
.search-clear {
  position: absolute;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  font-size: 15px;
  line-height: 1;
}
.search-clear:hover {
  background: var(--line-soft);
  color: var(--ink);
}
.search[data-filled='true'] .search-clear {
  display: flex;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  color: var(--slate);
  transition: all 0.15s;
}
.chip:hover {
  border-color: #c7c4bc;
  color: var(--ink);
}
.chip[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.chip .chip-count {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.75;
  margin-left: 4px;
}
.spacer {
  flex: 1;
}

/* 表格 -------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  min-width: 720px;
}
.table th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--slate);
  text-align: left;
  white-space: nowrap;
  background: var(--card);
}
.table td {
  padding: var(--row-py) 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody tr:hover {
  background: #f5f4f0;
}
.table tbody tr[aria-selected='true'] {
  background: var(--ember-soft);
}
.table .num,
.table th.num {
  text-align: right;
}
.table .col-check {
  width: 40px;
  padding-right: 0;
}
/* 商品列表排版：名字列弹性吸收剩余；价格/状态/操作三列收缩到内容宽，价格右对齐留足间距，操作按钮左对齐紧挨状态 */
#product-table {
  min-width: 0;
}
#product-table th:nth-child(2),
#product-table td:nth-child(2) {
  min-width: 220px;
}
#product-table .money {
  width: 1px;
  white-space: nowrap;
  padding-right: 28px;
}
#product-table th#col-status,
#product-table td.col-status {
  width: 1px;
  white-space: nowrap;
  padding-right: 28px;
}
#product-table th#col-actions,
#product-table td.col-actions {
  width: 1px;
  white-space: nowrap;
}
#product-table .row-actions {
  justify-content: flex-start;
}
.table .cell-title {
  font-weight: 500;
  display: block;
}
.table .cell-sub {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--slate);
}
.table .money {
  font-weight: 500;
}
/* 待办表价格列：数字居中，落在「品名」与「状态」两列之间 */
.table .ov-todo-price {
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
  font-weight: 500;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable:hover {
  color: var(--ink);
}
th.sortable .arrow {
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  opacity: 0.35;
  font-size: 10px;
}
th[aria-sort] .arrow {
  opacity: 1;
  color: var(--ember);
}

.checkbox {
  width: 15px;
  height: 15px;
  min-height: 0;
  accent-color: var(--ember);
  cursor: pointer;
}

/* 表格状态：骨架 / 空 / 错误 ---------------------------- */
.state-block {
  padding: 44px 18px;
  text-align: center;
}
.state-block h3 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}
.state-block p {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 14px;
}
.skeleton-row td {
  padding: 14px 12px;
}
.bar {
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(90deg, #eae8e2 25%, #f2f1ec 50%, #eae8e2 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* 批量操作栏 -------------------------------------------- */
.bulkbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ember-soft);
  background: var(--ember-soft);
  font-size: 13px;
}
.bulkbar strong {
  font-weight: 600;
}

/* 分页 -------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--slate);
}
.pager-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pages {
  display: flex;
  gap: 4px;
}
.page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--slate);
  background: var(--card);
}
.page-btn:hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--ink);
}
.page-btn[aria-current='page'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-gap {
  padding: 0 2px;
  color: var(--slate);
}

/* 按钮 -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--card);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary {
  background: var(--ember);
  border-color: var(--ember);
  color: #fcf8f4;
}
.btn-primary:hover {
  background: #a9481a;
  border-color: #a9481a;
  color: #fcf8f4;
}
.btn-quiet {
  border-color: var(--line);
  color: var(--slate);
}
.btn-quiet:hover {
  border-color: var(--ink);
  background: var(--card);
  color: var(--ink);
}
.btn-quiet[data-danger] {
  color: var(--danger);
}
.btn-quiet[data-danger]:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fdf6f5;
}
.btn-danger:hover {
  background: #8c2a22;
  border-color: #8c2a22;
  color: #fdf6f5;
}
.btn-small {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 13px;
}
.btn-block {
  width: 100%;
}
.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.btn svg {
  width: 15px;
  height: 15px;
}

.row-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.row-actions button {
  font-size: 13px;
  color: var(--slate);
  white-space: nowrap;
  flex: 0 0 auto;
}
.row-actions button:hover {
  color: var(--ember);
}
.row-actions button[data-danger]:hover {
  color: var(--danger);
}

/* 表单 -------------------------------------------------- */
.field {
  margin-bottom: 16px;
}
.field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}
.field .req {
  color: var(--ember);
}
input,
select,
textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.15s;
}
textarea {
  min-height: 80px;
  resize: vertical;
}
input:hover,
select:hover,
textarea:hover {
  border-color: #c7c4bc;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
  outline: none;
}
input[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--danger);
  background: #fdf8f7;
}
input[readonly] {
  color: var(--slate);
  background: var(--slate-soft);
}
.help {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--slate);
}
/* 使用指引 / 新手引导 */
.guide-heading {
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pine);
}
.guide-heading:first-child {
  margin-top: 0;
}
.guide-steps {
  margin: 0;
  padding-left: 20px;
  line-height: 1.9;
}
.guide-steps li + li {
  margin-top: 4px;
}
.error-text {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--danger);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.form-section {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 36px;
}
.kv dt {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--slate);
}
.kv dd {
  margin-top: 2px;
  font-size: 14px;
}
.kv-wide {
  grid-column: 1 / -1;
}
fieldset {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
fieldset legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  cursor: pointer;
}
input[type='file'] {
  padding: 6px 8px;
  font-size: 13px;
}

/* 照片本地预览：仅内存 object URL，不上传、刷新失效 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.photo-thumb {
  margin: 0;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel, #fff);
}
.photo-thumb img {
  display: block;
  width: 100%;
  height: 84px;
  object-fit: cover;
}
.photo-thumb figcaption {
  padding: 4px 6px;
  font-size: 11px;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 交付成片上传：大加号卡片 + 缩略图小卡片 -------------------- */
.dlv-upload-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.dlv-upload-tile {
  width: 96px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--line, #e3e8ef);
  border-radius: 10px;
  background: var(--panel, #fff);
  color: var(--slate, #6b7280);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.dlv-upload-tile:hover {
  border-color: var(--pine, #21544a);
  color: var(--pine, #21544a);
  background: var(--bg, #f7f5f0);
}
.dlv-upload-tile:focus-visible {
  outline: 2px solid var(--pine, #21544a);
  outline-offset: 2px;
}
.dlv-plus {
  font-size: 32px;
  line-height: 1;
  font-weight: 300;
}
.dlv-upload-hint {
  font-size: 12px;
}
.dlv-thumb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dlv-thumb {
  position: relative;
  width: 96px;
  margin: 0;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel, #fff);
}
.dlv-thumb img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
}
.dlv-thumb .dlv-thumb-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  background: var(--bg, #f7f5f0);
  color: var(--slate, #6b7280);
  font-size: 12px;
}
.dlv-thumb figcaption {
  padding: 3px 6px;
  font-size: 11px;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dlv-thumb .dlv-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: rgba(27, 30, 28, 0.55);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.dlv-thumb .dlv-remove:hover {
  background: rgba(27, 30, 28, 0.78);
}

/* 选择卡：主体类型 / 身份 / 服务类型 -------------------- */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.choice:hover {
  border-color: #c7c4bc;
}
.choice[data-on='true'] {
  border-color: var(--ink);
  background: var(--slate-soft);
}
.choice[data-locked='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}
.choice[data-locked='true'] input {
  cursor: not-allowed;
}
.choice input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  min-height: 0;
  margin-top: 3px;
  accent-color: var(--ember);
  cursor: pointer;
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-title {
  font-size: 14px;
  font-weight: 500;
}
.choice-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate);
}

/* 主体类型变更：双卡片选择 */
.subject-choice-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.subject-choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.subject-choice-card:hover {
  border-color: var(--pine);
  box-shadow: var(--shadow-card);
}
.subject-choice-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.subject-choice-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--slate);
}

fieldset .notice {
  margin-top: 9px;
}
fieldset .error-text {
  margin-top: 7px;
}

/* 注册：服务区域下拉（新疆境内，可多选可全选） */
.region-select {
  position: relative;
  max-width: 320px;
}
.region-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.region-trigger:hover {
  border-color: #c7c4bc;
}
.region-trigger[aria-expanded='true'] {
  border-color: var(--ember);
}
.region-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--slate);
}
.region-summary.has-value {
  color: var(--ink);
}
.region-caret {
  flex: 0 0 auto;
  color: var(--slate);
  transition: transform 0.15s;
}
.region-trigger[aria-expanded='true'] .region-caret {
  transform: rotate(180deg);
}
.region-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-pop);
}
.region-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.region-confirm {
  margin-left: auto;
  color: var(--ember);
  font-weight: 600;
}
.region-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.region-chip {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.15s, background 0.15s;
}
.region-chip:hover {
  border-color: #c7c4bc;
}
.region-chip[data-on='true'] {
  border-color: var(--ink);
  background: var(--slate-soft);
}
.region-chip input {
  accent-color: var(--ember);
}
.region-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.region-group-head {
  display: flex;
  align-items: center;
}
.region-group-check {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}
.region-group-check input {
  accent-color: var(--ember);
  flex: 0 0 auto;
  margin: 0;
}
.region-group-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.region-group-check[data-on='true'] .region-group-name {
  color: var(--ember);
  font-weight: 600;
}
.region-group-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 36px;
  padding: 0;
  margin-right: 6px;
  border: 0;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
}
.region-group-caret {
  transition: transform 0.15s;
}
.region-group-toggle[aria-expanded='true'] .region-group-caret {
  transform: rotate(180deg);
}
.region-group-body {
  padding: 0 10px 10px;
}
.region-chip-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

/* 注册「提供的服务」：紧凑横向排列 */
.choices-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choices-inline .choice {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  width: auto;
}
.choices-inline .choice input {
  margin-top: 0;
}
.choices-inline .choice-body {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.choices-inline .choice-title {
  font-size: 13px;
}
.choices-inline .choice-desc {
  font-size: 11px;
}

/* 密码显隐切换 */
.pw-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0 0 4px;
  border: 0;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
}
.pw-toggle:hover {
  color: var(--ink);
}
.pw-toggle .icon-eye-off {
  display: none;
}
.pw-toggle[data-shown='true'] .icon-eye {
  display: none;
}
.pw-toggle[data-shown='true'] .icon-eye-off {
  display: block;
}

/* 注册底部：服务号二维码 */
.service-qr {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
}
.service-qr-code {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
.service-qr canvas {
  display: block;
  width: 108px;
  height: 108px;
  background: #ffffff;
}
.service-qr-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(33, 84, 74, 0.9);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}
.service-qr-overlay svg {
  width: 22px;
  height: 22px;
}
.service-qr-body {
  min-width: 0;
}
.service-qr-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.service-qr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.service-qr-list li {
  font-size: 12px;
  color: var(--slate);
}
.service-qr-list li::before {
  content: '✓';
  margin-right: 4px;
  color: var(--pine);
}
.service-qr-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--slate);
}
.service-qr-hint.error {
  color: var(--danger);
}
.service-qr-code.service-qr-error {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* 预约时间表 ------------------------------------------- */
.head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sched-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sched-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}
.sched-bar .mono {
  font-size: 12px;
  color: var(--slate);
}

.sched {
  width: 100%;
  min-width: 660px;
}
.sched thead th {
  padding: 8px 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--slate);
  text-align: center;
}
.sched thead th[data-today='true'] {
  color: var(--ember);
}
.sched .sched-date {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.8;
}
.sched .sched-closed {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: var(--slate);
}
.sched tbody th.sched-time {
  width: 68px;
  padding: 6px 8px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  text-align: left;
}
.sched td {
  padding: 3px;
  border-bottom: 1px solid var(--line-soft);
}

.slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-height: 44px;
  padding: 5px 7px;
  border-radius: var(--radius);
  font-size: 12px;
  text-align: left;
  overflow: hidden;
}
.slot-who {
  font-weight: 500;
}
.slot-what {
  font-size: 11px;
  opacity: 0.78;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 已被预约：松绿淡底 + 左侧实心竖线；可预约：虚线空框；休息 / 已过：置灰 */
.slot-booked {
  background: var(--pine-soft);
  color: var(--pine);
  border-left: 2px solid var(--pine);
}
.slot-booked:hover {
  background: #d8e4df;
}
/* 待确认的客户单：赭橙，提醒商家去确认 */
.slot-pending {
  background: var(--ember-soft);
  color: var(--ember);
  border-left: 2px solid var(--ember);
}
.slot-pending:hover {
  background: #f2dccf;
}
.slot-done {
  background: var(--slate-soft);
  color: var(--slate);
  border-left: 2px solid var(--line);
}
.slot-done:hover {
  background: #e2e3de;
}
.slot-free {
  border: 1px dashed var(--line);
  color: var(--slate);
  background: var(--card);
}
.slot-free:hover {
  border-color: var(--ember);
  border-style: solid;
  color: var(--ember);
  background: var(--ember-soft);
}
.slot-past,
.slot-closed {
  justify-content: center;
  align-items: center;
  cursor: default;
  background: repeating-linear-gradient(135deg, #f1f0eb 0 6px, #e9e7e1 6px 12px);
  color: #a9aea9;
  font-size: 11px;
}
.foot-actions {
  display: flex;
  gap: 10px;
}

/* 权限展示 --------------------------------------------- */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.platform-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.platform-row + .platform-row {
  margin-top: 6px;
}
.demo-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

/* 平台分组选择 ---------------------------------------- */
.platform-perm-group + .platform-perm-group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.platform-perm-head {
  margin-bottom: 8px;
}

/* CAAC 执照小方格 + 状态胶囊 --------------------------- */
.caac-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.caac-slot {
  display: inline-block;
  cursor: pointer;
}
.caac-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.caac-slot:hover .caac-frame {
  border-color: var(--pine);
  background: var(--pine-soft);
}
.caac-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--slate);
  font-size: 12px;
}
.caac-placeholder svg {
  opacity: 0.5;
}
.caac-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}
.caac-slot.uploaded .caac-frame {
  border-style: solid;
  border-color: var(--pine);
}
.caac-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.caac-file {
  font-size: 12px;
  color: var(--slate);
}

/* 身份证上传：正面+背面方格缩略框 ------------------ */
.id-card-upload {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.id-card-slot {
  position: relative;
}
.id-card-frame {
  position: relative;
  aspect-ratio: 1.585 / 1;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.id-card-frame:hover {
  border-color: var(--pine);
  background: var(--pine-soft);
}
.id-card-slot[data-side="front"] .id-card-frame {
  border-color: var(--line);
}
.id-card-slot[data-side="front"] .id-card-frame:hover {
  border-color: var(--ember);
  background: var(--ember-soft);
}
.id-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--slate);
  pointer-events: none;
}
.id-card-placeholder svg {
  color: var(--slate);
  opacity: .5;
}
.id-card-placeholder > span:first-of-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .06em;
}
.id-card-hint {
  font-size: 11px;
  color: var(--slate);
  opacity: .7;
}
.id-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}
.id-card-ocr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251,250,247,.85);
  backdrop-filter: blur(2px);
}
.ocr-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--pine);
  letter-spacing: .08em;
  padding: 4px 12px;
  border: 1px solid var(--pine);
  border-radius: 4px;
  background: var(--pine-soft);
  animation: ocr-pulse 1.2s ease-in-out infinite;
}
@keyframes ocr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.id-card-slot.uploaded .id-card-frame {
  border-style: solid;
  border-color: var(--pine);
}
.id-card-slot.uploaded .id-card-placeholder {
  display: none;
}
.id-card-reupload {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  color: var(--slate);
  background: rgba(251,250,247,.9);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  cursor: pointer;
  z-index: 2;
}
.id-card-reupload:hover {
  color: var(--ember);
  border-color: var(--ember);
}
@media (max-width: 600px) {
  .id-card-upload {
    grid-template-columns: 1fr;
  }
}
.ocr-filled {
  border-color: var(--pine) !important;
  background: var(--pine-soft) !important;
  transition: border-color .3s, background .3s;
}
.license-upload {
  max-width: 320px;
  margin-bottom: 16px;
}

/* 账户信息卡：各行操作按钮统一靠右对齐 */
#account-info dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#account-info dd .btn {
  margin-left: auto;
}

/* 营业执照缩略图：横版 1.414:1（真实执照长宽比），比身份证小方格略大 */
.license-thumb-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  max-width: 100%;
  aspect-ratio: 1.414 / 1;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.license-thumb-box.license-thumb-empty {
  flex-direction: column;
  gap: 4px;
  color: var(--slate);
}
.license-thumb-box.license-thumb-empty svg {
  opacity: 0.5;
}
.license-thumb-box.license-thumb-empty > span:first-of-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.license-thumb-hint {
  font-size: 11px;
  color: var(--slate);
  opacity: 0.7;
}
.license-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 注册页图片上传操作按钮：删除 + 放大查看 ------------------ */
.upload-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  align-items: center;
  gap: 6px;
  z-index: 3;
}
.id-card-slot.uploaded .upload-actions,
.caac-slot.uploaded .upload-actions,
.license-thumb-box:not(.license-thumb-empty) .upload-actions {
  display: flex;
}
.upload-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(251, 250, 247, .92);
  color: var(--slate);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  transition: color .2s, background .2s;
}
.upload-action svg {
  width: 15px;
  height: 15px;
}
.upload-action:hover {
  background: #fff;
}
.upload-zoom:hover {
  color: var(--pine);
}
.upload-remove:hover {
  color: var(--ember);
}

/* 图片放大预览浮层 ------------------ */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .7);
  padding: 24px;
}
.img-lightbox[hidden] {
  display: none;
}
.img-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  background: #fff;
}
.img-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.img-lightbox-close:hover {
  background: rgba(255, 255, 255, .3);
}

/* 营业时间编辑器 ------------------ */
.hours-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hours-presets {
  display: flex;
  gap: 6px;
}
.hours-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.weekday-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--slate);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
}
.weekday-btn:hover {
  border-color: var(--pine);
  color: var(--pine);
}
.weekday-btn.active {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
}
.weekday-preset {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--slate);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  margin-left: 4px;
}
.weekday-preset:hover {
  border-color: var(--ember);
  color: var(--ember);
}
.hours-time {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hours-time-input {
  width: 90px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--ink);
}
.hours-time-sep {
  font-size: 12px;
  color: var(--slate);
}

.topbar-meta a.badge:hover {
  color: var(--ember);
}

/* 身份摘要：工作台只读一行 + 设置页合并面板 ------------------ */
.identity-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.identity-bar > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.identity-bar strong {
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.identity-readonly {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--slate-soft);
}
.identity-readonly strong {
  font-size: 14px;
  font-weight: 500;
}
.perm-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

/* 弹窗 -------------------------------------------------- */
.dialog {
  width: min(640px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.dialog::backdrop {
  background: rgba(27, 30, 28, 0.38);
}
.dialog-narrow {
  width: min(440px, calc(100vw - 32px));
}
.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.dialog-head h2 {
  font-size: 17px;
  font-weight: 600;
}
.dialog-head p {
  margin-top: 3px;
  font-size: 13px;
  color: var(--slate);
}
.dialog-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--slate);
}
.dialog-close:hover {
  background: var(--slate-soft);
  color: var(--ink);
}
.dialog-body {
  padding: 18px 20px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
}
.dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
}

/* Toast ------------------------------------------------- */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 380px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  font-size: 13px;
  animation: toast-in 0.18s ease-out;
}
.toast::before {
  content: '';
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--line);
}
.toast[data-tone='success']::before {
  background: var(--pine);
}
.toast[data-tone='error']::before {
  background: var(--danger);
}
.toast[data-tone='info']::before {
  background: var(--ember);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 登录与认证 -------------------------------------------- */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 48px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ember);
  margin-bottom: 30px;
}
.auth-brand svg {
  width: 26px;
  height: 26px;
}
.auth-brand span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.auth-card {
  width: 100%;
  max-width: 392px;
}
.auth-head h1 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.auth-head p {
  margin-top: 7px;
  font-size: 13px;
  color: var(--slate);
}
.auth-form {
  margin-top: 26px;
}
.auth-form input {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 7px 0;
  min-height: 38px;
}
.auth-form input:focus {
  border-bottom-color: var(--ember);
}
.auth-form input[aria-invalid='true'] {
  border-bottom-color: var(--danger);
  background: transparent;
}
.auth-form .field {
  margin-bottom: 20px;
}
.auth-submit {
  margin-top: 26px;
  min-height: 40px;
}
.auth-switch {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--slate);
}
.auth-switch a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.auth-switch a:hover {
  border-bottom-color: var(--ember);
  color: var(--ember);
}
.auth-foot {
  margin-top: 36px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--slate);
}
.auth-wide {
  max-width: 560px;
}

/* 登录卡片：左右两栏（左侧密码/手机号切换，右侧微信扫码二维码） */
.auth-login-card {
  max-width: 640px;
}

/* 登录方式切换：长胶囊，密码登录 / 手机号验证 */
.login-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 26px;
  background: var(--slate-soft);
  border-radius: 999px;
}
.login-tab {
  flex: 1;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--slate);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.login-tab:hover {
  color: var(--ink);
}
.login-tab.active {
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.login-tab:focus-visible {
  outline: 2px solid var(--ember, #c2551d);
  outline-offset: 2px;
}

.login-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}
.login-main {
  min-width: 0;
  padding-right: 30px;
}
.login-aside {
  display: flex;
  align-items: flex-start;
  padding-left: 30px;
  border-left: 1px solid var(--line);
}
.login-panel {
  margin-top: 0;
}
.login-panel .auth-form {
  margin-top: 0;
}

.login-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.login-qr canvas {
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.login-qr-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.login-qr-hint {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate);
}

.auth-divider {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

/* 总览页 ------------------------------------------------ */
.overview {
  max-width: 940px;
  margin: 0 auto;
  padding: 48px 28px 80px;
}
.overview h1 {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.overview .lede {
  margin-top: 12px;
  max-width: 60ch;
  font-size: 15px;
  color: var(--slate);
}
.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.swatch-chip {
  height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.swatch-name {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 500;
}
.swatch-hex {
  font-size: 12px;
  color: var(--slate);
}
.frame {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow-x: auto;
}
.frame pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
}
.page-links {
  border-top: 1px solid var(--ink);
}
.page-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.page-links .name {
  font-size: 15px;
  font-weight: 500;
}
.page-links .desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--slate);
}
.page-links .go {
  font-size: 13px;
  color: var(--slate);
}
.page-links a:hover .go {
  color: var(--ember);
}
.spec {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 20px;
  font-size: 14px;
}
.spec dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--slate);
}

/* 响应式 ------------------------------------------------ */
@media (max-width: 1100px) {
  .readout {
    grid-template-columns: repeat(2, 1fr);
  }
  .readout-cell:nth-child(odd) {
    border-left: 0;
  }
  .readout-cell:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }
}
@media (max-width: 900px) {
  .form-grid,
  .kv {
    grid-template-columns: 1fr;
  }
  .swatches {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 780px) {
  :root {
    --gutter: 18px;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    background: var(--card);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .shell[data-nav='open'] .sidebar {
    transform: none;
  }
  .menu-btn {
    display: inline-flex;
  }
  .scrim {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(27, 30, 28, 0.32);
    border: 0;
  }
  .toasts {
    left: 16px;
    right: 16px;
  }
  .table-scroll {
    margin: 0 -18px;
    padding: 0 18px;
  }
  .table {
    min-width: 600px;
  }
}
@media (min-width: 781px) {
  .scrim {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   摄影师第一阶段：工作台 · 档期中心 · 拍摄订单
   沿用本文的令牌与组件，只补本轮需要的结构
   ============================================================ */

/* 页面头与指标卡 ---------------------------------------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 16px;
}
.page-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--slate);
}
.field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.studio-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 28px;
}
.studio-top .num {
  font-size: 15px;
}
.studio-top .head-actions {
  padding-bottom: 2px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.metric-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 18px 17px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.metric-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pine);
}
.metric-card[data-tone='warn']::before {
  background: var(--ember);
}
.metric-card[data-tone='bad']::before {
  background: var(--danger);
}
.metric-card:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(27, 30, 28, 0.1);
  transform: translateY(-1px);
}
.metric-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--slate);
}
.metric-value {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.metric-note {
  margin-top: 5px;
  font-size: 12px;
  color: var(--slate);
}
.metric-go {
  margin-top: 9px;
  font-size: 12px;
  color: var(--ember);
}
.metric-card[data-tone='warn'] .metric-value {
  color: var(--ember);
}
.metric-card[data-tone='bad'] .metric-value {
  color: var(--danger);
}


/* 周历 / 团队排期 --------------------------------------- */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(148px, 1fr));
  gap: 1px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--line-soft);
  overflow: hidden;
}
.week-col {
  background: var(--card);
  min-width: 148px;
}
.week-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.week-head[data-today='true'] {
  background: var(--ember-soft);
}
.week-head[data-today='true'] .week-day {
  color: var(--ember);
}
.week-day {
  font-size: 13px;
  font-weight: 500;
}
.week-date {
  font-size: 11px;
  color: var(--slate);
}
.week-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 116px;
  padding: 8px;
}

.task-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius);
  border-left: 2px solid var(--pine);
  background: var(--pine-soft);
  color: var(--pine);
  text-align: left;
}
.task-card:hover {
  background: #d8e4df;
}
.task-card[data-status='pending'] {
  border-left-color: var(--ember);
  background: var(--ember-soft);
  color: var(--ember);
}
.task-card[data-status='pending']:hover {
  background: #f2dccf;
}
.task-card[data-status='done'] {
  border-left-color: var(--line);
  background: var(--slate-soft);
  color: var(--slate);
}
.task-card[data-status='cancelled'] {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}
.task-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.task-cust {
  font-size: 13px;
  font-weight: 500;
}
.task-line {
  font-size: 11px;
  opacity: 0.84;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-flag {
  font-size: 11px;
}

.block-card {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius);
  text-align: left;
  background: repeating-linear-gradient(135deg, #f1f0eb 0 6px, #e9e7e1 6px 12px);
  color: #7c827d;
  font-size: 11px;
}

.team {
  min-width: 920px;
}
.team th,
.team td {
  vertical-align: top;
}
.team td {
  padding: 6px;
}
.team .who {
  font-size: 13px;
  font-weight: 500;
}
.team .who small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--slate);
}
.team .task-card {
  padding: 5px 7px;
}
.team tbody th {
  position: sticky;
  left: 0;
  background: var(--card);
}

/* 分段控件 ---------------------------------------------- */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.seg-btn {
  padding: 5px 12px;
  font-size: 13px;
  color: var(--slate);
  background: var(--card);
}
.seg-btn + .seg-btn {
  border-left: 1px solid var(--line);
}
.seg-btn:hover {
  color: var(--ink);
}
.seg-btn[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}

/* 职业切换标签：摄影 / 无人机 / 妆造 共用一个工作台 */
.profession-switch {
  display: inline-flex;
  gap: 6px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.prof-tab {
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--slate);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transform: translateY(0);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  will-change: transform;
}
.prof-tab:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(20, 20, 20, 0.08);
}
.prof-tab.active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(20, 20, 20, 0.16);
}
.prof-tab:focus-visible {
  outline: 2px solid var(--ember, #c2551d);
  outline-offset: 2px;
}

/* 宽弹窗 / 详情分区 / 操作记录 -------------------------- */
.dialog-wide {
  width: min(880px, calc(100vw - 32px));
}
.detail-block {
  margin-bottom: 20px;
}
.detail-block:last-child {
  margin-bottom: 0;
}
.detail-block h3 {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--slate);
}
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}
.timeline li {
  position: relative;
  padding: 0 0 12px 16px;
  font-size: 13px;
}
.timeline li:last-child {
  padding-bottom: 0;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.timeline li[data-tone='action']::before {
  background: var(--ember);
}
.timeline .tl-at {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
}
.timeline .tl-actor {
  color: var(--slate);
}

.time-set {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #f7f6f2;
}
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1100px) {
  .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ov-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 780px) {
  .metric-row {
    grid-template-columns: 1fr;
  }
}

/* ── 第二轮：服务封面占位 / 表单分组 / 勾选项 ─────────── */
.cell-with-thumb {
  display: flex;
  align-items: center;
  gap: 10px;
}
.thumb {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--pine);
  background: var(--pine-soft);
  border: 1px solid var(--line-soft);
}
.thumb[data-tone='tone-2'] {
  color: var(--ember);
  background: var(--ember-soft);
}
.thumb[data-tone='tone-3'] {
  color: #4a3a6b;
  background: #edeaf3;
}
.thumb[data-tone='tone-4'] {
  color: #1f4e5c;
  background: #e6eff1;
}
.thumb[data-tone='tone-5'] {
  color: #6b4a1f;
  background: #f3ede4;
}
.thumb[data-tone='tone-6'] {
  color: var(--slate);
  background: var(--slate-soft);
}

.form-group {
  margin: 4px 0 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #f7f6f2;
}
.form-group legend {
  padding: 0 6px;
  margin-left: -6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--slate);
}
.form-group legend:not(:first-of-type) {
  margin-top: 18px;
}
.form-group > .field + .field {
  margin-top: 12px;
}
.form-group select[multiple] {
  min-height: 88px;
}

/* 最终受益人：多位动态表单组 */
.beneficiary-group {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card);
}
.beneficiary-legal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.beneficiary-legal input {
  width: auto;
  min-height: 0;
}
.beneficiary-ids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.beneficiary-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .beneficiary-ids {
    grid-template-columns: 1fr;
  }
}

.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 2px 0 12px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.check input {
  width: 15px;
  height: 15px;
  accent-color: var(--pine);
}

/* ── 作品集 ─────────────────────────────────────────────── */
.chip-row {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.switch-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.switch-line input {
  width: 15px;
  height: 15px;
  accent-color: var(--pine);
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 14px;
}
.pf-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.pf-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--slate-soft);
  display: block;
  cursor: zoom-in;
}
.pf-cover-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-soft);
  color: var(--slate);
  font-size: 12px;
}
.pf-card .pf-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pf-card .pf-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pf-card .pf-title .star {
  color: var(--ember);
}
.pf-card .pf-meta {
  font-size: 12px;
  color: var(--slate);
  line-height: 1.5;
}
.pf-card .pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  align-items: center;
}
.pf-card .pf-cat {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate);
}
.pf-card .pf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.pf-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--slate);
}

/* 作品集素材：小四方格 + 末尾加号格 ──────────────── */
.pf-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.pf-media-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.pf-media-item.is-cover {
  border-color: var(--ember);
  box-shadow: 0 0 0 1px var(--ember);
}
.pf-thumb-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--slate-soft);
}
.pf-thumb-media.pf-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  font-size: 11px;
}
.pf-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.pf-cover-flag {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ember);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
}
.pf-media-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
}
.pf-badge-video {
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 10px;
  line-height: 16px;
}
.pf-set-cover {
  margin-left: auto;
  padding: 1px 6px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--pine);
  font-size: 10px;
  line-height: 16px;
  cursor: pointer;
}
.pf-media-remove {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--slate);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pf-media-sort {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
}
.pf-media-move {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--pine);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pf-media-move:hover {
  background: #fff;
  color: var(--ember);
}
.pf-media-move:disabled {
  opacity: 0.35;
  cursor: default;
}
.pf-media-add {
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--slate);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-media-add:hover {
  border-color: var(--pine);
  color: var(--pine);
}
.pf-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.72);
}
.pf-upload-track {
  width: 72%;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.pf-upload-fill {
  height: 100%;
  background: var(--pine);
  transition: width 0.15s ease;
}
.pf-upload-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.pf-upload-overlay.pf-upload-error {
  background: rgba(255, 255, 255, 0.85);
}
.pf-upload-error span {
  font-size: 11px;
  color: var(--ember);
}
.pf-upload-retry {
  padding: 2px 8px;
  border: none;
  border-radius: 999px;
  background: var(--pine);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
}
.pf-upload-retry:hover {
  background: var(--ember);
}

/* 商品图集：新建 / 从作品集选择 的模式切换与面板 */
.pg-mode {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.pg-panel {
  margin-top: 8px;
}

/* 素材大图预览 lightbox（dialog，进 top layer 覆盖编辑弹窗） */
.pf-lightbox-dialog {
  width: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}
.pf-lightbox-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
}
.pf-lightbox-dialog img {
  display: block;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  cursor: zoom-out;
}
.pf-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pf-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.32);
}
.pf-lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.pf-lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.32);
}
.pf-lightbox-prev {
  left: 16px;
}
.pf-lightbox-next {
  right: 16px;
}
.pf-lightbox-count {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
}

/* 团队成员管理 ───────────────────────────────────────── */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 16px;
}
.tm-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tm-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pine);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  flex: none;
}
.tm-id {
  min-width: 0;
}
.tm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tm-sub {
  font-size: 12px;
  color: var(--slate);
}
.tm-note {
  margin: 0;
}
.tm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tm-toggle {
  align-self: flex-start;
  font-size: 12px;
  padding: 0;
  margin-top: 2px;
}
.tm-tasks {
  list-style: none;
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.tm-tasks li {
  line-height: 1.5;
}
.tm-tasks .badge {
  margin-left: 6px;
}
.kv-plain {
  font-size: 14px;
  color: var(--ink);
}
.empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--slate);
}
.empty p {
  margin: 6px 0;
}
.tm-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tm-task-list li {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* 商品列表：当前类目与筛选说明 */
#product-scope-note {
  margin: 0 0 12px;
}

/* 租赁流程 ---------------------------------------------- */
[data-view='rentals'] .chip-row,
[data-view='rental-returns'] .chip-row {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}
[data-rental-empty] {
  border-top: 1px solid var(--line-soft);
}
.rental-flag {
  color: var(--danger);
  font-weight: 500;
}
.rental-flow-wrap {
  overflow-x: auto;
  padding: 18px 16px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #f7f6f2;
}
.rental-flow {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 760px;
}
.rental-flow li {
  position: relative;
  flex: 1 1 0;
  padding-top: 24px;
  font-size: 12px;
  color: var(--slate);
  text-align: center;
}
.rental-flow li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 50%;
  height: 1px;
  background: var(--line);
}
.rental-flow li:first-child::before {
  display: none;
}
.rf-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  transform: translateX(-50%);
}
.rf-label {
  display: block;
  white-space: nowrap;
}
.rental-flow li[data-state='done'] {
  color: var(--pine);
}
.rental-flow li[data-state='done'] .rf-dot {
  border-color: var(--pine);
  background: var(--pine);
}
.rental-flow li[data-state='done']::before {
  background: var(--pine);
}
.rental-flow li[data-state='current'] {
  color: var(--ember);
  font-weight: 500;
}
.rental-flow li[data-state='current'] .rf-dot {
  border-color: var(--ember);
  background: var(--ember-soft);
  box-shadow: 0 0 0 3px var(--ember-soft);
}
.rental-flow li[data-state='current']::before {
  background: var(--ember);
}
.rental-flow li[data-state='off'] {
  color: var(--line);
}
.rental-flow li[data-state='off'] .rf-dot {
  border-style: dashed;
}
.rental-flow-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--danger);
}

/* 平台派单流程 */
.pt-flow-wrap {
  overflow-x: auto;
  padding: 18px 16px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #f7f6f2;
}
.pt-flow {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 620px;
}
.pt-flow li {
  position: relative;
  flex: 1 1 0;
  padding-top: 24px;
  font-size: 12px;
  color: var(--slate);
  text-align: center;
}
.pt-flow li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 50%;
  height: 1px;
  background: var(--line);
}
.pt-flow li:first-child::before {
  display: none;
}
.pt-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  transform: translateX(-50%);
}
.pt-label {
  display: block;
  white-space: nowrap;
}
.pt-flow li[data-state='done'] {
  color: var(--pine);
}
.pt-flow li[data-state='done'] .pt-dot {
  border-color: var(--pine);
  background: var(--pine);
}
.pt-flow li[data-state='done']::before {
  background: var(--pine);
}
.pt-flow li[data-state='current'] {
  color: var(--ember);
  font-weight: 500;
}
.pt-flow li[data-state='current'] .pt-dot {
  border-color: var(--ember);
  background: var(--ember-soft);
  box-shadow: 0 0 0 3px var(--ember-soft);
}
.pt-flow li[data-state='current']::before {
  background: var(--ember);
}
.pt-flow li[data-state='off'] {
  color: var(--line);
}
.pt-flow li[data-state='off'] .pt-dot {
  border-style: dashed;
}
.pt-flow-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--danger);
}
.pt-flag {
  color: var(--danger);
  font-weight: 500;
}

/* 订单操作区：主操作 + 更多操作 */
.more-ops {
  position: relative;
  display: inline-block;
}
.more-ops > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--slate);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.more-ops > summary::-webkit-details-marker {
  display: none;
}
.more-ops > summary::after {
  content: '▾';
  font-size: 10px;
  transition: transform 0.15s;
}
.more-ops[open] > summary {
  border-color: var(--ink);
  color: var(--ink);
}
.more-ops[open] > summary::after {
  transform: rotate(180deg);
}
.more-ops-body {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-pop);
}
.more-ops-body .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border: 0;
}
/* ============================================================
   客服中心（support-chat.js）
   ============================================================ */
.support-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: min(660px, calc(100vh - 180px));
  min-height: 460px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.support-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
}
.support-list-head {
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.support-list-head .search {
  min-width: 0;
  max-width: none;
  width: 100%;
}
.support-list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.support-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  transition: background 0.15s;
}
.support-item:hover {
  background: var(--slate-soft);
}
.support-item.is-active {
  background: var(--pine-soft);
}
.support-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  color: #fbfaf7;
}
.support-avatar[data-tone='pink'] { background: #b2567a; }
.support-avatar[data-tone='blue'] { background: var(--info); }
.support-avatar[data-tone='green'] { background: #38755c; }
.support-avatar[data-tone='purple'] { background: #6b5aa6; }
.support-avatar[data-tone='orange'] { background: var(--ember); }
.support-item-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.support-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.support-item-name {
  font-size: 14px;
  font-weight: 600;
}
.support-item-time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--slate);
}
.support-item-preview {
  font-size: 13px;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-unread {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ember);
  color: #fcf8f4;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.support-list-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--slate);
  font-size: 13px;
}
.support-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.support-chat-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.support-chat-name {
  font-size: 15px;
  font-weight: 600;
}
.support-chat-sub {
  font-size: 12px;
  color: var(--slate);
}
.support-chat-body {
  position: relative;
  flex: 1;
  min-height: 0;
}
.support-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  font-size: 13px;
}
.support-messages {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  overflow-y: auto;
  padding: 18px;
}
.support-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 72%;
}
.support-msg.is-mine {
  align-self: flex-end;
  align-items: flex-end;
}
.support-msg-bubble {
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--slate-soft);
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
.support-msg.is-mine .support-msg-bubble {
  background: var(--pine-soft);
  border-color: transparent;
}
.support-msg-time {
  padding: 0 2px;
  font-size: 11px;
  color: var(--slate);
}
.support-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
}
.support-input-row input {
  flex: 1;
  min-width: 0;
}
@media (max-width: 720px) {
  .support-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .support-list {
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .support-chat {
    height: 440px;
  }
}
/* ============================================================
   经营概览（工作台首页）—— 营收与近 7 日趋势为核心
   ============================================================ */

/* 页头：浅色纸底，不套绿色渐变横幅 */
.ov-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 2px 2px 6px;
}
.ov-head-main {
  min-width: 0;
}
.ov-hello {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--slate);
}
.ov-title {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ov-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--slate);
}
.ov-sub .help {
  margin: 2px 0 0;
}
.ov-head-side {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 24px;
}
.ov-date,
.ov-member {
  text-align: right;
}
.ov-date-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate);
}
.ov-date-value {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ov-member select {
  width: auto;
  min-height: 32px;
  padding: 4px 8px;
}

/* 营收核心：左侧今日营收大数，右侧近 7 日趋势 */
.ov-revenue {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
  margin: 18px 0 14px;
}
.ov-rev-main,
.ov-rev-trend {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.ov-rev-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 20px 22px;
  border-left: 3px solid var(--pine);
}
.ov-rev-trend {
  padding: 16px 18px 14px;
}
.ov-rev-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--slate);
}
.ov-rev-amount {
  margin-top: 4px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--pine);
}
.ov-rev-note {
  font-size: 12px;
  color: var(--slate);
}
.ov-rev-trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ov-rev-total {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* 近 7 日柱状图：纯 CSS，不引第三方图表 */
.ov-chart {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 132px;
}
.ov-chart-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.ov-chart-val {
  font-size: 11px;
  line-height: 1;
  color: var(--slate);
  white-space: nowrap;
}
.ov-chart-plot {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ov-chart-bar {
  width: 100%;
  max-width: 46px;
  border-radius: 3px 3px 0 0;
  background: var(--pine);
}
.ov-chart-col.is-today .ov-chart-bar {
  background: var(--ember);
}
.ov-chart-day {
  font-size: 11px;
  color: var(--slate);
  white-space: nowrap;
}
.ov-chart-col.is-today .ov-chart-day,
.ov-chart-col.is-today .ov-chart-val {
  color: var(--ember);
  font-weight: 600;
}

/* 运营指标：今日拍摄 / 待确认预约 / 待交付 / 已逾期 */
.ov-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.ov-kpi {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.ov-kpi::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: var(--pine);
  opacity: 0;
  transition: opacity 0.15s;
}
.ov-kpi:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(27, 30, 28, 0.08);
}
.ov-kpi:hover::after {
  opacity: 1;
}
.ov-kpi-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--slate);
}
.ov-kpi-value {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.ov-kpi-note {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--slate);
}
.ov-kpi[data-tone='warn'] .ov-kpi-value {
  color: var(--ember);
}
.ov-kpi[data-tone='warn']::after {
  background: var(--ember);
}
.ov-kpi[data-tone='bad'] .ov-kpi-value {
  color: var(--danger);
}
.ov-kpi[data-tone='bad']::after {
  background: var(--danger);
}

/* 统一待办 */
.ov-todo {
  margin: 0 0 18px;
}
.ov-todo-body {
  display: flex;
  flex-direction: column;
}
.ov-todo-body > * + * {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 4px;
}
.ov-todo-summary {
  display: flex;
  flex-direction: column;
}
.ov-todo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 0;
}
.ov-todo-row + .ov-todo-row {
  border-top: 1px dashed var(--line-soft);
}
.ov-todo-row-main {
  flex: 1 1 260px;
  min-width: 0;
}
.ov-todo-title {
  font-size: 13px;
  font-weight: 600;
}
.ov-todo-note {
  margin: 0;
  font-size: 12px;
  color: var(--slate);
}
.ov-todo-note[data-tone='error'] {
  color: var(--danger);
}
.ov-todo-count {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ov-todo-count[data-tone='error'] {
  color: var(--danger);
}
.ov-todo-summary[aria-busy='true'] .ov-todo-count {
  color: var(--slate);
}
.ov-todo-links {
  list-style: none;
  margin: 2px 0 0;
  padding: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ov-todo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ov-todo-link.is-error .ov-todo-link-btn {
  color: var(--danger);
}
.ov-todo-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  flex: 1 1 auto;
  min-width: 0;
}
.ov-todo-link-btn:hover {
  border-color: var(--pine);
  color: var(--pine);
}
.ov-todo-link-value {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  font-size: 12px;
}
.ov-todo-clear {
  margin: 0;
  font-size: 12px;
  color: var(--slate);
}

/* 拍摄异常待办 */
.ov-todo-group {
  padding: 8px 0;
}
.ov-todo-group + .ov-todo-group {
  border-top: 1px dashed var(--line-soft);
}
.ov-todo-group h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
}
.ov-todo-group-count {
  margin-left: 6px;
  font-size: 12px;
  color: var(--slate);
}
.ov-todo-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.ov-todo-item:last-child {
  border-bottom: 0;
}
.ov-todo-main {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 14px;
}
.ov-todo-meta {
  font-size: 12px;
  color: var(--slate);
}
.ov-todo-none {
  margin: 0;
  padding: 6px 0 2px;
  font-size: 12px;
  color: var(--slate);
}

/* 今日行程 */
.ov-grid {
  margin: 0;
}
.ov-grid-main {
  min-width: 0;
}

/* 经营概览响应式 */
@media (max-width: 1100px) {
  .ov-revenue {
    grid-template-columns: 1fr;
  }
  .ov-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 780px) {
  .ov-kpis {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .ov-todo-link-btn {
    width: 100%;
  }
}
/* ── 使用指引（新手引导）────────────────────────────────── */

.guide-done-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.guide-done-banner .btn {
  flex: 0 0 auto;
}

/* 横向步骤条 */
.guide-stepper-card {
  margin-bottom: 16px;
}
.guide-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.gs-step {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
}
/* 连接线：从圆点中心向左右延伸到相邻圆点 */
.gs-step::before,
.gs-step::after {
  content: '';
  position: absolute;
  top: 15px;
  height: 2px;
  background: var(--line);
}
.gs-step::before {
  left: 0;
  right: 50%;
  margin-right: 17px;
}
.gs-step::after {
  left: 50%;
  right: 0;
  margin-left: 17px;
}
.gs-step:first-child::before {
  display: none;
}
.gs-step:last-child::after {
  display: none;
}
.gs-step[data-state='done']::after,
.gs-step[data-state='done']::before,
.gs-step[data-state='current']::before {
  background: var(--pine);
}
.gs-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 14px;
  transition: all 0.2s;
}
.gs-title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.gs-sub {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--slate);
}
.gs-step[data-state='current'] .gs-dot {
  border-color: var(--ember);
  background: var(--ember);
  color: #fff;
}
.gs-step[data-state='current'] .gs-title {
  color: var(--ember);
}
.gs-step[data-state='done'] .gs-dot {
  border-color: var(--pine);
  background: var(--pine);
  color: #fff;
}
.gs-step[data-state='done'] .gs-title {
  color: var(--pine);
}
.gs-step[data-state='todo'] .gs-title {
  color: var(--slate);
}


/* tab */
.guide-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.guide-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.guide-tab:hover {
  border-color: #c7c4bc;
}
.guide-tab[aria-selected='true'] {
  border-color: var(--ember);
  box-shadow: 0 0 0 1px var(--ember);
}
.guide-tab-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--slate-soft);
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 13px;
}
.guide-tab[data-state='done'] .guide-tab-no {
  background: var(--pine);
  color: #fff;
}
.guide-tab[data-state='current'] .guide-tab-no {
  background: var(--ember);
  color: #fff;
}
.guide-tab-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.guide-tab-flag {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--slate);
}
.guide-tab[data-state='done'] .guide-tab-flag {
  color: var(--pine);
}
.guide-tab[data-state='current'] .guide-tab-flag {
  color: var(--ember);
}

/* 面板 */
.guide-panel .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.guide-notice {
  margin-bottom: 16px;
}
.guide-step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--pine-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}
.guide-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: gs;
}
.guide-step-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.guide-step-list li:last-child {
  border-bottom: 0;
}
.guide-step-list li b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ember-soft);
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
.guide-step-list li span {
  flex: 0 0 168px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.guide-step-list li em {
  flex: 1 1 auto;
  min-width: 0;
  font-style: normal;
  font-size: 13px;
  color: var(--slate);
}
.guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* 模拟订单卡片 */
.guide-order-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--slate-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}
.guide-order-card .goc-code {
  font-size: 14px;
  font-weight: 600;
}
.guide-order-card .goc-info {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--slate);
}
.guide-order-card .goc-amount {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* 订单流程步骤条 */
.guide-flow {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
}
.guide-flow li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.guide-flow li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(50% + 10px);
  right: calc(-50% + 10px);
  height: 1px;
  background: var(--line);
}
.guide-flow li[data-state='done']:not(:last-child)::after {
  background: var(--pine);
}
.gfm-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  position: relative;
  z-index: 1;
}
.guide-flow li[data-state='current'] .gfm-dot {
  border-color: var(--ember);
  background: var(--ember);
}
.guide-flow li[data-state='done'] .gfm-dot {
  border-color: var(--pine);
  background: var(--pine);
}
.gfm-label {
  font-size: 12px;
  color: var(--slate);
  white-space: nowrap;
}
.guide-flow li[data-state='current'] .gfm-label {
  color: var(--ember);
  font-weight: 600;
}
.guide-flow li[data-state='done'] .gfm-label {
  color: var(--pine);
}
.guide-flow-hint {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--slate);
}

/* 收益说明 */
.guide-earning {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 780px) {
  .gs-step {
    padding: 0 4px;
  }
  .gs-title {
    font-size: 12px;
  }
  .gs-sub {
    display: none;
  }
  .guide-tabs {
    grid-template-columns: 1fr;
  }
  .guide-step-list li {
    flex-wrap: wrap;
  }
  .guide-step-list li span {
    flex-basis: 100%;
  }
  .guide-flow .gfm-label {
    white-space: normal;
    text-align: center;
  }
}
/* ============================================================
   手机端信息密度（仅布局，不改纸底 / 赭橙配色）
   390 宽：两列运营指标、紧凑卡片、表格横滑
   ============================================================ */
@media (max-width: 780px) {
  .main {
    padding: 16px 14px 40px;
  }

  .topbar {
    min-height: 54px;
    padding: 8px 14px;
    gap: 10px;
  }

  .topbar h1 {
    font-size: 16px;
  }

  .ov-head {
    gap: 8px 12px;
    padding-bottom: 2px;
  }

  .ov-title {
    font-size: 21px;
  }

  .ov-sub {
    font-size: 12px;
  }

  .ov-date-label {
    margin-bottom: 2px;
    font-size: 10px;
  }

  .ov-date-value {
    font-size: 14px;
  }

  .ov-revenue {
    gap: 10px;
    margin: 12px 0 10px;
  }

  .ov-rev-main {
    gap: 4px;
    padding: 14px 16px;
  }

  .ov-rev-amount {
    font-size: 32px;
  }

  .ov-rev-note {
    font-size: 11px;
  }

  .ov-rev-trend {
    padding: 12px 14px 10px;
  }

  .ov-chart {
    height: 100px;
    gap: 6px;
  }

  .ov-chart-val,
  .ov-chart-day {
    font-size: 10px;
  }

  .ov-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  .ov-kpi {
    padding: 11px 12px 10px;
  }

  .ov-kpi-label {
    font-size: 10.5px;
    letter-spacing: .08em;
  }

  .ov-kpi-value {
    margin-top: 4px;
    font-size: 22px;
  }

  .ov-kpi-note {
    overflow: hidden;
    margin-top: 3px;
    font-size: 10.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .metric-card {
    padding: 12px 13px;
  }

  .metric-label {
    font-size: 11px;
  }

  .metric-value {
    font-size: 22px;
  }

  .metric-note {
    overflow: hidden;
    font-size: 10.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .page-head {
    gap: 8px;
    margin-bottom: 12px;
  }

  .page-title {
    font-size: 19px;
  }

  .page-sub {
    font-size: 12px;
  }

  .section-head {
    gap: 10px;
    margin: 18px 0 8px;
  }

  .card-head {
    padding: 11px 13px;
  }

  .card-body {
    padding: 13px;
  }

  .toolbar {
    gap: 8px;
    padding: 10px 12px;
  }

  .table-scroll {
    position: relative;
  }

  .table-scroll::before {
    content: "左右滑动查看完整表格";
    display: block;
    padding: 5px 12px;
    color: var(--slate);
    background: var(--card);
    border-bottom: 1px solid var(--line-soft);
    font-size: 9.5px;
    letter-spacing: .03em;
  }

  .table {
    min-width: 720px;
  }

  .table th {
    padding: 8px 9px;
    font-size: 10.5px;
  }

  .table td {
    padding: 8px 9px;
  }

  .ov-todo-body > * + * {
    margin-top: 2px;
    padding-top: 2px;
  }
}

@media (max-width: 380px) {
  .ov-kpis,
  .metric-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .auth {
    padding: 24px 16px 32px;
  }

  .auth-card,
  .auth-login-card {
    max-width: 420px;
  }

  .login-body {
    grid-template-columns: 1fr;
  }

  .login-main {
    padding-right: 0;
  }

  .login-aside {
    display: none;
  }

  .auth-brand {
    margin-bottom: 20px;
  }

  .login-tabs {
    margin-bottom: 20px;
  }
}

/* ============================================================
   手机端全页面适配层（2026-11-09）
   覆盖：经营概览 / 档期 / 订单 / 接单 / 交付 / 作品集 / 团队 /
        商品 / 租赁 / 营地 / 结算 / 客服 / 使用指引 / 账户设置
   ============================================================ */
@media (max-width: 780px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  .topbar {
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .main {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .search {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  .toolbar {
    gap: 8px;
  }

  .toolbar .spacer {
    display: none;
  }

  .toolbar .btn {
    min-height: 34px;
  }

  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }

  .ov-kpis,
  .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

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

  /* 弹窗改为手机全屏，底部留安全区 */
  .dialog,
  .dialog-narrow,
  .dialog-wide {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    inset: 0;
  }

  .dialog[open] {
    display: flex;
    flex-direction: column;
  }

  .dialog-head {
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .dialog-body {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .dialog-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .toasts {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  .ov-kpis,
  .metric-row,
  .pf-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}



/* ── 统一主站 LOGO ─────────────────────────────────────── */
.brand img { width: 22px; height: 22px; object-fit: contain; display: block; border-radius: 0; }
.auth-brand .brand-logo,
.auth-brand img { width: 28px; height: 28px; object-fit: contain; display: block; border-radius: 0; }

/* 列表行可点击查看详情 */
table tbody tr { cursor: pointer; }

/* ============================================================
   夜间模式 —— 对齐主页「元时光科技」沉浸式黑金蓝紫视觉
   背景光晕 / 网格纹理 / 玻璃卡片 / 品牌橙蓝均与主页一致
   ============================================================ */
html[data-theme='dark'] {
  color-scheme: dark;

  /* 颜色令牌：精确对齐主页 site-redesign.css */
  --paper: #05070b;
  --card: #151923;
  --ink: #f7fbff;
  --slate: #b7c3d8;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --pine: #1292ff;
  --ember: #ff850f;
  --danger: #ff6b5e;
  --info: #4dd8ff;

  --pine-soft: rgba(18, 146, 255, 0.14);
  --ember-soft: rgba(255, 133, 15, 0.14);
  --slate-soft: rgba(255, 255, 255, 0.06);
  --danger-soft: rgba(255, 107, 94, 0.14);
  --info-soft: rgba(77, 216, 255, 0.14);

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* 页面背景：与主页子页面暗色主题完全一致（新疆科技风背景图 + 深色遮罩） */
html[data-theme='dark'] body {
  background-color: #050607;
  background-image:
    linear-gradient(180deg, rgba(5, 6, 7, 0.1) 0%, rgba(5, 6, 7, 0.56) 52%, rgba(5, 6, 7, 0.9) 100%),
    url('assets/hero-xinjiang-tech-replica.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 侧栏与顶栏：半透明深色 + 毛玻璃，对齐主页导航栏 */
html[data-theme='dark'] .sidebar {
  background: rgba(5, 7, 11, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme='dark'] .topbar {
  background: rgba(5, 7, 11, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 卡片与指标卡：玻璃拟态，对齐主页 panel-dark（透出背景图） */
html[data-theme='dark'] .card,
html[data-theme='dark'] .metric-card {
  background: linear-gradient(145deg, rgba(23, 28, 41, 0.5), rgba(15, 19, 28, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* 弹窗：深色玻璃 + 深遮罩 */
html[data-theme='dark'] .dialog {
  background: linear-gradient(145deg, #171c28, #10141d);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-theme='dark'] .dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
html[data-theme='dark'] .scrim {
  background: rgba(0, 0, 0, 0.5);
}

/* 内嵌浅灰面板改深色 */
html[data-theme='dark'] .time-set,
html[data-theme='dark'] .form-group,
html[data-theme='dark'] .rental-flow-wrap,
html[data-theme='dark'] .pt-flow-wrap {
  background: rgba(255, 255, 255, 0.04);
}

/* 表格 hover */
html[data-theme='dark'] .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* 骨架屏 shimmer */
html[data-theme='dark'] .bar {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 75%);
  background-size: 200% 100%;
}

/* 输入框 / 引导 tab 悬停边框 */
html[data-theme='dark'] input:hover,
html[data-theme='dark'] select:hover,
html[data-theme='dark'] textarea:hover,
html[data-theme='dark'] .guide-tab:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

/* 校验错误背景 */
html[data-theme='dark'] input[aria-invalid='true'],
html[data-theme='dark'] textarea[aria-invalid='true'] {
  background: rgba(255, 107, 94, 0.1);
}

/* 主按钮：品牌橙 + 白字，hover 提亮对齐主页 --brand-orange-2 */
html[data-theme='dark'] .btn-primary {
  color: #fff;
}
html[data-theme='dark'] .btn-primary:hover {
  background: #ff9f2f;
  border-color: #ff9f2f;
  color: #fff;
}

/* 危险按钮 */
html[data-theme='dark'] .btn-danger {
  color: #fff;
}
html[data-theme='dark'] .btn-danger:hover {
  background: #e05549;
  border-color: #e05549;
  color: #fff;
}

/* 档期状态块 hover（松绿 / 赭橙 / 置灰 → 对应深色软底） */
html[data-theme='dark'] .slot-booked:hover {
  background: rgba(18, 146, 255, 0.18);
}
html[data-theme='dark'] .slot-pending:hover {
  background: rgba(255, 133, 15, 0.18);
}
html[data-theme='dark'] .slot-done:hover {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme='dark'] .slot-past,
html[data-theme='dark'] .slot-closed {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 6px, rgba(255, 255, 255, 0.06) 6px 12px);
  color: #5f6b7d;
}

/* 待办任务卡 hover */
html[data-theme='dark'] .task-card:hover {
  background: rgba(18, 146, 255, 0.18);
}
html[data-theme='dark'] .task-card[data-status='pending']:hover {
  background: rgba(255, 133, 15, 0.18);
}

/* 彩色软块（thumb tone）对齐主页亮彩 + 深软底 */
html[data-theme='dark'] .thumb[data-tone='tone-3'] {
  color: #b8a4e8;
  background: rgba(124, 77, 255, 0.16);
}
html[data-theme='dark'] .thumb[data-tone='tone-4'] {
  color: #7fd4e8;
  background: rgba(77, 216, 255, 0.14);
}
html[data-theme='dark'] .thumb[data-tone='tone-5'] {
  color: #ffd9a8;
  background: rgba(255, 159, 47, 0.14);
}

/* 作品集素材格（空态白底改深色） */
html[data-theme='dark'] .pf-media-item {
  background: #141923;
}

/* 主题切换按钮：左右胶囊滑块 -------------------------------------------------- */
.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.theme-track {
  position: relative;
  width: 56px;
  height: 28px;
  border-radius: 999px;
  background: var(--slate-soft);
  border: 1px solid var(--line);
  transition: background 0.2s, border-color 0.2s;
}
.theme-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s;
}
.theme-icon {
  width: 12px;
  height: 12px;
  transition: color 0.2s;
}
.theme-icon-sun {
  color: var(--ember);
}
.theme-icon-moon {
  display: none;
  color: #fff;
}
.theme-toggle:hover .theme-track {
  border-color: var(--ember);
}
html[data-theme='dark'] .theme-track {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme='dark'] .theme-thumb {
  transform: translate(28px, -50%);
  background: var(--ember);
}
html[data-theme='dark'] .theme-icon-sun {
  display: none;
}
html[data-theme='dark'] .theme-icon-moon {
  display: block;
}

/* 夜间模式隐藏滚动条（保留滚动功能） */
html[data-theme='dark'] * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html[data-theme='dark'] *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}