:root {
  /* junext.bio palette */
  --ink: #1a1a1a;
  --muted: #807179;
  --green: #60375f;       /* brand plum (legacy token name) */
  --green-deep: #470037;  /* deep plum */
  --accent: #807179;      /* mauve CTA */
  --magenta: #9c0079;
  --line: #e0d8dc;
  --cream: #efe8ed;
  --paper: #f9f7f8;
  --card: #ffffff;
  --warn: #8a5a12;
  --warn-bg: #f7ecd7;
  --side: #3d2440;
  --side-text: #e0d8dc;
  --radius: 12px;
  --font: "Noto Sans SC", "Open Sans", system-ui, sans-serif;
  --display: "Fraunces", "Noto Sans SC", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
}
.auth-shell {
  background:
    radial-gradient(900px 420px at 80% 0%, #efe8ed 0%, transparent 55%),
    radial-gradient(700px 360px at 10% 100%, #e8dfe8 0%, transparent 50%),
    var(--paper);
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell {
  display: grid;
  grid-template-columns: 148px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: linear-gradient(180deg, #60375f 0%, var(--side) 100%);
  color: var(--side-text);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.brand {
  font-family: var(--display);
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  padding: 2px 8px 8px;
}
.brand span { color: #c9a8c4; }
.side-nav {
  display: grid;
  gap: 10px;
  flex: 1;
  align-content: start;
}
.nav-group {
  display: grid;
  gap: 2px;
}
.nav-group-label,
.nav-sub-label {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.nav-group-label {
  padding: 2px 8px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255,255,255,0.42);
}
.nav-group-label::after {
  content: " ▾";
  font-size: 0.72em;
  opacity: 0.7;
}
.nav-group.fold:not(.is-open) > .nav-group-label::after { content: " ▸"; }
.nav-group.fold:not(.is-open) > .nav-group-body { display: none; }
.nav-group-body { display: grid; gap: 2px; }
.nav-sub.fold:not(.is-open) > .nav-sub-body { display: none; }
.nav-sub-body { display: grid; gap: 2px; }
.nav-sub-label {
  padding: 6px 8px 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
}
.nav-sub-label::after { content: " ▾"; font-size: 0.8em; opacity: 0.7; }
.nav-sub.fold:not(.is-open) > .nav-sub-label::after { content: " ▸"; }
.side-nav a {
  color: var(--side-text);
  text-decoration: none;
  padding: 7px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
}
.side-nav a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.side-nav a.on {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.nav-sub {
  display: grid;
  gap: 2px;
  margin-top: 2px;
}
.nav-sub-label {
  padding: 6px 8px 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
}
.nav-sub-label.on { color: #fff; }
.nav-sub-link {
  padding-left: 16px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.78) !important;
}
.nav-sub-link.on {
  color: #fff !important;
}
.side-foot { margin-top: auto; display: grid; gap: 4px; padding-top: 8px; }
.user-chip {
  font-size: 0.68rem;
  opacity: 0.65;
  word-break: break-all;
  padding: 0 6px;
}
.side-logout {
  width: 100%;
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  padding: 6px 8px;
  font-size: 0.8rem;
}
.side-logout:hover { background: rgba(255,255,255,0.08); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.stat em {
  font-style: normal;
  font-family: var(--display);
  font-size: 1.6rem;
  display: block;
}
.stat span { color: var(--muted); font-size: 0.85rem; }

.who-card {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #f3eef3;
  border-radius: 10px;
  display: grid;
  gap: 4px;
}
.mail-route {
  display: grid;
  gap: 2px;
  font-size: 0.82rem;
  margin-top: 4px;
}
.mail-route .k {
  display: inline-block;
  min-width: 36px;
  color: var(--muted);
  font-weight: 600;
}
.mail-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.mail-compose .compose-meta {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mail-compose .compose-meta .k {
  color: var(--muted);
  font-size: 0.8rem;
  margin-right: 8px;
}
.ai-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #f3eef3;
  border-radius: 10px;
}
.tiny { font-size: 0.8rem; }

.hint-banner {
  background: #f3eef3;
  border: 1px solid #e0d8dc;
  color: var(--green-deep);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  margin: 0 0 16px;
}
.hint-banner.err { background: #f8eaea; border-color: #e2b6b6; color: #8b2e2e; }
.panel-help { margin: -4px 0 12px; color: var(--muted); font-size: 0.88rem; }
.brief-inline {
  margin-top: 6px;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brief-hero .brief-big, .next-step .brief-big, .brief-big {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 10px;
}
.brief-card {
  margin: 8px 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
  min-height: 2.8em;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.person-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}
.person-card:hover { border-color: #c9a8c4; box-shadow: 0 8px 24px rgba(96,55,95,0.08); text-decoration: none; }
.person-top { display: grid; gap: 2px; margin-bottom: 6px; }
.person-meta { font-size: 0.82rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.mini-chip {
  background: #f3eef3;
  color: var(--green-deep);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.75rem;
  font-weight: 600;
}
.steps { margin: 0; padding-left: 18px; line-height: 1.7; }
.inline-form { display: inline; margin-top: 6px; }
.check-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  grid-template-columns: none !important;
}
.check-row input { width: auto; }
.check-row span { color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .stat-row, .card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .stat-row, .card-grid { grid-template-columns: 1fr; }
}

.side-logout:hover { background: rgba(255,255,255,0.08); }

.workspace {
  min-width: 0;
  background:
    radial-gradient(900px 420px at 100% 0%, #efe8ed 0%, transparent 50%),
    radial-gradient(800px 380px at 0% 0%, #e8dfe8 0%, transparent 45%),
    var(--paper);
}
.stat-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .stat-row.three { grid-template-columns: 1fr; }
}
.stat.linkish {
  color: inherit;
  text-decoration: none;
  display: block;
}
.stat.linkish:hover { border-color: #c9a8c4; text-decoration: none; }
.task-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}
.task-main {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  flex: 1;
}
.task-main:hover { text-decoration: none; }
.suggest.strip {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #f3eef3;
  border-radius: 10px;
  line-height: 1.45;
}
.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 8px 0 0;
  font-size: 0.9rem;
}
.mail-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn.disabled, span.btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.follow-bar.bottom {
  position: fixed;
  left: 112px;
  right: 0;
  bottom: 0;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  box-shadow: 0 -6px 20px rgba(96,55,95,0.08);
  z-index: 40;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 24px 88px; }
.auth-wrap { max-width: 420px; margin: 10vh auto; padding: 20px; }

.page-head {
  display: flex; justify-content: space-between; gap: 16px;
  align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap;
}
h1 {
  font-family: var(--display);
  font-size: 1.85rem;
  margin: 4px 0 6px;
  letter-spacing: -0.02em;
}
.lede { color: var(--muted); margin: 0; }
.back { color: var(--muted); font-size: 0.9rem; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(96,55,95,0.04);
}
.panel h2 { font-size: 1rem; margin: 0 0 12px; }
.panel.warn { background: var(--warn-bg); border-color: #e2d0a8; }
.panel.warn h2 { color: var(--warn); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--cream); text-decoration: none; }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn.primary:hover { background: var(--green); border-color: var(--green); }

.login-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px;
  box-shadow: 0 20px 50px rgba(96,55,95,0.08);
}
.error { color: #8b2e2e; background: #f8eaea; padding: 8px 10px; border-radius: 8px; }

.stack { display: grid; gap: 12px; }
.stack.tight { gap: 8px; }
label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
input, select, textarea {
  font: inherit; color: var(--ink); font-weight: 400;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; background: #fff; width: 100%;
}
textarea { resize: vertical; }

.filters {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.filters input[type="search"] { flex: 1; min-width: 200px; }

.status-pills {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.status-pills a {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; color: var(--ink); background: #fff;
  text-decoration: none; font-size: 0.85rem;
}
.status-pills a em { font-style: normal; color: var(--muted); margin-left: 4px; }
.status-pills a.on { background: var(--green); color: #fff; border-color: var(--green); }
.status-pills a.on em { color: #e0d8dc; }

.table-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.75rem; color: var(--muted); background: #f3eef3; font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f9f5f8; }
tbody tr.static { cursor: default; }
.empty { text-align: center; color: var(--muted); cursor: default; }
.muted { color: var(--muted); font-weight: 400; font-size: 0.9em; }

.tag {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 0.78rem; font-weight: 600; background: #f3eef3; color: var(--ink);
}
.tag-new { background: #e8f0ff; color: #1f4b8f; }
.tag-need_reply { background: #fde8e8; color: #9b1c1c; }
.tag-waiting_customer { background: #f3eef3; color: #60375f; }
.tag-sample { background: #f3ebe0; color: #7a4e16; }
.tag-quote { background: #efe8f4; color: #60375f; }
.tag-won { background: #e8f3ea; color: #1f6b2f; }
.tag-shelved { background: #ececec; color: #555; }
.tag-queued { background: #e8f0ff; color: #1f4b8f; }
.tag-followup_2 { background: #f3ebe0; color: #7a4e16; }
.tag-followup_3 { background: #efe8f4; color: #60375f; }
.tag-replied { background: #e8f3ea; color: #1f6b2f; }

.stat.accent { border-color: #e2b6b6; background: #fff7f7; }
.hint-banner.err { background: #f8eaea; border-color: #e2b6b6; color: #8b2e2e; }

.grid-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.grid-form .full { grid-column: 1 / -1; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.two-col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.message { white-space: pre-wrap; margin: 0; line-height: 1.5; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.files li, .records li, .timeline li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.timeline { list-style: none; padding: 0; margin: 12px 0 0; }
.timeline time { display: block; font-size: 0.78rem; color: var(--muted); }
.timeline p { margin: 4px 0 0; white-space: pre-wrap; }
.doc-actions details {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.doc-actions summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.kv { display: grid; gap: 8px; }
.kv div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.kv dt, .kv .k { color: var(--muted); font-size: 0.85rem; }
.kv dd, .kv .v { margin: 0; }

.list-stack { display: grid; gap: 10px; }
.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(160px, 0.7fr);
  gap: 14px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}
.list-row:hover {
  border-color: #c9a8c4;
  box-shadow: 0 8px 24px rgba(96,55,95,0.08);
  text-decoration: none;
}
.list-who { display: grid; gap: 4px; min-width: 0; }
.list-who strong { font-size: 1.05rem; }
.list-brief {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-mid { display: grid; gap: 8px; }
.list-act { display: grid; gap: 8px; justify-items: start; }
.list-next { font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.section-kicker { font-size: 0.85rem; color: var(--green); margin: 0 0 8px; letter-spacing: 0.02em; }
.id-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.id-side { display: grid; gap: 8px; }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.action-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.btn.block { width: 100%; border-radius: 12px; }
.btn.ghost { background: #fff; color: var(--muted); border-style: dashed; }
.btn.tiny { padding: 2px 8px; font-size: 0.78rem; border-radius: 8px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.profile-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start;
}
.profile-kv .k { width: 72px; }
.profile-side { display: grid; gap: 10px; }
.suggest {
  margin: 0;
  padding: 10px 12px;
  background: #f3eef3;
  border-radius: 10px;
  line-height: 1.45;
}
.note-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.note-box h3 { margin: 0 0 8px; font-size: 0.95rem; }
.mail-meta { font-size: 0.78rem; color: var(--muted); }
.note-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.timeline.compact { margin-top: 8px; }
.mail-thread { display: grid; gap: 12px; margin-top: 14px; }
.mail-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}
.mail-item.in { border-left: 3px solid #60375f; }
.mail-item.out { border-left: 3px solid #807179; background: #f9f7f8; }
.mail-item.latest {
  background: #fff9ef;
  border-color: #e2c48a;
  border-left: 4px solid #c9852a;
  box-shadow: 0 8px 22px rgba(138, 90, 18, 0.08);
}
.mail-head { display: grid; gap: 4px; margin-bottom: 8px; }
.mail-badge {
  display: inline-block;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.mail-badge.in { background: #f3eef3; color: #60375f; }
.mail-badge.out { background: #efecec; color: #5c4f58; }
.mail-badge.hot {
  background: #f3d7a4;
  color: #7a4d0e;
}
.mail-subj { font-size: 0.98rem; }
.mail-excerpt {
  margin: 0 0 8px;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--ink);
  font-size: 0.92rem;
}
.mail-body {
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  line-height: 1.55;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
}
.mail-fold > summary {
  cursor: pointer;
  color: var(--green);
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;
}
.mail-fold > summary::-webkit-details-marker { display: none; }
.mail-fold[open] > summary { margin-bottom: 6px; }
.doc-tabs details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.doc-tabs summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.docs-lib-title { margin: 16px 0 8px; font-size: 1rem; }
.docs-lib li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.attach-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0;
}
.attach-box legend { padding: 0 6px; font-weight: 600; }
.attach-list { display: grid; gap: 8px; }
.attach-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.follow-bar {
  position: sticky;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  margin: 0 0 14px;
  background: rgba(249, 247, 248, 0.96);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.follow-bar.top { top: 8px; }
.follow-bar form { margin: 0; }
.profile-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.compact-head h1 { font-size: 1.55rem; }
.btn.danger {
  background: #fff;
  color: #9b1c1c;
  border-color: #e2b6b6;
}
.btn.danger:hover { background: #fde8e8; }
.batch-bar {
  position: sticky;
  top: 8px;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(249, 247, 248, 0.96);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.batch-check-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  margin-right: 6px;
}
.lead-table { display: grid; gap: 6px; overflow-x: auto; }
.lead-table-head,
.lead-table-row {
  display: grid;
  grid-template-columns: 28px 108px minmax(140px, 1.5fr) minmax(120px, 1fr) minmax(120px, 0.9fr) 48px;
  gap: 8px;
  align-items: start;
  min-width: 760px;
}
.lead-table.light .lead-table-head,
.lead-table.light .lead-table-row {
  grid-template-columns: 28px 100px minmax(140px, 1.5fr) minmax(120px, 1fr) minmax(130px, 0.95fr) 48px;
}
.lead-table-head {
  padding: 0 10px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-items: center;
}
.lead-table-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.lead-table-row.urgent {
  border-color: #e2b6b6;
  background: #fffafa;
}
.lead-table-row.starred {
  border-color: #e0c56e;
}
.lead-check {
  display: flex;
  padding-top: 6px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}
.lead-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  align-items: center;
  position: sticky;
  left: 36px;
  z-index: 2;
  background: inherit;
  padding-right: 4px;
  font-size: 0.82rem;
}
.lead-ops form { margin: 0; }
.ops-link {
  border: 0;
  background: transparent;
  color: var(--ink, #2a2420);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0 2px;
  font-size: inherit;
}
.ops-link:hover { color: #6b3f5a; }
.ops-sep { color: var(--muted); opacity: 0.6; }
.chip-view {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  background: #f6f3ef;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  max-width: 100%;
}
.chip-view:hover { border-color: var(--line); background: #fff; }
.chip-view.subject-chip {
  border-radius: 8px;
  font-weight: 500;
}
.chip-view.status-chip.tag {
  margin: 0;
}
.mail-subj {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-panel { display: none !important; margin-top: 4px; }
.lead-cell.editing > .chip-view { display: none; }
.lead-cell.editing > .edit-panel:not(.note-panel) { display: block !important; }
.lead-cell.editing-note > .note-panel { display: flex !important; }
.lead-cell.editing-note > .js-note-toggle { display: none; }
.lead-cell.act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.lead-cell.act .muted.tiny { width: 100%; }
.lead-cell.act .js-note-toggle {
  margin-left: auto;
}
.star-btn {
  border: 0;
  background: transparent;
  color: #b8a070;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.star-btn:hover { background: #f7f1df; }
.star-btn.on { color: #c89212; }
.star-inline { display: inline; margin: 0 6px 0 0; }
.star-form { margin: 0; flex-shrink: 0; }
.lead-cell {
  color: inherit;
  text-decoration: none;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lead-cell:hover { text-decoration: none; }
.lead-cell.who strong { font-size: 0.95rem; }
.lead-cell.mid { align-content: start; gap: 4px; }
.lead-cell.act { gap: 4px; }
.lead-cell.when { font-size: 0.8rem; text-align: right; padding-top: 6px; }
.lead-table .subj-line {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inline-name { margin: 0; }
.inline-name input {
  width: 100%;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 4px;
  border-radius: 6px;
}
.inline-name input:hover,
.inline-name input:focus {
  border-color: var(--line);
  background: #fff;
  outline: none;
}
.who-meta { display: block; margin: 0 4px; text-decoration: none; }
.who-meta:hover { text-decoration: underline; }
.list-brief {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #444;
}
.list-brief.clip {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-brief.muted { color: var(--muted); }
.list-brief a { color: inherit; }
.inline-subject select {
  max-width: 100%;
  text-overflow: ellipsis;
}
.inline-subject select,
.inline-status select {
  width: 100%;
  font-size: 0.82rem;
  padding: 4px 6px;
}
.lead-note-form {
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding-top: 2px;
  width: 100%;
}
.lead-note-form input {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  padding: 4px 8px;
}
.brief-dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  max-width: min(520px, 92vw);
  width: 100%;
  box-shadow: 0 18px 48px rgba(30, 24, 16, 0.18);
}
.brief-dialog::backdrop {
  background: rgba(28, 24, 20, 0.35);
}
.brief-dialog-inner {
  margin: 0;
  padding: 16px 18px 18px;
  display: grid;
  gap: 10px;
}
.brief-dialog-inner header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.brief-dialog-inner h2 {
  margin: 0;
  font-size: 1.15rem;
}
.bd-subj {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.9rem;
}
.bd-brief {
  margin: 0;
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 40vh;
  overflow: auto;
}
.brief-dialog-inner footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.contact-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  color: inherit;
}
.contact-row .list-who,
.contact-row .list-mid,
.contact-row .list-act {
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.contact-row.starred {
  border-color: #e0c56e;
}
.page-head h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.lead-title-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0 4px;
}
.lead-title-edit input[name="name"] {
  font-size: 1.35rem;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 6px;
  border-radius: 8px;
  min-width: 160px;
  max-width: 280px;
}
.lead-title-edit input[name="name"]:hover,
.lead-title-edit input[name="name"]:focus {
  border-color: var(--line);
  background: #fff;
  outline: none;
}
.lead-title-edit select {
  font-size: 0.9rem;
  padding: 4px 8px;
}
.lead-profile-form { margin-top: 8px; }
.profile-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.profile-edit-grid label {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.profile-edit-grid input,
.profile-edit-grid select,
.profile-edit-grid textarea {
  font-size: 0.9rem;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 100%;
}
.profile-edit-grid .span-2 { grid-column: 1 / -1; }
.profile-actions { margin-top: 12px; }
.sibling-leads {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sibling-leads h3 {
  font-size: 0.85rem;
  margin: 0 0 8px;
}
.sibling-leads ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.sibling-leads li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.88rem;
}
body.leads-page .leads-head {
  margin-bottom: 10px;
}
body.leads-page .leads-head h1 {
  font-size: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
body.leads-page .leads-head .count {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}
body.leads-page .lede { display: none; }
.leads-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 0 10px;
  align-items: center;
}
.leads-filter-bar input[type="search"] {
  flex: 1;
  min-width: 120px;
}
.leads-filter-bar select {
  min-width: 90px;
  flex-shrink: 0;
}
.leads-filter-bar .btn {
  flex-shrink: 0;
}
body.leads-page .leads-pills {
  margin: 0 0 10px;
}
body.leads-page .leads-batch {
  margin-bottom: 8px;
  padding: 8px 10px;
}

details.fold > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary { margin-bottom: 12px; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .brand { padding: 0 4px; font-size: 1rem; flex-shrink: 0; }
  .side-nav {
    display: flex;
    flex: 1;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: center;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .nav-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: center;
  }
  .nav-group-label,
  .nav-sub-label { display: none; }
  .nav-sub { display: contents; }
  .nav-group.fold:not(.is-open) > .nav-group-body,
  .nav-sub.fold:not(.is-open) > .nav-sub-body { display: flex !important; }
  .nav-group-body,
  .nav-sub-body {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .nav-sub-link { padding-left: 11px !important; }
  .side-nav a {
    padding: 10px 11px;
    font-size: 0.88rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .side-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
    width: auto;
    flex-shrink: 0;
  }
  .user-chip { display: none; }
  .side-logout { width: auto; padding: 8px 10px; font-size: 0.8rem; }
  .follow-bar.bottom { left: 0; }
  .grid-form, .two-col, .row3 { grid-template-columns: 1fr; }
  .stat-row.three { grid-template-columns: 1fr; }
  .wrap {
    padding: 14px 12px 88px;
    padding-bottom: max(88px, calc(24px + env(safe-area-inset-bottom)));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  h1 { font-size: 1.4rem; }
  .list-row, .id-grid, .action-grid, .action-grid.four, .profile-grid { grid-template-columns: 1fr; }
  .lead-table-head { display: none; }
  .lead-table-row,
  .lead-table.light .lead-table-row { grid-template-columns: 28px 1fr; min-width: 0; }
  .lead-ops, .lead-cell.mid, .lead-cell.act, .lead-cell.when, .lead-note-form { grid-column: 2; }
  .lead-check, .lead-ops { position: static; }
  .profile-edit-grid { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 36px 1fr; }
  .contact-row .list-mid, .contact-row .list-act { grid-column: 2; }
  .filters input[type="search"] { min-width: 0; width: 100%; }
  .kv div { grid-template-columns: 1fr; }
  .page-head { gap: 10px; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn,
  .page-head .actions form { flex: 1; }
  .page-head .actions .btn,
  .page-head .actions button { width: 100%; }
  input, select, textarea { font-size: 16px; } /* 避免 iOS 聚焦自动放大 */
  .btn { min-height: 44px; }
  .btn.tiny { min-height: 36px; padding: 6px 12px; }
  .auth-wrap {
    max-width: none;
    margin: 0;
    min-height: 100vh;
    display: grid;
    align-content: center;
    padding: 24px 16px;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .login-card { width: 100%; }
}

@media (max-width: 480px) {
  .mail-buckets { grid-template-columns: 1fr; }
  .mail-buckets { gap: 8px; }
  .stat-row { grid-template-columns: 1fr; }
  .compact-head h1 { font-size: 1.35rem; }
}

/* Mailbox — CRM triage */
.mail-buckets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.mail-bucket {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  text-decoration: none;
}
.mail-bucket:hover { border-color: var(--accent); text-decoration: none; }
.mail-bucket.on {
  border-color: var(--green);
  background: #f7f2f6;
  box-shadow: inset 0 0 0 1px var(--green);
}
.mail-bucket.warn { border-color: #d4b48a; background: var(--warn-bg); }
.mail-bucket strong { font-size: 0.95rem; }
.mail-bucket span { font-size: 0.85rem; color: var(--green); font-weight: 600; }
.mail-bucket em { font-style: normal; font-size: 0.75rem; color: var(--muted); }

.mail-panel { padding: 0; overflow: hidden; }
.mail-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #faf8f9;
  font-size: 0.88rem;
}
.mail-check-all { display: flex; align-items: center; gap: 8px; color: var(--muted); }

/* Customer fold groups */
.mail-groups { display: grid; }
.mail-group {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.mail-group:last-child { border-bottom: 0; }
.mail-group-head {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr auto;
  gap: 6px 14px;
  align-items: start;
  padding: 12px 16px 12px 36px;
  cursor: pointer;
  list-style: none;
  position: relative;
  border-left: 3px solid transparent;
}
.mail-group-head::-webkit-details-marker { display: none; }
.mail-group-head::before {
  content: "▸";
  position: absolute;
  left: 14px;
  top: 12px;
  color: var(--muted);
  font-size: 0.85rem;
  transition: transform 0.12s ease;
}
.mail-group[open] > .mail-group-head::before { transform: rotate(90deg); }
.mail-group.has-unread > .mail-group-head {
  background: #f7f2f6;
  border-left-color: var(--green);
}
.mail-group-head:hover { background: var(--cream); }
.mail-group-who {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mail-group-who b {
  font-size: 0.95rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-group.has-unread .mail-group-who b { color: var(--green); }
.mail-group-who small {
  color: var(--muted);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-group-latest {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mail-group-latest .mail-subject {
  font-size: 0.92rem;
}
.mail-group-latest .mail-snippet {
  grid-column: auto;
}
.mail-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.mail-unread-pill {
  background: #efe4ed;
  color: var(--green);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
}
.mail-count-pill {
  background: #f0ecef;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
}
.mail-group-body {
  border-top: 1px solid var(--line);
  background: #fcfbfc;
  padding: 0 0 8px;
}
.mail-group-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px 6px 36px;
}
.mail-list-nested { border-top: 1px solid var(--line); }
.mail-list-nested a {
  padding-left: 36px;
  background: transparent;
}
.mail-list-nested .unread a {
  background: #f7f2f6;
}
.mail-group-more {
  margin: 0;
  padding: 8px 16px 10px 36px;
  font-size: 0.82rem;
  color: var(--muted);
}

.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-list li {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}
.mail-list li.triage-row {
  grid-template-columns: 36px 1fr auto;
}
.mail-list li:last-child { border-bottom: 0; }
.mail-check {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 0 0 10px;
}
.mail-list a {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr auto;
  gap: 4px 14px;
  padding: 11px 16px;
  color: inherit;
  text-decoration: none;
  align-items: baseline;
  min-width: 0;
  border-left: 3px solid transparent;
}
.mail-list a:hover { background: var(--cream); text-decoration: none; }
.mail-list .unread a {
  background: #f7f2f6;
  border-left-color: var(--green);
}
.mail-list .unread .mail-subject { font-weight: 700; color: var(--green); }
.mail-peer {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--ink);
}
.mail-peer b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.mail-peer small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.75rem;
}
.mail-subject {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mail-snippet {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  max-width: 100%;
}
.mail-meta {
  text-align: right;
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  white-space: nowrap;
}
.mail-quick {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px 8px 0;
  min-width: 200px;
}
.mail-link-inline {
  display: flex;
  gap: 4px;
  align-items: center;
}
.mail-link-inline select {
  max-width: 140px;
  font-size: 0.8rem;
  padding: 4px 6px;
}
.mail-ai-panel {
  display: grid;
  gap: 12px;
}
.mail-ai-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.mail-ai-head h2 { margin: 0; font-size: 1.05rem; }
.mail-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mail-ai-result {
  display: grid;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.mail-ai-block h3 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  display: flex;
  gap: 8px;
  align-items: center;
}
.mail-ai-block summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
}
.mail-ai-trans {
  margin-top: 8px;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.mail-ai-asks {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
  white-space: pre-wrap;
  color: var(--ink);
}
.mail-ai-draft {
  padding: 10px 12px;
  border: 1px solid #9ec5a8;
  background: #f3faf5;
  border-radius: 10px;
  display: grid;
  gap: 8px;
}
.mail-ai-draft h3 {
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  gap: 8px;
  align-items: center;
}
.mail-ai-risks {
  background: #fff6e8;
  border: 1px solid #e2c48a;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
}
.mail-ai-risks ul { margin: 0; padding-left: 16px; }
.mail-ai-draft-body {
  max-height: 280px;
  overflow: auto;
  background: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin: 0;
}
.mail-ai-intent {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  gap: 8px;
}
.mail-ai-intent textarea {
  width: 100%;
  min-height: 56px;
}
.mail-ai-intent .btn { width: 100%; }

.mail-headers { display: grid; gap: 4px; margin-bottom: 14px; color: var(--muted); font-size: 0.9rem; }
.mail-headers-min {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 12px;
  font-size: 0.82rem;
}
.mail-headers-min .sep { color: var(--line); }

body.mail-read-wide .wrap {
  max-width: 1400px;
}
.mail-head-min .lede { display: none; }
.mail-head-min h1 {
  font-size: 1.15rem;
  line-height: 1.3;
}
.mail-workbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #d8cfe0;
  border-radius: 12px;
  background: linear-gradient(180deg, #faf7fb, #f3eef6);
}
.mail-workbar-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}
.mail-workbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mail-workbar-actions form {
  display: inline;
  margin: 0;
}
.mail-workbar .status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-workbar .status-chip.on {
  border-color: var(--green);
  background: #eef7f1;
}
.mail-workbar .status-chip.warn {
  border-color: #e2c48a;
  background: #fff6e8;
  color: #8a5a12;
}
.mail-workbar .status-chip.muted {
  color: var(--muted);
}
.mail-create-lead {
  margin: 0 0 8px;
}
.mail-create-lead .btn { width: 100%; }
.mail-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.mail-zone-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.mail-zone-label.sm { margin-bottom: 4px; }
.mail-zone-body {
  border-color: #d7dde8;
  background: #fff;
  box-shadow: inset 3px 0 0 #6b7c93;
}
.mail-zone-ai {
  border-color: #cbb8d8;
  background: #faf6fc;
  box-shadow: inset 3px 0 0 #7a4f9a;
}
.mail-zone-link {
  border-color: #c5d6c8;
  background: #f5faf6;
  box-shadow: inset 3px 0 0 #3f7a52;
}
.mail-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.95fr);
  gap: 16px;
  align-items: start;
}
.mail-split-content {
  min-width: 0;
}
.mail-split-side {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 28px);
  overflow: auto;
}
.mail-split-side h2 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}
.mail-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.lead-pick-list {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
  margin-top: 8px;
  padding: 2px;
}
.lead-pick {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.lead-pick:has(input:checked),
.lead-pick.suggested {
  border-color: var(--green);
  background: #f7f2f6;
}
.lead-pick b {
  display: block;
  font-size: 0.9rem;
}
.lead-pick small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2px;
}
#lead-q,
#contact-q {
  width: 100%;
}
.tmpl-stage {
  padding: 0;
  overflow: hidden;
  margin-bottom: 16px;
}
.tmpl-stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 0;
}
.tmpl-stage-help {
  margin: 8px 14px 10px;
}
.tmpl-fmts { display: flex; gap: 6px; flex-shrink: 0; }
.tmpl-stage iframe {
  display: block;
  width: 100%;
  height: min(70vh, 840px);
  border: 0;
  background: #f4f1f2;
  border-top: 1px solid var(--line);
}
.inv-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  cursor: pointer;
}
.inv-kind:has(input:checked) {
  border-color: var(--green);
  background: #f7f2f6;
}
.inv-kind input { margin: 0; }
.lead-email-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.lead-email-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}
.lead-email-chip:hover {
  border-color: var(--green);
  color: var(--green);
}
.mail-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  .mail-buckets { grid-template-columns: 1fr 1fr; }
  .mail-group-head,
  .mail-list a { grid-template-columns: 1fr auto; }
  .mail-group-who,
  .mail-peer { grid-column: 1 / -1; }
  .mail-group-meta,
  .mail-meta { grid-column: 2; grid-row: 2; }
  .mail-list li { grid-template-columns: 1fr; }
  .mail-list li.triage-row { grid-template-columns: 36px 1fr; }
  .mail-quick { padding: 0 16px 10px; grid-column: 1 / -1; min-width: 0; }
  .mail-link-inline select { max-width: none; flex: 1; }
  .mail-list-nested a { padding-left: 16px; }
  .mail-group-actions,
  .mail-group-more { padding-left: 16px; }

  /* 外出场景：底部拇指操作条 */
  body.has-mobile-dock .wrap {
    padding-bottom: max(108px, calc(84px + env(safe-area-inset-bottom)));
  }
  .mobile-dock {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(249, 247, 248, 0.97);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
    box-shadow: 0 -6px 24px rgba(26, 26, 26, 0.06);
  }
  .mobile-dock .dock-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 10px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-dock .dock-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    flex: 1.35;
  }
  .mobile-dock .dock-btn.ghost {
    background: transparent;
    color: var(--muted);
  }
  .mobile-dock form { flex: 1; display: flex; margin: 0; }
  .mobile-dock form .dock-btn { width: 100%; }

  /* 询盘页桌面 follow-bar 按钮太多，手机改用底部 dock */
  .follow-bar { display: none !important; }
  .mail-read-desktop-actions { display: none; }
  .mail-compose textarea[name="body"] { min-height: 42vh; }
  .invoice-advanced { margin-top: 4px; }
  .desk-only { display: none !important; }
  .mail-ai-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mail-ai-actions form { display: block !important; }
  .mail-ai-actions .btn { width: 100%; min-height: 44px; }
  .mail-split {
    grid-template-columns: 1fr;
  }
  .mail-split-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .mail-workbar {
    flex-direction: column;
    align-items: stretch;
  }
  .mail-workbar-actions {
    width: 100%;
  }
  .mail-workbar-actions .btn,
  .mail-workbar-actions form {
    flex: 1 1 calc(50% - 8px);
  }
  .mail-workbar-actions form .btn {
    width: 100%;
  }
  .tmpl-stage iframe { height: 62vh; }
  .status-pills { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .status-pills a { flex-shrink: 0; }
  .hint-banner .btn { min-height: 40px; margin: 4px 4px 0 0; }
  .task-list .btn.tiny { min-height: 40px; padding: 8px 14px; }
  .dash-head .actions { width: 100%; }
  .dash-head .actions .btn,
  .dash-head .actions form { flex: 1; min-width: 0; }
  .dash-head .actions .btn,
  .dash-head .actions button { width: 100%; min-height: 44px; }
  .task-row {
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
  }
  .task-row:last-child { border-bottom: none; }
  .task-reply {
    min-height: 44px;
    min-width: 88px;
    padding: 10px 16px;
    flex-shrink: 0;
  }
  .mobile-dock-lead .dock-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 6px;
    font-size: 0.82rem;
  }
  .mobile-dock-lead .dock-btn.primary { flex: 1.2; font-size: 0.9rem; }
  .ai-bar {
    display: grid;
    gap: 8px;
  }
  .ai-bar .btn { width: 100%; min-height: 44px; }
  .attach-item {
    padding: 10px 8px;
    min-height: 44px;
    align-items: center;
  }
  .mail-inbox-head .actions { width: 100%; }
  .mail-inbox-head .actions .btn,
  .mail-inbox-head .actions form { flex: 1; min-width: 0; }
  .mail-inbox-head .actions .btn,
  .mail-inbox-head .actions button { width: 100%; min-height: 44px; }
}

@media (min-width: 901px) {
  .mobile-dock { display: none !important; }
  .mobile-only { display: none !important; }
  details.invoice-advanced {
    border: none;
    padding: 0;
    margin: 0;
  }
  details.invoice-advanced > .invoice-advanced-body {
    margin-top: 0 !important;
  }
}

.social-copy {
  white-space: pre-wrap;
  font: inherit;
  margin: 0;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  border-radius: 10px;
  padding: 12px;
  max-height: 280px;
  overflow: auto;
}
.content-preview {
  max-height: 520px;
  overflow: auto;
  line-height: 1.6;
}
.content-preview h2 { font-size: 1.05rem; margin: 1.1em 0 0.4em; }
.content-preview h3 { font-size: 0.95rem; margin: 1em 0 0.35em; }
.content-preview p, .content-preview li { font-size: 0.92rem; }
.content-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 12px 0;
}
.content-preview th, .content-preview td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.setup-ol { padding-left: 1.2em; display: grid; gap: 8px; }
.setup-ol li { line-height: 1.5; }

.social-studio-form textarea { min-height: 72px; }
@media (max-width: 900px) {
  .social-studio-form .row3 { grid-template-columns: 1fr; }
}

/* —— 开发页：工具栏 + 内容栏 —— */
body.prospects-page .wrap { max-width: 1280px; }
.prospect-layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.prospect-tools {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding-bottom: 24px;
}
.prospect-main { min-width: 0; display: grid; gap: 0; }
.tight-panel { padding: 14px; }
.tight-panel h2 { margin-bottom: 8px; }
.panel-help { margin: 0 0 8px; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
}
.chip:hover, .chip.on {
  border-color: var(--accent);
  background: #f3eef3;
  color: var(--accent);
}
.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}
.check-line input { width: auto; }
.tpl-card { display: grid; gap: 8px; margin-top: 10px; }
.tpl-card.hidden { display: none; }
.tpl-card textarea { font-size: 0.8rem; line-height: 1.45; min-height: 220px; }
.tiny-list li { font-size: 0.8rem; color: var(--muted); border: 0; padding: 4px 0; }
.prospect-list { display: grid; gap: 8px; }
.prospect-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.prospect-card.saved-card { grid-template-columns: 1fr; }
.prospect-check { padding-top: 3px; }
.prospect-check input { width: auto; }
.prospect-body { display: grid; gap: 6px; min-width: 0; }
.prospect-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  justify-content: space-between;
}
.prospect-top strong { font-size: 0.98rem; }
.prospect-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: 0.85rem;
}
.prospect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.inline-status { margin: 0; }
.inline-status:not(.edit-panel) { display: inline-flex; }
.inline-status select,
select.status-jump {
  width: auto;
  min-width: 110px;
  padding: 6px 10px;
  font-size: 0.82rem;
}
@media (max-width: 960px) {
  .prospect-layout { grid-template-columns: 1fr; }
  .prospect-tools {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.taobao-form textarea { min-height: 96px; }
.tb-html {
  width: 100%;
  min-height: 140px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
}
.tb-frame {
  overflow: auto;
  max-height: min(72vh, 920px);
  background: #f4f2f5;
  border-radius: 0 0 10px 10px;
  padding: 0;
  text-align: center;
}
.tb-frame table { margin-left: auto; margin-right: auto; }
.tb-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 10px 0 18px;
}
.tb-thumbs a {
  display: grid;
  gap: 6px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.75rem;
}
.tb-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #f4f2f5;
}
.taobao-preview h2 { margin-bottom: 12px; }

.tb-steps {
  margin: 16px 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
  counter-reset: tbstep;
}
.tb-steps li {
  display: grid;
  gap: 6px;
  padding: 14px 16px 14px 52px;
  position: relative;
  background: var(--cream);
  border-radius: 12px;
  counter-increment: tbstep;
}
.tb-steps li::before {
  content: counter(tbstep);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #47183c;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.tb-steps li strong { font-size: 0.95rem; }
.tb-steps li span { color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.tb-copy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.tb-copy-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.tb-copy-card h3 { margin: 0; font-size: 0.92rem; }
.tb-copy-card .social-copy {
  max-height: 180px;
  background: #fff;
  margin-top: 8px;
  user-select: all;
}
.tb-copy-wide { grid-column: 1 / -1; }
.tb-thumbs-ops a {
  text-align: center;
  position: relative;
}
.tb-thumbs-ops strong { color: var(--ink); font-size: 0.82rem; }
.tb-slot-num {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #47183c;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
.tb-block-title {
  margin: 18px 0 10px;
  font-size: 1rem;
}
.tb-count { font-weight: 600; color: var(--muted); font-size: 0.82rem; }
.tb-count.warn { color: #8a5a12; }
.tb-html-src {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.tb-sticky { margin: 0 0 14px; z-index: 20; }
.tb-sticky-name {
  margin-right: 6px;
  color: var(--ink);
  font-size: 0.92rem;
}
.tb-warns { margin: 0 0 12px; }
.tb-warns summary { cursor: pointer; font-weight: 600; }
.tb-warns ul { margin: 8px 0 0; }
#tb-photos { scroll-margin-top: 72px; }
.tb-sticky .btn.copied,
.copy-btn.copied {
  background: #47183c;
  color: #fff;
  border-color: #47183c;
}
.tb-new > summary {
  cursor: pointer;
  list-style: none;
}
.tb-new > summary::-webkit-details-marker { display: none; }
.tb-new > summary h2 { margin: 0; }
.tb-new > summary .panel-help { margin: 4px 0 0; }
.tb-new[open] > summary { margin-bottom: 12px; }
.tb-sku-label {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 0.9rem;
}
.tb-sku-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.tb-sku-chip {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
  min-height: 64px;
}
.tb-sku-chip:hover { border-color: #47183c; }
.tb-sku-chip.on {
  border-color: #47183c;
  background: #efe8ed;
  box-shadow: inset 0 0 0 1px #47183c;
}
.tb-sku-chip strong { font-size: 0.92rem; }
.tb-sku-chip span { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.tb-refs { margin: 8px 0 0; }
.tb-refs summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; }
.tb-subhead { margin: 16px 0 8px; font-size: 0.92rem; }
.tb-screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.tb-screen-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.tb-screen-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #f4f2f5;
}
.tb-screen-card strong { font-size: 0.82rem; color: var(--ink); }
.tb-reason { color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
.tb-role-pick select {
  width: 100%;
  font-size: 0.82rem;
  padding: 4px 6px;
}
.tb-screen-card.role-replace {
  border-color: #c9a227;
  background: #fffaf0;
}
.tb-screen-card.role-skip { opacity: 0.72; }
.tb-callout {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4f2f5;
  border: 1px solid var(--line);
}
.tb-callout p { margin: 4px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink); }
.tb-plan-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.taobao-preview { position: relative; }
.tb-job-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tb-job-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
#tb-busy {
  position: fixed;
  inset: 0;
  background: rgba(28, 16, 30, 0.45);
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
#tb-busy[hidden] { display: none; }
.tb-busy-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  max-width: 420px;
  box-shadow: 0 18px 50px rgba(71, 24, 60, 0.2);
}
.tb-busy-card p { margin: 0; font-weight: 600; line-height: 1.5; }
@media (max-width: 900px) {
  .tb-copy-grid { grid-template-columns: 1fr; }
  .tb-pack-actions { width: 100%; }
  .tb-pack-actions .btn,
  .tb-pack-actions form { flex: 1; }
  .tb-pack-actions .btn,
  .tb-pack-actions button { width: 100%; }
  .tb-split { grid-template-columns: 1fr; }
  .tb-rail { position: static; max-height: none; }
}

.tb-page .wrap {
  max-width: none;
  width: 100%;
  padding: 12px 16px 32px;
}
.tb-split {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.tb-rail {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  display: grid;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 14px 18px;
}
.tb-rail-head h1 { margin: 0 0 6px; font-size: 1.15rem; }
.tb-current-name { margin: 0; font-weight: 700; line-height: 1.4; }
.tb-rail-block { display: grid; gap: 8px; }
.tb-rail-block h2 {
  margin: 8px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.tb-rail-hint { margin: 0; font-size: 0.8rem; line-height: 1.45; }
.tb-step-copy { margin: 0; font-size: 0.88rem; line-height: 1.55; }
.tb-rail-copies { display: grid; gap: 6px; }
.tb-rail .btn { width: 100%; justify-content: center; }
.tb-job-switch { display: grid; gap: 4px; }
.tb-job-switch a {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
}
.tb-job-switch a span { color: var(--muted); font-size: 0.75rem; }
.tb-job-switch a:hover { background: var(--cream); text-decoration: none; }
.tb-job-switch a.on {
  background: #efe8ed;
  border-color: #47183c;
}
.tb-stage { display: grid; gap: 14px; min-width: 0; }
.tb-empty { padding: 28px 24px; }
.tb-fold { margin: 10px 0; }
.tb-fold summary { cursor: pointer; font-weight: 600; }
.tb-role-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.tb-role-btns button {
  font-size: 0.72rem;
  padding: 5px 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
}
.tb-role-btns button.on {
  background: #47183c;
  color: #fff;
  border-color: #47183c;
}
.tb-new summary { cursor: pointer; font-weight: 600; }

/* Multi-platform content studio */
.studio-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.studio-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.studio-step-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ece7df;
  color: var(--ink);
  font-size: 0.78rem;
}
.studio-step.is-active {
  border-color: var(--green);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(47, 93, 74, 0.15);
}
.studio-step.is-active .studio-step-num,
.studio-step.is-done .studio-step-num {
  background: var(--green);
  color: #fff;
}
.studio-step.is-done { color: var(--ink); }

.studio-plat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.studio-plat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.studio-plat-pill input { width: auto; margin: 0; }
.studio-plat-pill:has(input:checked) {
  border-color: var(--green);
  background: #eef5f1;
  color: var(--green-deep);
}

.studio-drop {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  padding: 22px 16px;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(243,239,230,0.55));
  cursor: pointer;
}
.studio-drop input[type=file] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.studio-drop.is-drag {
  border-color: var(--green);
  background: #eef5f1;
}
.studio-drop strong { color: var(--ink); }

.studio-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}
.studio-thumb {
  display: grid;
  gap: 4px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.75rem;
}
.studio-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #f3efe6;
}
.studio-thumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-angle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.studio-angle + .studio-angle { margin-top: 8px; }
.studio-angle input { width: auto; margin-top: 3px; }
.studio-angle.is-checked {
  border-color: var(--green);
  background: #f3f8f5;
}
.studio-angle-body { min-width: 0; flex: 1; }
.studio-risks {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.88rem;
}

.studio-posts {
  display: grid;
  gap: 14px;
}
.studio-post-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.studio-post-card .social-copy { max-height: 360px; }

.studio-secondary > summary {
  cursor: pointer;
  font-size: 1rem;
  list-style: none;
}
.studio-secondary > summary::-webkit-details-marker { display: none; }
.studio-secondary > summary::before {
  content: "▸ ";
  color: var(--muted);
}
.studio-secondary[open] > summary::before { content: "▾ "; }

.studio-loading {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin: 12px 0;
  border-radius: 12px;
  background: #eef5f1;
  border: 1px solid #cfe0d6;
}
.studio-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cfe0d6;
  border-top-color: var(--green);
  animation: studio-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
@keyframes studio-spin { to { transform: rotate(360deg); } }

.studio-busy-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(28, 36, 33, 0.42);
}
.studio-busy-mask[hidden] { display: none; }
.studio-busy-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  max-width: 420px;
  box-shadow: 0 18px 50px rgba(28, 36, 33, 0.18);
  display: grid;
  justify-items: start;
  gap: 4px;
}
.studio-sticky-actions {
  position: sticky;
  bottom: 10px;
  padding: 10px 0 2px;
  background: linear-gradient(180deg, transparent, var(--paper) 35%);
}

@media (max-width: 760px) {
  .studio-steps { grid-template-columns: 1fr; }
  .studio-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tb-group-title {
  margin: 8px 0 12px;
  font-size: 1rem;
}
.tb-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.tb-catalog-card {
  display: grid;
  gap: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.tb-catalog-card:hover {
  border-color: #47183c;
  text-decoration: none;
}
.tb-catalog-card img,
.tb-catalog-ph {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #efe8ed;
}
.tb-catalog-ph {
  display: grid;
  place-items: center;
  color: #47183c;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tb-catalog-card strong { padding: 0 12px; line-height: 1.4; }
.tb-catalog-card span { padding: 0 12px; color: var(--muted); font-size: 0.78rem; }
.tb-chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.tb-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-style: normal;
  padding: 2px 8px;
  border-radius: 999px;
  background: #efe8ed;
  color: #47183c;
}
.tb-chip.ok { background: #e8f3ea; color: #1f6b32; }
.tb-chip.wait { background: #f4efe2; color: #8a5a12; }

.tb-detail-ref {
  display: grid;
  gap: 16px;
  align-items: start;
  margin: 12px 0;
}
.tb-detail-ref:has(figure) {
  grid-template-columns: 160px minmax(0, 1fr);
}
.tb-detail-ref figure { margin: 0; }
.tb-detail-ref img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.tb-detail-ref figcaption {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}
.tb-ref-form { display: grid; gap: 10px; max-width: 360px; }
.tb-detail-grid {
  margin: 14px 0;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
@media (max-width: 640px) {
  .tb-detail-ref:has(figure),
  .tb-detail-ref:has(.tb-ref-empty) { grid-template-columns: 1fr; }
}

.tb-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin: 0 0 14px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--line);
}
.tb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px 10px 0 0;
  background: #efe8ed;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.86rem;
  border: 1px solid transparent;
}
.tb-tab:hover { text-decoration: none; background: #e6dce3; }
.tb-tab.on {
  background: #fff;
  border-color: var(--line);
  border-bottom-color: #fff;
  font-weight: 600;
}
.tb-tab-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  padding: 0 2px;
}
.tb-tab-x:hover { color: var(--ink); }
.tb-fn,
.tb-prod {
  display: grid;
  gap: 2px;
}
.tb-fn a,
.tb-prod a,
.tb-fn-off {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
}
.tb-fn a:hover,
.tb-prod a:hover { background: var(--cream); text-decoration: none; }
.tb-fn a.on,
.tb-prod a.on {
  background: #efe8ed;
  font-weight: 600;
}
.tb-fn-off { color: var(--muted); }
.tb-fn-off span { font-size: 0.72rem; }
.tb-prod a em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
}
.tb-lib-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 8px 0 16px;
  padding: 10px 0 12px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
}
.tb-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}
.tb-upload-form label { margin: 0; }
.tb-card-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.tb-mini {
  font-size: 0.72rem;
  padding: 4px 8px;
  width: auto;
}
.tb-del { color: #8a3a3a; }
.tb-hero-card { display: grid; gap: 6px; position: relative; cursor: grab; }
.tb-hero-card.dragging { opacity: 0.55; cursor: grabbing; }
.tb-drag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-size: 0.72rem;
  letter-spacing: -0.08em;
  color: #fff;
  background: rgba(71, 24, 60, 0.72);
  border-radius: 6px;
  padding: 2px 6px;
  pointer-events: none;
}
.tb-poster-hint {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}
.tb-hero-card a { position: relative; display: grid; gap: 6px; text-align: center; text-decoration: none; color: var(--muted); font-size: 0.75rem; }
.tb-ref-empty {
  width: 160px;
  height: 160px;
  aspect-ratio: auto;
  border-radius: 12px;
  font-size: 0.82rem;
}
.tb-detail-ref:has(.tb-ref-empty) {
  grid-template-columns: 160px minmax(0, 1fr);
}
.tb-rail .tb-fn a,
.tb-rail .tb-prod a { width: auto; justify-content: start; }

.tb-catalog-card {
  position: relative;
}
.tb-catalog-card > a {
  display: grid;
  gap: 8px;
  padding: 0 0 14px;
  text-decoration: none;
  color: inherit;
}
.tb-catalog-card > a:hover { text-decoration: none; }
.tb-catalog-card .tb-job-del {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.tb-catalog-card .tb-job-del .tb-mini {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.tb-prod-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: start;
  border-radius: 10px;
}
.tb-prod-row.on { background: #efe8ed; }
.tb-prod-row .tb-job-del { margin-top: 4px; }
.tb-fn .tb-job-del { margin-top: 8px; }
.tb-fn .tb-job-del .tb-mini { width: 100%; }
.tb-preview-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.tb-preview-head h2 { margin: 0 0 4px; }
.tb-preview-shell {
  background: #2c1c2a;
  border-radius: 16px;
  padding: 10px 10px 14px;
}
.tb-preview-bar {
  color: #d4c6d2;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 4px 0 10px;
}
.tb-how {
  margin: 8px 0 14px;
  padding-left: 1.25em;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}
.tb-pick {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.78rem;
  margin: 0;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
}
.tb-retouch-row {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.tb-shot-lab {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}
.tb-shot {
  width: 100%;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
}
.tb-screen-card.tb-picked {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}




/* Equipment sales board */
.sales-week-stats { margin: 10px 0 14px; }
.stat.warn em { color: #a15b12; }
.sales-funnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}
.sales-funnel-step {
  background: #f7f3f0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}
.sales-funnel-step strong {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.sales-funnel-step em {
  font-style: normal;
  font-size: 1.35rem;
  font-weight: 700;
}
.sales-funnel-step span {
  font-size: 0.78rem;
  color: var(--muted);
}
.sales-source-row {
  margin-top: 4px;
}
.sales-source-row strong {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 6px;
  color: var(--muted);
}
.sales-break-rows {
  display: grid;
  gap: 10px;
}
.sales-break-rows strong {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 4px;
  color: var(--muted);
}
.sales-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sales-filters select,
.sales-filters input {
  min-width: 120px;
}
.sales-create-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.sales-board-wrap { overflow: hidden; }
.sales-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.sales-col {
  background: #f7f3f0;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.sales-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.sales-col-head span {
  color: var(--muted);
  font-size: 0.8rem;
}
.sales-col-body {
  padding: 8px;
  display: grid;
  gap: 8px;
  align-content: start;
  flex: 1;
}
.sales-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.sales-card.is-blocked {
  border-color: #e0b27a;
  box-shadow: inset 3px 0 0 #d4892a;
}
.sales-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.sales-amt {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}
.sales-meta,
.sales-blocker,
.sales-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}
.sales-blocker { color: #a15b12; }
.sales-stage-form select {
  width: 100%;
  font-size: 0.8rem;
}
.sales-edit-link {
  font-size: 0.78rem;
  font-weight: 600;
}
.mini-chip.accent {
  background: #e8f2ec;
  color: var(--green);
}
.muted-sm {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mini-chip {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: #efeae4;
  color: var(--muted);
}
.mini-chip.accent {
  background: #e8f2ec;
  color: var(--green);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
}
.sales-cust-table td,
.sales-cust-table th {
  vertical-align: top;
}
.sales-create-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .sales-board {
    grid-auto-columns: minmax(180px, 78vw);
  }
  .sales-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sales split: tools + sheet */
.sales-split {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.sales-tools {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 12px;
}
.sales-tool-card summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.sales-tool-card summary::-webkit-details-marker { display: none; }
.sales-tool-card summary::after {
  content: "▾";
  float: right;
  color: var(--muted);
  font-weight: 500;
}
.sales-tool-card:not([open]) summary::after { content: "▸"; }
.sales-tool-card[open] summary { margin-bottom: 10px; }
.sales-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}
.sales-mini-stats div {
  background: #f7f3f0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.sales-mini-stats em {
  display: block;
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 700;
}
.sales-mini-stats span {
  color: var(--muted);
  font-size: 0.75rem;
}
.sales-mini-stats .warn em { color: #a15b12; }
.sales-side-form label { display: grid; gap: 4px; font-size: 0.85rem; }
.sales-side-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.btn.block { width: 100%; justify-content: center; }
.stack.tight { gap: 8px; }
.sales-main-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}
.muted-sm { color: var(--muted); font-size: 0.8rem; }
.sheet-form-host { display: none; }
.sheet-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.sheet-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.sheet-table th,
.sheet-table td {
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.sheet-table th {
  position: sticky;
  top: 0;
  background: #f7f3f0;
  z-index: 1;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
}
.sheet-table input,
.sheet-table select {
  width: 100%;
  min-width: 88px;
  font: inherit;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 4px 6px;
}
.sheet-table input:focus,
.sheet-table select:focus {
  border-color: var(--green);
  background: #fff;
  outline: none;
}
.sheet-table .amt-input { min-width: 72px; max-width: 96px; }
.sheet-table .code-cell,
.sheet-table .date-cell {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.78rem;
}
.sheet-table tr.is-overdue {
  background: #fff7ec;
}
.sheet-table tr.is-overdue td:first-child {
  box-shadow: inset 3px 0 0 #d4892a;
}
.sales-side-form label { display: grid; gap: 4px; font-size: 0.85rem; }
.sales-side-form .check-row,
.sales-side-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.sales-main-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}
.panel-help { color: var(--muted); font-size: 0.9rem; }
.btn.tiny {
  padding: 4px 8px;
  font-size: 0.75rem;
  min-height: 0;
}
.btn.tiny.ghost {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}
.sales-funnel.compact {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (max-width: 980px) {
  .sales-split {
    grid-template-columns: 1fr;
  }
  .sales-tools { position: static; }
}

/* Dense sales UI */
body.sales-page .page-head.sales-head,
body.sales-page .page-head {
  margin-bottom: 10px;
  gap: 8px;
}
body.sales-page .page-head.sales-head .actions form {
  margin: 0;
}
body.sales-page .page-head .count {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}
body.sales-page .lede { display: none; }
body.sales-page .sales-split {
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 10px;
}
body.sales-page .sales-tools { gap: 8px; }
body.sales-page .panel {
  padding: 10px;
  margin: 0;
}
body.sales-page .sales-tool-card summary {
  font-size: 0.88rem;
  padding: 0;
}
body.sales-page .sales-mini-stats {
  margin: 0;
  gap: 6px;
}
body.sales-page .sales-mini-stats div {
  padding: 6px 8px;
}
body.sales-page .sales-mini-stats em {
  font-size: 1.05rem;
}
body.sales-page .sales-side-form {
  gap: 6px;
}
body.sales-page .sales-side-form input,
body.sales-page .sales-side-form select,
body.sales-page .sales-side-form textarea {
  width: 100%;
  font-size: 0.82rem;
  padding: 6px 8px;
}
body.sales-page .sales-side-form .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body.sales-page .sheet-table.dense th,
body.sales-page .sheet-table.dense td {
  padding: 4px 6px;
}
body.sales-page .sheet-table.dense input,
body.sales-page .sheet-table.dense select {
  min-width: 70px;
  padding: 2px 4px;
  font-size: 0.8rem;
}
body.sales-page .sheet-table.dense .amt-input { min-width: 64px; max-width: 84px; }
body.sales-page .hint-banner.compact { margin: 0 0 8px; padding: 6px 10px; font-size: 0.85rem; }
body.sales-page .empty-tip { margin: 12px 0; color: var(--muted); font-size: 0.9rem; }
body.sales-page .sales-main-head { display: none; }
body.sales-page .sales-filters {
  margin-bottom: 10px;
  align-items: center;
}
body.sales-page .sales-filters .check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
body.sales-page .row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
body.sales-page .sheet-table .code-cell a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
body.sales-page .sheet-table .code-cell a:hover { color: var(--green); }
body.sales-page .sales-detail-form {
  margin-top: 4px;
}
body.sales-page .sales-notes h2 {
  font-size: 1rem;
  margin: 0 0 8px;
}
body.sales-page .note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
body.sales-page .note-list li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
body.sales-page .note-list time {
  color: var(--muted);
  font-size: 0.75rem;
}
@media (max-width: 980px) {
  body.sales-page .sales-split { grid-template-columns: 1fr; }
}


/* Compact collapsible sales filters */
body.sales-page .sales-filter-bar {
  margin: 0 0 10px;
}
body.sales-page .sales-filter-main {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
body.sales-page .sales-filter-main input[type="search"] {
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 280px;
  padding: 5px 8px;
  font-size: 0.82rem;
}
body.sales-page .sales-filter-main select,
body.sales-page .sales-filter-extra select {
  padding: 4px 6px;
  font-size: 0.8rem;
  min-width: 0;
}
body.sales-page .btn.tiny {
  padding: 4px 10px;
  font-size: 0.8rem;
  min-height: 0;
}
body.sales-page .sales-filter-more {
  position: relative;
}
body.sales-page .sales-filter-more > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 4px 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  user-select: none;
}
body.sales-page .sales-filter-more > summary::-webkit-details-marker { display: none; }
body.sales-page .sales-filter-more[open] > summary {
  color: var(--ink);
  border-style: solid;
  background: #f7f3f0;
}
body.sales-page .sales-filter-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  width: 100%;
  flex-basis: 100%;
}
body.sales-page details.sales-filter-more {
  display: contents;
}
body.sales-page details.sales-filter-more > summary {
  display: inline-block;
}
body.sales-page .check-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}
body.sales-page .req-mark { color: #a33; font-weight: 700; }
body.sales-page label.is-required textarea,
body.sales-page label.is-required select {
  border-color: #c98989;
  background: #fff8f8;
}
body.sales-page .sales-ops-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
body.sales-page .sales-ops-line .pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border, #d8dde6);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  background: #fff;
}
body.sales-page .sales-ops-line .pill.on {
  border-color: #b45309;
  color: #9a3412;
  background: #fff7ed;
}
body.sales-page .sales-ops-line .pill.meeting.on {
  border-color: #1d4ed8;
  color: #1e3a8a;
  background: #eff6ff;
}
body.sales-page .sales-ops-line .pill:hover { border-color: var(--green, #2f6b4f); }
body.sales-page .cust-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--border, #c5ccd8);
}
body.sales-page .cust-link:hover { color: var(--green, #2f6b4f); }
body.sales-page .title-cell {
  min-width: 180px;
  vertical-align: top;
}
body.sales-page .title-cell input[name="title"] {
  width: 100%;
}
body.sales-page .sales-risk-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 3px 0;
  min-height: 0;
}
body.sales-page .sales-risk-line .tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 0.72rem;
  line-height: 1.4;
}
body.sales-page .sales-risk-line .tag.overdue {
  color: #9f1239;
  background: #ffe4e6;
}
body.sales-page .sales-risk-line .tag.close-week {
  color: #9a3412;
  background: #ffedd5;
}
body.sales-page .sales-risk-line .tag.close-risk {
  color: #7f1d1d;
  background: #fecaca;
}
body.sales-page .blocker-input {
  width: 100%;
  margin-top: 2px;
  font-size: 0.8rem;
  color: #9a3412;
  background: #fffaf5;
  border-color: #f0d2b0;
}
body.sales-page tr.is-blocked td:first-child,
body.sales-page tr.is-close-risk td:first-child {
  box-shadow: inset 3px 0 0 #d97706;
}
body.sales-page .sales-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  font-size: 0.85rem;
}
body.sales-page .quick-note-bar {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
body.sales-page .quick-note-bar input {
  flex: 1;
  min-width: 0;
}
body.sales-page .dup-warn {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #f0c36d;
  background: #fffbeb;
  font-size: 0.88rem;
}
body.sales-page .dup-warn ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.tb-ws {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.tb-ws a {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
}
.tb-ws a.on {
  background: #47183C;
  border-color: #47183C;
  color: #fff;
  font-weight: 600;
}
.tb-cover-grid,
.tb-flex-grid,
.tb-detail-split {
  display: grid;
  gap: 16px;
}
.tb-cover-grid { grid-template-columns: 1fr; }
.tb-cover-form {
  display: grid;
  grid-template-columns: 180px minmax(0, 420px);
  gap: 16px 24px;
  align-items: start;
}
.tb-cover-form > input[type="hidden"] { display: none; }
.tb-cover-preview,
.tb-cover-preview img,
.tb-cover-preview .tb-catalog-ph {
  width: 180px;
  height: 180px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: #F4F2F5;
}
.tb-cover-fields {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 420px;
  justify-items: start;
}
.tb-cover-fields input[type="text"] { width: 100%; max-width: 420px; }
.tb-cover-fields .btn { width: auto; justify-self: start; }
.tb-flex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-detail-split {
  grid-template-columns: minmax(240px, 32%) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1280px) {
  .tb-cover-form { grid-template-columns: 160px minmax(0, 420px); }
  .tb-cover-preview,
  .tb-cover-preview img,
  .tb-cover-preview .tb-catalog-ph { width: 160px; height: 160px; }
}
@media (max-width: 980px) {
  .tb-cover-form,
  .tb-detail-split,
  .tb-flex-grid { grid-template-columns: 1fr; }
}
.tb-cover-card,
.tb-flex-card,
.tb-mod-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.tb-flex-assign {
  width: 120px;
  height: 120px;
  padding: 0;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: #F4F2F5;
  cursor: pointer;
  overflow: hidden;
  justify-self: start;
}
.tb-flex-assign img,
.tb-flex-assign .tb-catalog-ph {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.tb-flex-card.tb-flex-ready .tb-flex-assign {
  border-style: solid;
  border-color: #47183C;
}
.tb-flex-lib { margin: 0 0 12px; }
.tb-mod-photos { min-width: 0; }
.tb-catalog-ghost { opacity: 0.78; }
.tb-pick-grid,
.tb-pick-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  max-width: 100%;
}
.tb-pick-cell {
  flex: 0 0 64px;
  width: 64px;
  border: 2px solid transparent;
  padding: 0;
  background: #F4F2F5;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.tb-pick-cell img { display: block; width: 64px; height: 64px; object-fit: cover; }
.tb-pick-cell.on { border-color: #47183C; }
.tb-check {
  display: flex !important;
  gap: 8px;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  width: auto;
  max-width: 100%;
}
.tb-page input[type="checkbox"],
.tb-page input[type="radio"],
.tb-check input {
  width: auto !important;
  height: auto;
  padding: 0;
  margin: 0;
  flex: none;
}
.tb-flex-card header,
.tb-mod-card header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.tb-mod-card header em { font-style: normal; color: var(--muted); font-size: 0.78rem; }
.tb-mod-list { display: grid; gap: 12px; }
.tb-mod-card.dragging { opacity: 0.55; }
.tb-add-mod { display: flex; gap: 8px; margin: 0 0 14px; }
.tb-add-mod select { flex: 1; }
.tb-detail-live { position: sticky; top: 12px; min-width: 0; }
.tb-detail-live .tb-preview-shell { max-width: 770px; }
.tb-detail-studio .tb-frame {
  max-height: min(78vh, 1100px);
  background: #fff;
}
.tb-frame > div {
  width: 100% !important;
  max-width: 750px !important;
  margin: 0 auto;
}
.tb-frame table {
  width: 100% !important;
  max-width: 750px !important;
}
.tb-frame img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.tb-html-fold { margin-top: 10px; }
.tb-html-fold summary { cursor: pointer; color: var(--muted); font-size: 0.82rem; }
.tb-flex-batch { margin: 0 0 12px; }
.tb-retouch-bay { max-width: 760px; }
.tb-flex-card .btn { width: 100%; }
.tb-flex-card textarea { min-height: 72px; width: 100%; }

/* Workshop / stock */
body.ops-page {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
body.ops-page .wrap {
  padding: 10px 12px 72px;
  max-width: 1180px;
}
body.ops-page h1 { font-size: 1.2rem; margin: 0; }
body.ops-page .page-head { margin-bottom: 8px; gap: 8px; }
body.ops-page .page-head h1 { margin: 0; }
body.ops-page button,
body.ops-page a,
body.ops-page .pill,
body.ops-page .ops-step-btn { touch-action: manipulation; }
body.ops-page .ops-sticky {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--paper);
  margin: 0 0 8px;
  padding: 0 0 6px;
}
body.ops-page .ops-tabs,
body.ops-page .ops-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
}
body.ops-page .ops-tabs { margin: 0; }
body.ops-page .ops-focus { margin: 6px 0 0; }
body.ops-page .ops-tabs .pill,
body.ops-page .ops-focus .pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  flex: 0 1 auto;
}
body.ops-page .ops-tabs .pill b {
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 0.85rem;
}
body.ops-page .ops-tabs .pill.has { border-color: var(--green); }
body.ops-page .ops-tabs .pill.on,
body.ops-page .ops-focus .pill.on {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
body.ops-page .ops-tabs .pill.on b { background: rgba(255,255,255,0.22); }
body.ops-page .ops-idle {
  margin: 0 0 8px;
  padding: 0;
  color: var(--muted);
  font-size: 0.9rem;
  background: none;
  border: 0;
  text-align: left;
  display: block;
}
body.ops-page .ops-idle a { font-weight: 650; }
body.ops-page .ops-empty {
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
body.ops-page .ops-h2 {
  font-size: 0.92rem;
  margin: 10px 0 6px;
}
body.ops-page .ops-actions { margin: 8px 0; }
body.ops-page .ops-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 8px;
  color: inherit;
  text-decoration: none;
}
body.ops-page .ops-card header {
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
body.ops-page .ops-card-go {
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  font-size: 0.95rem;
}
body.ops-page .ops-card-list { display: grid; gap: 6px; margin: 0 0 8px; }
body.ops-page .ops-buy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
body.ops-page .ops-buy-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}
body.ops-page .ops-buy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  margin: 0;
}
body.ops-page .ops-need { font-size: 0.95rem; }
body.ops-page .ops-po-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  margin: 0;
}
body.ops-page .ops-line,
body.ops-page .ops-line-card {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
body.ops-page .ops-line-card { margin: 0 0 6px; padding: 10px 12px; border-top: 0; }
body.ops-page .ops-card > .ops-line:first-of-type { border-top: 0; padding-top: 0; }
body.ops-page .ops-qty-label {
  display: grid;
  gap: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
}
body.ops-page .ops-qty-label input,
body.ops-page .ops-step input {
  min-height: 36px;
  min-width: 52px;
  width: 64px;
  font-size: 16px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
body.ops-page .ops-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.ops-page .ops-step-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
body.ops-page .ops-step-btn:active { background: var(--cream); }
body.ops-page .ops-ship-hint { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
body.ops-page .ops-filter {
  display: flex;
  gap: 6px;
  margin: 0;
  align-items: center;
}
body.ops-page .ops-filter input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  font-size: 16px;
}
body.ops-page .ops-count-hint { margin: 0 0 6px; color: var(--muted); font-size: 0.8rem; }
body.ops-page .ops-count-list {
  display: grid;
  gap: 4px;
}
body.ops-page .ops-count-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
}
body.ops-page .ops-count-card.is-low { box-shadow: inset 3px 0 0 var(--green); }
body.ops-page .ops-count-card.is-saved { border-color: var(--green); background: #f7f2f6; }
body.ops-page .ops-count-card form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}
body.ops-page .ops-count-name {
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ops-page .ops-count-fields {
  display: flex;
  margin: 0;
  align-items: center;
}
body.ops-page .ops-hero {
  margin: 0 0 8px;
  font-size: 1rem;
}
body.ops-page .ops-hero strong {
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}
body.ops-page .ops-quick {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
}
body.ops-page .ops-quick form {
  display: flex;
  gap: 6px;
  align-items: center;
}
body.ops-page .ops-quick .btn {
  min-height: 36px;
  min-width: 72px;
  font-size: 0.92rem;
}
body.ops-page .ops-shop { display: flex; gap: 8px; margin-top: 4px; font-size: 0.85rem; }
body.ops-page .ops-shop-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 16px;
}
body.ops-page .ops-shop-row .btn { min-height: 44px; }
body.ops-page .ops-more { margin: 6px 0 10px; }
body.ops-page .ops-more > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.88rem;
  min-height: 36px;
  display: flex;
  align-items: center;
}
body.ops-page .ops-more[open] > summary { margin-bottom: 10px; }
body.ops-page .ops-source-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
body.ops-page .ops-source-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
body.ops-page .ops-source-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
body.ops-page .ops-pref {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  background: #e7f3ea;
  color: #1f4e3d;
  font-size: 0.75rem;
}
body.ops-page .ops-source-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 12px;
}
body.ops-page .ops-source-add input {
  min-height: 36px;
  width: 110px;
  font-size: 16px;
}
body.ops-page .ops-admin { margin-top: 18px; }
body.ops-page .ops-import-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
body.ops-page .ops-adjust {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}
body.ops-page .ops-adjust input { min-height: 44px; font-size: 16px; }
body.ops-page .ops-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
body.ops-page .ops-product-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
}
body.ops-page .ops-product-card:hover { border-color: var(--green); }
body.ops-page .ops-product-card .code {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
}
body.ops-page .ops-plain-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 4px;
}
body.ops-page .ops-plain-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
body.ops-page .ops-move-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
body.ops-page .ops-move-list li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.9rem;
}
body.ops-page .ops-st {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #f3eee8;
  white-space: nowrap;
}
body.ops-page .ops-st.st-ordered { background: #e8f2ea; }
body.ops-page .ops-st.st-received { color: var(--muted); }
body.ops-page .inline-form { display: inline; margin-left: 8px; }
body.ops-page .ops-dock .dock-btn { font-size: 0.84rem; padding: 8px 4px; }
body.ops-page .ops-count-card.is-finished { border-color: #c9ddd0; }
body.ops-page .ops-cal-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
body.ops-page table.ops-cal {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}
body.ops-page .ops-cal th,
body.ops-page .ops-cal td {
  border-bottom: 1px solid var(--line);
  padding: 4px 4px;
  text-align: center;
  vertical-align: middle;
}
body.ops-page .ops-cal thead th { font-size: 0.75rem; color: var(--muted); font-weight: 650; }
body.ops-page .ops-cal tfoot td,
body.ops-page .ops-cal tfoot th { font-size: 0.8rem; font-weight: 650; padding: 6px 4px; }
body.ops-page .ops-cal .name {
  text-align: left;
  padding-left: 8px;
  min-width: 118px;
  max-width: 168px;
}
body.ops-page .ops-cal .name a {
  display: block;
  font-weight: 650;
  font-size: 0.88rem;
  text-decoration: none;
  color: inherit;
  white-space: normal;
  line-height: 1.25;
}
body.ops-page .ops-cal .name .tiny {
  display: block;
  font-weight: 400;
  margin-top: 1px;
}
body.ops-page .ops-cal .is-now { background: #f3f8f4; }
body.ops-page .ops-cal-cell input {
  width: 2.8rem;
  min-height: 36px;
  font-size: 16px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}
body.ops-page .ops-cal-cell input::-webkit-outer-spin-button,
body.ops-page .ops-cal-cell input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.ops-page .ops-cal-cell.is-saved input { border-color: var(--green); }
body.ops-page .ops-cal-ord {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
}
body.ops-page .ops-week-jobs { display: grid; gap: 4px; margin: 8px 0; }
body.ops-page .ops-week-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
body.ops-page .ops-week-job .btn { min-height: 32px; min-width: 64px; }
body.ops-page .ops-buy-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
  margin: 0 0 8px;
}
body.ops-page .ops-buy-add select {
  flex: 1 1 180px;
  min-height: 40px;
}
body.ops-page .ops-count-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 8px;
}
body.ops-page .ops-count-up {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
body.ops-page .ops-count-up input[type="file"] {
  max-width: 11rem;
  font-size: 0.78rem;
}
body.ops-page .ops-filter .ops-new {
  margin-left: 0;
  min-height: 36px;
  min-width: 36px;
  padding: 0 10px;
}
body.ops-page .ops-plain-list { gap: 4px; margin: 0 0 8px; }
body.ops-page .ops-plain-list li { min-height: 40px; padding: 8px 10px; }
body.ops-page .ops-produce-hero { margin-bottom: 14px; }
body.ops-page .ops-produce-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
body.ops-page .ops-produce-qty { text-align: right; color: var(--muted); font-size: 0.85rem; }
body.ops-page .ops-produce-qty b {
  display: block;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1.1;
}
body.ops-page .ops-produce-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.92rem;
}
body.ops-page .ops-produce-card.is-due { box-shadow: inset 3px 0 0 var(--green); }
body.ops-page .ops-produce-card.is-blocked { box-shadow: inset 3px 0 0 #c47a3a; }
body.ops-page .ops-short { color: #a14a12; font-size: 0.85rem; }
body.ops-page .ops-produce-job,
body.ops-page .ops-produce-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
body.ops-page .ops-produce-job .btn,
body.ops-page .ops-produce-queue .btn { min-height: 44px; min-width: 88px; }
body.ops-page button:disabled { opacity: 0.45; }

@media (max-width: 1100px) {
  body.ops-page.app-shell { grid-template-columns: 1fr; }
  body.ops-page .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  body.ops-page .side-nav,
  body.ops-page .nav-group:not(.ops-nav),
  body.ops-page .ops-nav { display: none !important; }
  body.ops-page .user-chip { display: none; }
  body.ops-page .ops-sticky {
    top: calc(44px + env(safe-area-inset-top, 0px));
    margin: 0 -12px 8px;
    padding: 6px 12px 6px;
    border-bottom: 1px solid var(--line);
  }
  body.ops-page.has-mobile-dock .wrap {
    padding: 8px 12px;
    padding-bottom: max(92px, calc(76px + env(safe-area-inset-bottom)));
  }
  body.ops-page .ops-quick {
    position: sticky;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    background: var(--paper);
    margin: 0 -12px 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(26, 26, 26, 0.06);
  }
  body.ops-page .ops-head { display: none; }
  body.ops-page input,
  body.ops-page select,
  body.ops-page textarea { font-size: 16px; }
  body.ops-page.has-mobile-dock .mobile-dock {
    display: flex !important;
    gap: 6px;
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  body.ops-page.has-mobile-dock .mobile-dock .dock-btn {
    min-height: 40px;
    padding: 8px 4px;
    font-size: 0.82rem;
    border-radius: 10px;
  }
}
@media (max-width: 420px) {
  body.ops-page .ops-shop-row { grid-template-columns: 1fr; }
}
@media (min-width: 700px) and (max-width: 1100px) {
  body.ops-page .ops-count-list,
  body.ops-page .ops-card-list,
  body.ops-page .ops-product-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.ops-page .ops-plain-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1101px) {
  body.ops-page .ops-count-list {
    grid-template-columns: 1fr 1fr;
  }
  body.ops-page .ops-tabs .pill,
  body.ops-page .ops-focus .pill { flex: 0 0 auto; }
}

body.ops-page .sheet-wrap { overflow-x: auto; margin: 8px 0 16px; }
body.ops-page .sheet-table.dense th,
body.ops-page .sheet-table.dense td {
  padding: 5px 6px;
  font-size: 0.82rem;
  white-space: nowrap;
}
body.ops-page .ops-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }

body.print-page .sidebar,
body.print-page .mobile-dock { display: none !important; }
body.print-page .workspace { margin: 0; }
body.print-page .wrap { max-width: 800px; padding: 16px; }
.print-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.print-sheet h1 { font-size: 1.2rem; margin: 0; }
.print-sheet h2 { font-size: 1.05rem; margin: 8px 0 12px; }
.print-lines { width: 100%; border-collapse: collapse; margin: 12px 0; }
.print-lines th, .print-lines td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; font-size: 0.9rem; }
.print-lines tfoot th { text-align: right; }
.sales-lines input { width: 100%; min-height: 36px; }
.sales-lines .amt, .sales-lines tfoot th { text-align: right; white-space: nowrap; }
.sales-lines tfoot th, .sales-lines #lines-total { font-variant-numeric: tabular-nums; }
.sales-mail { margin-top: 20px; }
.sales-mail h2 { margin: 0 0 8px; font-size: 1rem; }
.lede.compact { margin: 0 0 10px; font-size: 0.9rem; }
body.tb-maker-page.app-shell {
  grid-template-columns: 1fr;
}
body.tb-maker-page .sidebar {
  display: none;
}
body.tb-maker-page .wrap {
  max-width: none;
  width: 100%;
  padding: 0;
  min-height: 100vh;
}
body.tb-maker-page .workspace {
  overflow: hidden;
  height: 100vh;
}
.tb-maker-saved { margin: 16px 0 8px; }
.tb-maker-saved .tb-cover-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.tb-maker-saved .tb-cover-grid-wide {
  grid-template-columns: 1fr;
}
.tb-maker-saved img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: #F4F2F5;
}
.tb-page-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.tb-page-strip a { display: block; }
.tb-page-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #F4F2F5;
}
.tb-page-strip.detail img { aspect-ratio: 9 / 16; }