:root {
  color-scheme: light;
  --ink: #1d252c;
  --muted: #65727b;
  --line: #dfe5e8;
  --accent: #3370ff;
  --page: #f6f8f9;
  --surface: #fff;
  --subtle: #eef2f3;
}

body,
.user-shell { background: var(--page); }

.sidebar,
.content-card,
.metric,
.sync-card,
.user-top,
.ip-card,
.product-card,
.order-row,
.bottom-nav,
.new-group-dialog { background: var(--surface); }

.workspace,
.search { background: var(--subtle); }

.pin-login {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  min-width: 0;
  place-items: center;
  overflow-x: hidden;
  padding: 24px 22px;
  box-sizing: border-box;
  background: var(--page);
}

.pin-login > .login-panel {
  width: 100%;
  max-width: 420px;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
}

.login-brand { margin-bottom: 34px; color: var(--ink); font-size: 24px; font-weight: 800; }
.login-panel form { display: grid; width: 100%; min-width: 0; gap: 20px; box-sizing: border-box; }
.login-panel label { display: grid; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 700; }
.login-panel input:not([type="submit"]) { min-height: 48px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 0 13px; color: var(--ink); background: var(--surface); font-size: 14px; }
.login-panel input::placeholder { color: color-mix(in srgb, var(--muted) 82%, transparent); }
.cn-search-status:empty { display: none; }
.login-btn { width: 100%; max-width: 100%; min-width: 0; min-height: 48px; margin-top: 4px; appearance: none; box-sizing: border-box; font-size: 13px; }
.cn-picker-field { display: grid; width: 100%; min-width: 0; gap: 8px; box-sizing: border-box; }
.cn-picker-trigger { display: flex; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 0 13px; box-sizing: border-box; color: var(--muted); background: var(--surface); font-size: 14px; text-align: left; cursor: pointer; }
.cn-picker-trigger .has-value { color: var(--ink); }
.cn-picker-dialog { position: fixed; inset: 0; width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 40px)); max-height: min(620px, calc(100dvh - 40px)); overflow: hidden; margin: auto; border: 0; border-radius: 14px; padding: 0; color: var(--ink); background: var(--surface); box-shadow: 0 24px 80px #17212635; }
.cn-picker-dialog::backdrop { background: #17212666; backdrop-filter: blur(2px); }
/* ::backdrop 不继承页面变量，键盘模式使用明确颜色兼容 iOS 与 QQ WebView。 */
.cn-picker-dialog.has-keyboard::backdrop { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cn-picker-dialog > header { display: flex; height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 16px; }
.cn-picker-dialog h2 { margin: 0; font-size: 16px; }
.cn-picker-dialog header button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 8px; color: var(--muted); background: var(--subtle); font-size: 20px; cursor: pointer; }
.cn-picker-search { padding: 12px; border-bottom: 1px solid var(--line); }
.cn-picker-search input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; color: var(--ink); background: var(--subtle); font-size: 16px; outline: none; appearance: none; }
.cn-picker-search input::-webkit-search-cancel-button { display: none; }
.cn-picker-results { min-height: 0; overflow-y: auto; padding: 6px; }
.cn-picker-option { display: flex; width: 100%; min-height: 44px; align-items: center; border: 0; border-radius: 8px; padding: 0 12px; color: var(--ink); background: transparent; font-size: 13px; text-align: left; cursor: pointer; }
.cn-picker-option:hover, .cn-picker-option:focus-visible { background: var(--subtle); outline: none; }
.cn-picker-option.is-join { color: #3370ff; font-weight: 700; }
.cn-picker-status { min-height: 18px; padding: 0 18px 10px; color: var(--muted); font-size: 11px; }
.cn-picker-dialog[open] { display: grid; grid-template-rows: 58px auto minmax(0, 1fr) auto; }
.admin-user-link { align-self: center; }
.sequence-list { display: grid; gap: 14px; }
.sequence-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.sequence-card > header { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
.sequence-card > header > div:nth-child(2) { display: grid; flex: 1; gap: 3px; }
.sequence-card > header small { color: var(--muted); font-size: 10px; }
.sequence-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); }
.role-allocation { min-width: 0; padding: 13px; background: var(--surface); }
.role-allocation.selected { box-shadow: inset 3px 0 var(--accent); }
.role-allocation > div { display: flex; justify-content: space-between; gap: 8px; }
.role-allocation span,
.role-allocation small { color: var(--muted); font-size: 10px; }
.role-allocation small { display: block; margin-top: 7px; }
.order-lines { display: grid !important; gap: 7px !important; }
.order-lines > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 7px; border-top: 1px solid var(--line); }
.order-lines small { white-space: nowrap; }
.sync-issues { margin-top: 18px; }
.sync-issues td:last-child { max-width: 420px; color: var(--muted); white-space: normal; }
.project-sync { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.project-sync i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sync-ok { color: #258e72; }
.sync-pending { color: #9a6a24; }
.sync-error { color: #b84f45; }
.status.muted { color: var(--muted); background: var(--subtle); }

.primary,
.secondary,
.filter,
.chip,
.add-btn,
.ip-card,
.taxonomy-card,
.cart-pill {
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.user-shell .primary,
.user-shell .secondary,
.user-shell .filter,
.user-shell .chip,
.user-shell .add-btn { transition: none; }

.primary:active,
.secondary:active,
.filter:active,
.chip:active,
.add-btn:active,
.ip-card:active,
.taxonomy-card:active,
.cart-pill:active { transform: translateY(1px) scale(.985); }

.user-shell .primary:active,
.user-shell .secondary:active,
.user-shell .filter:active,
.user-shell .chip:active,
.user-shell .add-btn:active { transform: none; }

input:disabled,
button:disabled { cursor: not-allowed; opacity: .55; }

.admin-empty { margin: 0 24px 24px; text-align: center; }
.admin-empty span { max-width: 460px; font-size: 12px; }
.admin-empty .primary,
.admin-empty .secondary { margin-top: 4px; }

.pagination { display: flex; justify-content: flex-end; gap: 5px; padding: 16px 24px 22px; }
.pagination a,
.pagination .current,
.pagination .gap { min-width: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--muted); background: var(--surface); font-size: 11px; text-align: center; }
.pagination .current { border-color: var(--ink); color: var(--surface); background: var(--ink); }
.sidebar { width: 204px; padding: 24px 14px; }
.sidebar .brand { font-size: 17px; }
.admin-nav { margin-top: 28px; }
.ip-admin-main { max-width: 1260px; padding-top: 32px; }
.ip-admin-topbar { align-items: center; margin-bottom: 20px; }
.ip-admin-topbar h1 { margin: 0; font-size: 25px; }
.ip-admin-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); align-items: start; gap: 16px; }
.ip-create-panel,
.ip-list-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ip-create-panel { padding: 22px; }
.ip-create-panel h2,
.ip-list-head h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.ip-create-form { display: grid; gap: 16px; margin-top: 22px; }
.ip-create-field { display: grid; min-width: 0; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 700; }
.ip-create-field input { min-width: 0; width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--ink); background: var(--surface); font: inherit; font-weight: 500; }
.ip-create-field input::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.ip-create-submit { min-height: 42px; width: 100%; margin-top: 2px; }
.ip-list-panel { min-width: 0; overflow: hidden; }
.ip-list-head { display: flex; align-items: center; gap: 9px; min-height: 62px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.ip-count { display: inline-grid; min-width: 22px; height: 22px; place-items: center; border-radius: 11px; padding: 0 7px; color: var(--muted); background: var(--subtle); font-size: 10px; font-weight: 800; }
.ip-config-list { display: grid; }
.ip-config { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ip-config:last-child { border-bottom: 0; }
.ip-config-head { display: flex; align-items: center; gap: 12px; }
.ip-config-head .cover { flex: 0 0 42px; width: 42px; height: 42px; }
.ip-config-name { min-width: 0; flex: 1; }
.ip-config h3 { overflow: hidden; margin: 0 0 4px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ip-config-name > span { display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ip-config-head > .status { flex: 0 0 auto; }
.field-map { margin: 13px 0 0 54px; }
.field-map summary { width: max-content; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; list-style-position: inside; }
.field-map[open] summary { color: var(--ink); }
.field-map-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 13px; padding: 14px; border-radius: 10px; background: var(--subtle); }
.field-map-form label,
.field-map-field { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.field-map-form .secondary { align-self: end; min-height: 35px; padding: 7px 12px; }
.ip-empty { display: grid; min-height: 210px; place-items: center; color: var(--muted); font-size: 12px; }
.catalog-admin-main { max-width: 1260px; padding-top: 32px; }
.catalog-admin-topbar { justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 20px; }
.catalog-admin-topbar h1 { margin: 0; font-size: 25px; }
.catalog-count { display: inline-grid; min-width: 24px; height: 24px; place-items: center; border-radius: 12px; padding: 0 8px; color: var(--muted); background: var(--surface); font-size: 10px; font-weight: 800; }
.catalog-admin-layout { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.catalog-actions { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(440px, auto); gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.catalog-search,
.catalog-create { display: flex; min-width: 0; gap: 8px; }
.catalog-search input,
.catalog-create > input[type="text"] { min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; color: var(--ink); background: var(--surface); font-size: 11px; }
.catalog-search input { flex: 1; background: var(--subtle); }
.catalog-create > input[type="text"] { width: 170px; }
.catalog-search .secondary,
.catalog-create .primary { min-width: 62px; min-height: 40px; padding: 0 14px; }
.taxonomy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--line); }
.taxonomy-entry { display: flex; align-items: center; min-width: 0; min-height: 68px; gap: 11px; padding: 12px 14px; background: var(--surface); }
.taxonomy-cover { display: grid; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; place-items: center; border-radius: 9px; color: #8b4942; background: #f3c0b7; font-size: 13px; font-weight: 800; }
.taxonomy-cover img { width: 100%; height: 100%; object-fit: cover; }
.taxonomy-entry b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-empty { display: flex; min-height: 240px; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 12px; }

@media (max-width: 800px) {
  .admin-shell { display: block; }
  .sidebar { position: sticky; z-index: 5; top: 0; display: flex; width: 100%; height: auto; flex-direction: row; align-items: center; gap: 16px; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; }
  .sidebar .brand { flex: 0 0 auto; font-size: 14px; }
  .sidebar .brand-mark { width: 27px; height: 27px; font-size: 14px; }
  .admin-nav { display: flex !important; min-width: 0; flex: 1; gap: 3px !important; overflow-x: auto; margin: 0; }
  .admin-nav a { flex: 0 0 auto; padding: 8px 10px !important; font-size: 11px !important; }
  .pin-login { align-items: start; padding: max(64px, 10dvh) 20px 28px; }
  .pin-login > .login-panel { width: 100%; max-width: 420px; padding: 0; }
  .login-brand { margin-bottom: 11dvh; }
  .admin-user-link { display: none; }
  .ip-admin-main { padding-top: 22px; }
  .ip-admin-layout { grid-template-columns: 1fr; }
  .catalog-admin-main { padding-top: 22px; }
  .catalog-actions { grid-template-columns: 1fr; }
  .catalog-create > input[type="text"] { flex: 1; width: auto; }
  .field-map-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) and (max-height: 700px) {
  .pin-login { padding-top: 34px; }
  .login-brand { margin-bottom: 42px; }
  .login-panel form { gap: 14px; }
  .login-panel input:not([type="submit"]),
  .login-btn { min-height: 44px; }
}

@media (max-width: 480px) {
  .overview { grid-template-columns: 1fr; }
  .sync-card { grid-column: auto; }
  .new-group-dialog .form-grid,
  .filter-grid,
  .catalog-filters { grid-template-columns: 1fr; }
  .catalog-filters input { grid-column: auto; }
  .ip-grid { grid-template-columns: 1fr; }
  .field-map-form { grid-template-columns: 1fr; }
  .catalog-create { display: grid; grid-template-columns: 1fr auto; }
  .catalog-cover-input { min-width: 0; }
  .catalog-create .primary { grid-row: 1 / 3; grid-column: 2; }
  .taxonomy-grid { grid-template-columns: 1fr 1fr; }
  .ip-card:first-child { grid-column: auto; }
  .user-heading { align-items: flex-start; gap: 16px; }
  .user-heading h1 { font-size: 30px; }
  .cn-picker-dialog { inset: auto 0 var(--cn-picker-viewport-bottom, 0) 0; width: 100%; height: min(calc(var(--cn-picker-viewport-height, 100dvh) * .78), 620px); max-width: none; max-height: min(calc(var(--cn-picker-viewport-height, 100dvh) * .78), 620px); border-radius: 14px 14px 0 0; margin: 0; }
  .cn-picker-dialog.has-keyboard { inset: var(--cn-picker-viewport-top, 0) 0 auto 0; height: var(--cn-picker-viewport-height, 100dvh); max-height: var(--cn-picker-viewport-height, 100dvh); border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #edf1f2;
    --muted: #abb6bc;
    --line: #39454b;
    --accent: #6b94ff;
    --page: #172026;
    --surface: #202b31;
    --subtle: #29363c;
  }

  .sidebar nav a.active,
  .add-btn,
  .order-row.complete { background: #332928; }
  .primary { color: #172026; }
  .secondary,
  .filter,
  .chip,
  .catalog-picker button,
  .filter-select,
  .new-group-dialog input,
  .new-group-dialog textarea { color: var(--ink); background: var(--surface); }
  .filter.active,
  .chip.active,
  .cart-pill { color: #172026; background: #e5ecee; }
  .status.success,
  .done { color: #92d8c2; background: #1d3933; }
  .warning { color: #e8b77d; background: #3c3125; }
  .sync-ok { color: #92d8c2; }
  .sync-pending { color: #e8b77d; }
  .sync-error { color: #ef9c92; }
  .cn-picker-dialog.has-keyboard::backdrop { background: #202b31; }
}