:root {
  --ink: #1e2528;
  --muted: #667174;
  --line: #dbe3e2;
  --paper: #f7f4ee;
  --panel: #ffffff;
  --teal: #1f6f68;
  --teal-2: #2f8f83;
  --gold: #b58a3a;
  --rose: #9b3f50;
  --sky: #416788;
  --shadow: 0 18px 50px rgba(37, 48, 52, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(31, 111, 104, 0.08), transparent 34%),
    linear-gradient(225deg, rgba(181, 138, 58, 0.10), transparent 30%),
    var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  min-height: 100vh;
}

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

button {
  border: 0;
  cursor: pointer;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 256px;
  padding: 24px 18px;
  background: #16272a;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}

.brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.brand strong {
  display: block;
  font-size: 18px;
}

.brand span {
  display: block;
  margin-top: 2px;
  color: #aebfc0;
  font-size: 12px;
}

nav {
  display: grid;
  gap: 8px;
}

.nav {
  text-align: left;
  color: #d8e1e1;
  background: transparent;
  padding: 12px 14px;
  border-radius: 8px;
}

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

.side-note {
  margin-top: auto;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
}

.side-note span {
  font-weight: 700;
  color: #f2d391;
}

.side-note p {
  margin: 8px 0 0;
  color: #c7d4d4;
  font-size: 13px;
  line-height: 1.5;
}

.shell {
  margin-left: 256px;
  padding: 28px;
}

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

.eyebrow {
  color: var(--teal);
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

.top-actions {
  display: grid;
  grid-template-columns: 150px 260px 78px;
  gap: 10px;
}

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

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal-2);
  box-shadow: 0 0 0 3px rgba(47, 143, 131, 0.12);
}

#refresh-btn,
.primary,
.modal-head button {
  background: var(--teal);
  color: #fff;
  border-radius: 8px;
  padding: 11px 14px;
  font-weight: 700;
}

.primary:hover,
#refresh-btn:hover {
  background: #185852;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric,
.destination-card,
.panel-head,
.table-wrap,
.chat-card,
.reply-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(219, 227, 226, 0.9);
  box-shadow: var(--shadow);
  border-radius: 8px;
}

.metric {
  padding: 18px;
}

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

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
}

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

.destination-card {
  overflow: hidden;
}

.destination-image {
  position: relative;
  min-height: 156px;
  aspect-ratio: 16 / 8.2;
  background-position: center;
  background-size: cover;
}

.destination-image span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.90);
  color: #173438;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.card-body {
  padding: 18px;
}

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

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  background: #edf5f4;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.destination-card p {
  color: var(--muted);
  line-height: 1.55;
  min-height: 46px;
}

.progress {
  height: 9px;
  background: #edf0ee;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0;
}

.progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--gold));
}

.card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.card-stats div {
  background: #f5f7f5;
  border-radius: 8px;
  padding: 10px;
}

.card-stats span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.card-stats strong {
  display: block;
  margin-top: 3px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px;
  margin-bottom: 16px;
}

.panel-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

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

.scan-result {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #fff9e8;
  border: 1px solid #ead49d;
  border-radius: 8px;
  color: #4f4125;
  line-height: 1.6;
}

.scan-result strong {
  color: var(--teal);
}

.upload-note {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-radius: 8px;
  background: #eef4f3;
  color: var(--muted);
  line-height: 1.5;
}

.task-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.task-summary article {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(219, 227, 226, 0.9);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
}

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

.task-summary strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
}

.task-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.calendar-day {
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
}

.calendar-day.active {
  outline: 3px solid rgba(31, 111, 104, 0.18);
  border-color: var(--teal);
}

.calendar-day button {
  width: 100%;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.calendar-day b,
.calendar-day span,
.calendar-day small {
  display: block;
}

.calendar-day b {
  font-size: 16px;
}

.calendar-day span {
  margin-top: 8px;
  color: var(--teal);
  font-weight: 900;
}

.calendar-day small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.panel-block {
  margin-top: 18px;
}

.panel-head.compact {
  box-shadow: none;
  margin-bottom: 12px;
}

.gap-grid,
.intake-layout,
.asset-gallery {
  display: grid;
  gap: 14px;
}

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

.gap-card,
.wizard-card,
.pending-card,
.asset-card,
.detail-section,
.detail-grid article {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(219, 227, 226, 0.9);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.gap-card {
  padding: 16px;
}

.gap-card h3 {
  font-size: 18px;
}

.gap-card span {
  display: block;
  min-height: 42px;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.gap-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 14px;
}

.gap-stats b,
.gap-stats small {
  display: block;
  text-align: center;
}

.gap-stats b {
  font-size: 18px;
}

.gap-stats small {
  color: var(--muted);
  font-size: 11px;
}

.intake-layout {
  grid-template-columns: 360px minmax(0, 1fr);
}

.wizard-card,
.pending-card {
  padding: 18px;
}

.wizard-card p {
  color: var(--muted);
  line-height: 1.55;
}

.wizard-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.wizard-actions button,
.table-action {
  background: #eef4f3;
  color: var(--teal);
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.action-row .table-action {
  padding: 8px 10px;
  white-space: nowrap;
}

.table-action.danger {
  background: #fff0ed;
  color: #a63f2f;
}

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

.section-title span {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.pending-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pending-title-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.pending-list {
  display: grid;
  gap: 10px;
  max-height: 560px;
  overflow: auto;
}

.pending-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
}

.pending-item strong,
.pending-item span,
.pending-item small,
.pending-item em {
  display: block;
}

.pending-item span,
.pending-item small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.pending-item em {
  font-style: normal;
  font-weight: 800;
  color: var(--teal);
}

.mini-progress {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.mini-progress i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
}

.mini-progress::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  height: 8px;
  border-radius: 999px;
  background: #edf0ee;
}

.mini-progress i {
  grid-column: 1;
  grid-row: 1;
}

.mini-progress span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.table-thumb {
  width: 72px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.asset-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}

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

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: #e9efed;
}

.segmented button {
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--teal);
  background: transparent;
  font-weight: 800;
}

.segmented button.active {
  color: #fff;
  background: var(--teal);
}

.asset-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 220px));
  gap: 8px;
}

.asset-browser {
  margin-bottom: 14px;
}

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

.material-shelf {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--sky);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.material-shelf.ready { border-top-color: var(--teal); }
.material-shelf.route { border-top-color: var(--gold); }
.material-shelf.pretrip { border-top-color: var(--sky); }
.material-shelf.internal { border-top-color: #6b6578; }
.material-shelf.pending { border-top-color: var(--rose); }

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

.material-shelf-head h3 { font-size: 18px; }
.material-shelf-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.material-shelf-head > strong {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--teal);
  background: #e5efed;
  font-size: 18px;
}

.material-shelf.pending:last-child { grid-column: 1 / -1; }
.empty-state.compact { padding: 18px; }

.folder-grid,
.category-grid,
.file-list {
  display: grid;
  gap: 12px;
}

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

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

.folder-card,
.category-card,
.file-row {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(219, 227, 226, 0.9);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.folder-card,
.category-card {
  padding: 14px;
}

.folder-card h3,
.category-card h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.folder-card p,
.category-card p {
  margin: 0;
  color: var(--muted);
}

.asset-mini-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.asset-mini {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  background: #fbfaf6;
  border-radius: 8px;
}

.asset-mini img,
.asset-mini .file-tile {
  width: 44px;
  height: 34px;
  aspect-ratio: auto;
  border-radius: 6px;
}

.asset-mini strong,
.asset-mini span {
  display: block;
}

.asset-mini strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.asset-card {
  overflow: hidden;
}

.asset-card img,
.file-tile {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: #eaf1ef;
}

.file-tile {
  display: grid;
  place-items: center;
  color: var(--teal);
  font-weight: 900;
}

.asset-card div {
  padding: 12px;
}

.asset-card strong,
.asset-card span {
  display: block;
}

.asset-card span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.link-title {
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}

.destination-image {
  cursor: pointer;
}

.destination-hero {
  margin-bottom: 16px;
}

.destination-hero-image {
  min-height: 260px;
  border-radius: 8px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  color: #fff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow);
}

.destination-hero-image .ghost {
  align-self: flex-start;
  margin-bottom: auto;
  background: rgba(255, 255, 255, 0.90);
}

.destination-hero-image h2 {
  font-size: 42px;
}

.destination-hero-image p {
  max-width: 720px;
  line-height: 1.6;
}

.hero-stats,
.chip-row,
.destination-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-stats span,
.chip-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #173438;
  font-size: 13px;
  font-weight: 800;
}

.destination-tabs {
  margin-bottom: 16px;
}

.destination-tab {
  background: #eef4f3;
  color: var(--teal);
  border-radius: 8px;
  padding: 11px 14px;
  font-weight: 800;
}

.destination-tab.active {
  background: var(--teal);
  color: #fff;
}

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

.route-card,
.simple-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(219, 227, 226, 0.9);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
}

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

.route-card p,
.simple-card p {
  color: var(--muted);
  line-height: 1.6;
}

.simple-card p span {
  display: inline-block;
  min-width: 92px;
  color: var(--teal);
  font-weight: 800;
}

.file-link {
  margin-top: 10px;
  background: #fff7e6;
  color: #7a581b;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 800;
}

.download-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: #eef4f3;
  color: var(--teal);
  font-weight: 900;
  text-decoration: none;
}

.modal-body {
  padding: 18px;
}

.file-list {
  margin-top: 16px;
}

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

.file-row strong,
.file-row span {
  display: block;
}

.file-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.file-card {
  width: min(1180px, 100%);
}

#file-content {
  padding: 18px;
}

.file-preview-image {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  display: block;
}

#file-modal.image-preview-mode {
  padding: 24px;
  cursor: zoom-out;
  background: rgba(245, 241, 233, 0.82);
}

#file-modal.image-preview-mode .file-card {
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#file-modal.image-preview-mode .modal-head {
  display: none;
}

#file-modal.image-preview-mode #file-content {
  padding: 0;
  overflow: visible;
  background: transparent;
}

#file-modal.image-preview-mode .file-preview-image {
  width: auto;
  max-width: calc(100vw - 48px);
  height: auto;
  max-height: calc(100vh - 48px);
  cursor: default;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.file-preview-frame {
  width: 100%;
  height: 76vh;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.file-preview-empty {
  padding: 28px;
  text-align: center;
}

.file-preview-empty a {
  color: var(--teal);
  font-weight: 800;
}

.detail-card {
  width: min(1080px, 100%);
}

#detail-content {
  padding: 18px;
}

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

.detail-grid article,
.detail-section {
  padding: 16px;
}

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

.detail-grid strong {
  display: block;
  margin-top: 8px;
}

.detail-section {
  margin-top: 12px;
}

.detail-section h4 {
  margin: 0 0 10px;
}

.detail-section p {
  color: var(--muted);
  line-height: 1.7;
}

.kv-list {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px 14px;
}

.kv-list span {
  color: var(--muted);
}

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

.faq-list article {
  padding: 12px;
  background: #fbfaf6;
  border-radius: 8px;
}

.empty-state {
  color: var(--muted);
  padding: 14px;
}

.table-wrap {
  overflow: auto;
}

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

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

th {
  position: sticky;
  top: 0;
  background: #f0f5f4;
  color: #294448;
  z-index: 1;
}

td {
  background: rgba(255, 255, 255, 0.82);
}

th:last-child,
td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -10px 0 18px rgba(20, 32, 34, 0.08);
}

th:last-child {
  z-index: 3;
}

tr:hover td {
  background: #fbf8f0;
}

.status {
  display: inline-block;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  background: #eef4f3;
  color: var(--teal);
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
}

.chat-card,
.reply-card {
  padding: 20px;
}

.chat-card label {
  display: block;
  margin: 16px 0 7px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.full {
  width: 100%;
  margin-top: 16px;
}

.reply-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reply-head span {
  font-weight: 800;
}

.reply-head strong {
  color: var(--teal);
}

pre {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.75;
  font-size: 15px;
  min-height: 440px;
  color: #263235;
  background: #fbfaf6;
  border: 1px solid #e6dfd1;
  border-radius: 8px;
  padding: 18px;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 28, 30, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 20;
}

.modal.open {
  display: flex;
}

.modal-card {
  width: min(880px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--panel);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24);
}

.modal-head {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

#data-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.field.wide {
  grid-column: 1 / -1;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

.ghost {
  background: #eef1ef;
  color: var(--ink);
  border-radius: 8px;
  padding: 11px 14px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .sidebar {
    position: static;
    width: auto;
  }

  .shell {
    margin-left: 0;
  }

  .destination-grid,
  .metric-grid,
  .chat-layout,
  .task-summary,
  .task-calendar,
  .gap-grid,
  .intake-layout,
  .asset-gallery,
  .folder-grid,
  .category-grid,
  .material-shelf-grid,
  .detail-grid,
  .destination-section-grid {
    grid-template-columns: 1fr;
  }

  .asset-tools,
  .asset-filter-row,
  .file-row {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .material-shelf.pending:last-child { grid-column: auto; }

  .pending-item {
    grid-template-columns: 1fr;
  }

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

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

/* Unified authentication */
.auth-pending .sidebar,
.auth-pending .shell,
.auth-pending .growth-dialog,
.auth-pending .growth-toast { display: none; }
.unified-login { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); background:#f7f4ee; }
.unified-login[hidden] { display:none; }
.login-visual { padding:clamp(48px,9vw,120px); display:flex; flex-direction:column; justify-content:center; color:#fff; background:linear-gradient(145deg,rgba(15,47,51,.94),rgba(24,88,82,.91)),url('/assets/destinations/tibet.png') center/cover; }
.login-visual img { width:92px; height:92px; border-radius:50%; object-fit:cover; margin-bottom:34px; }
.login-visual p { margin:0; color:#f2d391; font-size:13px; font-weight:800; letter-spacing:.12em; }
.login-visual h1 { max-width:720px; margin:18px 0; font-size:clamp(38px,5vw,68px); line-height:1.15; }
.login-visual span { max-width:580px; color:#d5e4e2; font-size:18px; line-height:1.8; }
.login-panel { align-self:center; width:min(430px,calc(100% - 48px)); margin:auto; padding:34px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:var(--shadow); }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.login-brand img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.login-brand div { display:grid; }
.login-brand strong { font-size:18px; }
.login-brand span,.login-panel small { color:var(--muted); }
.login-panel h2 { margin-bottom:22px; font-size:28px; }
.login-panel label { display:grid; gap:8px; margin:16px 0; font-weight:700; }
.login-panel .primary { width:100%; margin:8px 0 16px; }
.form-error { min-height:22px; margin:0; color:var(--rose); font-weight:700; }
.side-account { padding:14px 10px 0; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.side-account div { min-width:0; display:grid; }
.side-account strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-account span { color:#aebfc0; font-size:12px; }
.side-account button { padding:7px 9px; border-radius:6px; color:#d8e1e1; background:rgba(255,255,255,.08); }

/* Growth-center rules stay scoped so they cannot alter the sales database UI. */
.growth-center { --gc-muted:#667985; --gc-card:#fff; --gc-teal:#087b75; --gc-gold:#d5aa45; --gc-line:#d9d5cc; }
.growth-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.growth-toolbar h2 { font-size:30px; }
.growth-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.growth-nav button { display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--line); color:var(--ink); background:#fff; border-radius:8px; }
.growth-nav button.active,.growth-nav button:hover { color:#fff; background:var(--teal); border-color:var(--teal); }
.growth-center .grid { display:grid; gap:16px; }
.growth-center .grid.cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
.growth-center .card { padding:20px; border:1px solid var(--gc-line); border-radius:8px; background:var(--gc-card); box-shadow:0 12px 35px rgba(24,49,66,.07); }
.growth-center .metric b { display:block; margin-top:4px; font-size:32px; }
.growth-center .metric span,.growth-center small { color:var(--gc-muted); }
.growth-center .section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:28px 0 12px; }
.growth-center .section-head h2 { font-size:20px; }
.growth-center .list { display:grid; gap:10px; }
.growth-center .list-row { display:grid; grid-template-columns:1.2fr .8fr .8fr .7fr auto; gap:12px; align-items:center; padding:14px 16px; border:1px solid var(--gc-line); border-radius:8px; background:#fff; }
.growth-center .pill { display:inline-block; padding:3px 9px; border-radius:99px; color:#416788; background:#e5ecef; font-size:12px; font-weight:800; }
.growth-center .pill.草稿 { color:#6f6a61; background:#eeeae1; }
.growth-center .pill.待重寫,.growth-center .pill.需修改 { color:#9b3f50; background:#f8dfd8; }
.growth-center .pill.已通過,.growth-center .pill.已封庫 { color:#176d52; background:#dbeee7; }
.growth-center .two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.growth-center .three { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.growth-center .field { display:grid; gap:7px; margin:15px 0; font-weight:700; }
.growth-center textarea { min-height:96px; resize:vertical; }
.growth-center .wizard-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; }
.growth-center .wizard { padding:22px; border:1px solid var(--gc-line); border-radius:8px; background:#fff; box-shadow:0 12px 35px rgba(24,49,66,.07); }
.growth-center .steps { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-bottom:24px; }
.growth-center .step-dot { padding:9px 5px; text-align:center; border-radius:6px; background:#ece8df; color:var(--gc-muted); font-size:12px; }
.growth-center .step-dot.active { color:#fff; background:var(--gc-teal); }
.growth-center .step-dot.done { color:var(--gc-teal); background:#dbeeea; }
.growth-center .step-pane { display:none; }
.growth-center .step-pane.active { display:block; }
.growth-center .hint { margin:0 0 18px; padding:10px 12px; border-left:4px solid var(--gc-gold); background:#fbf1d7; color:#6b592f; }
.growth-center .wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:17px; border-top:1px solid var(--gc-line); }
.growth-center .side-help { position:sticky; top:25px; height:max-content; }
.growth-center .day-tip { padding:12px; margin:9px 0; border-radius:6px; background:#e3efed; }
.growth-center .pending { margin-top:10px; padding:8px; border-radius:6px; color:#795c11; background:#f8edcc; font-size:12px; }
.growth-center .errors,.growth-center .privacy.show { padding:10px; border-radius:6px; color:#9b3f50; background:#fbe4df; }
.growth-center .privacy { display:none; }
.growth-center .privacy.show { display:block; }
.growth-center .motive { padding:13px; border:1px solid var(--gc-line); border-radius:8px; }
.growth-center .score-picker { display:grid; grid-template-columns:1fr auto; align-items:center; padding:10px 0; border-bottom:1px solid var(--gc-line); }
.growth-center .score-picker div { display:flex; gap:5px; }
.growth-center .score-picker input { display:none; }
.growth-center .score-picker span { display:grid; place-items:center; width:34px; height:34px; border-radius:6px; background:#eeeae2; cursor:pointer; }
.growth-center .score-picker input:checked + span { color:#fff; background:var(--gc-teal); }
.growth-center .route-line { display:flex; overflow:auto; padding:18px 5px 25px; }
.growth-center .route-node { position:relative; min-width:135px; text-align:center; }
.growth-center .route-node::before { content:""; position:absolute; top:18px; left:-50%; right:50%; height:3px; background:#bfcfcf; }
.growth-center .route-node:first-child::before { display:none; }
.growth-center .route-node b { position:relative; z-index:1; display:grid; place-items:center; width:38px; height:38px; margin:auto; border:5px solid var(--paper); border-radius:50%; color:#fff; background:var(--gc-teal); }
.growth-center .route-node span { display:block; font-size:12px; }
.growth-center .day-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.growth-center .day-card { padding:17px; border:1px solid var(--gc-line); border-radius:8px; background:#fff; cursor:pointer; }
.growth-center .day-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.growth-center .tags { display:flex; flex-wrap:wrap; gap:5px; }
.growth-center .tag { padding:2px 7px; border-radius:5px; color:#85503c; background:#f9e2d9; font-size:11px; }
.growth-center .chart { display:flex; align-items:flex-end; gap:9px; height:180px; padding:15px; border-left:1px solid var(--gc-line); border-bottom:1px solid var(--gc-line); }
.growth-center .chart-col { display:grid; align-content:end; gap:4px; flex:1; text-align:center; font-size:10px; }
.growth-center .chart-bar { min-height:3px; border-radius:5px 5px 0 0; background:var(--gc-teal); }
.growth-center .sales-route-help { margin-top:18px; padding-top:16px; border-top:1px solid var(--gc-line); }
.growth-file-link { display:inline-block; margin-top:10px; color:var(--teal); font-weight:700; }
.growth-dialog { width:min(900px,92vw); max-height:90vh; overflow:auto; padding:24px; border:0; border-radius:8px; color:var(--ink); background:#fff; box-shadow:0 25px 80px rgba(0,0,0,.35); }
.growth-dialog::backdrop { background:rgba(15,39,42,.68); }
.growth-dialog .modal-close { width:100%; margin-top:20px; }
.growth-dialog .two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.growth-dialog .field { display:grid; gap:7px; margin:15px 0; font-weight:700; }
.growth-toast { position:fixed; z-index:120; right:20px; top:20px; max-width:420px; padding:12px 16px; border-radius:7px; color:#fff; background:#183142; opacity:0; pointer-events:none; transition:.2s; }
.growth-toast.show { opacity:1; }
.growth-active .top-actions { visibility:hidden; }

@media (max-width:1000px) {
  .growth-center .grid.cards,.growth-center .day-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .growth-center .wizard-layout { grid-template-columns:1fr; }
  .growth-center .side-help { position:static; }
  .growth-center .three { grid-template-columns:1fr; }
  .growth-center .list-row { grid-template-columns:1fr 1fr; }
}

@media (max-width:700px) {
  .unified-login { grid-template-columns:1fr; }
  .login-visual { display:none; }
  .growth-toolbar { align-items:flex-start; }
  .growth-toolbar h2 { font-size:25px; }
  .growth-center .grid.cards,.growth-center .day-grid,.growth-center .two,.growth-dialog .two { grid-template-columns:1fr; }
  .growth-center .steps { grid-template-columns:repeat(3,1fr); }
  .growth-nav { display:grid; grid-template-columns:1fr 1fr; }
  .side-account { margin-top:8px; }
}

/* Black gold visual system */
:root {
  color-scheme: dark;
  --ink: #f3eee5;
  --muted: #aaa397;
  --line: #38342d;
  --paper: #0d0f10;
  --panel: #17191a;
  --teal: #c8aa6a;
  --teal-2: #dfc483;
  --gold: #c8aa6a;
  --rose: #cf7878;
  --sky: #91a2ae;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

body {
  color: var(--ink);
  background: #0d0f10;
}

.sidebar {
  color: var(--ink);
  background: #08090a;
  border-right: 1px solid #4b4029;
  box-shadow: 12px 0 38px rgba(0, 0, 0, 0.24);
}

.brand-mark {
  background: #f7f4ed;
  border: 1px solid #9f8757;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.brand span,
.side-account span,
.side-note p { color: #9e988d; }
.nav { color: #c4beb4; }
.nav.active,
.nav:hover {
  color: #f4e4bb;
  background: #1a1916;
  box-shadow: inset 3px 0 0 var(--gold);
}
.side-note {
  background: #121313;
  border-color: #3b3528;
}
.side-note span { color: #dfc483; }
.side-account { border-top-color: #393329; }
.side-account button { color: #dbcda9; background: #191918; border: 1px solid #3b3528; }

.shell { background: #0d0f10; }
.topbar { padding-bottom: 18px; border-bottom: 1px solid #3f3728; }
.eyebrow { color: #c8aa6a; }
h1, h2, h3, h4 { color: #f3eee5; }

input,
select,
textarea {
  color: #f3eee5;
  background: #111314;
  border-color: #3c3831;
}
input::placeholder,
textarea::placeholder { color: #77736c; }
input:focus,
select:focus,
textarea:focus {
  border-color: #c8aa6a;
  box-shadow: 0 0 0 3px rgba(200, 170, 106, 0.14);
}

#refresh-btn,
.primary,
.modal-head button,
.growth-toolbar > button,
.growth-center button:not(.ghost) {
  color: #11100d;
  background: #c8aa6a;
}
#refresh-btn:hover,
.primary:hover,
.growth-toolbar > button:hover { background: #dfc483; }
.ghost {
  color: #e3d7ba;
  background: #20211f;
  border: 1px solid #3d382f;
}

.metric,
.destination-card,
.panel-block,
.wizard-card,
.pending-card,
.chat-card,
.reply-card,
.simple-card,
.gap-card,
.folder-card,
.category-card,
.file-row,
.task-calendar,
.task-summary > article,
.modal-card,
.material-shelf {
  color: var(--ink);
  background: #17191a;
  border-color: #35322c;
  box-shadow: var(--shadow);
}

.metric strong,
.card-stats strong,
.hero-stats b { color: #dfc483; }
.metric span,
.card-stats span,
.panel-head p,
.simple-card p span,
.folder-card p,
.category-card p,
.material-shelf-head p { color: var(--muted); }
.progress,
.mini-progress { background: #262724; }
.progress i,
.mini-progress i { background: #c8aa6a; }
.badge,
.status,
.tag {
  color: #e5d3a7;
  background: #29251d;
  border-color: #4b402b;
}

.panel-head,
.route-card-head,
.section-title,
.reply-head { border-color: #38342d; }
.panel-head { padding: 18px; background: #17191a; border: 1px solid #38342d; border-radius: 8px; box-shadow: var(--shadow); }
.table-wrap { border-color: #38342d; background: #151718; box-shadow: var(--shadow); }
table { color: #e8e2d8; }
thead { background: #211f1a; }
th { color: #d8c69c; border-color: #40392c; }
td { border-color: #302e29; }
tbody tr { background: #151718; }
tbody tr:nth-child(even) { background: #121415; }
tbody tr:hover { background: #211f1a; }
.table-action { color: #ddc887; background: #24221d; border-color: #4a402d; }
.table-action.danger { color: #e59b9b; background: #2c1d1d; border-color: #573131; }
.table-thumb { border: 1px solid #4b402b; }

.segmented { background: #171918; border: 1px solid #373229; }
.segmented button { color: #cbbd9b; }
.segmented button.active { color: #11100d; background: #c8aa6a; }
.asset-mini { background: #111314; border: 1px solid #302d27; }
.asset-mini span { color: #9e988d; }
.file-tile { color: #d9c58d; background: #22211d; }
.material-shelf { border-top-color: #8e794f; }
.material-shelf.ready { border-top-color: #c8aa6a; }
.material-shelf.route { border-top-color: #e0c37f; }
.material-shelf.pretrip { border-top-color: #93a6b2; }
.material-shelf.internal { border-top-color: #9b8fad; }
.material-shelf.pending { border-top-color: #bf7777; }
.material-shelf-head > strong { color: #f0d796; background: #29251d; }

.destination-tabs { border-color: #3a352c; }
.destination-tab { color: #bfb7a8; background: transparent; }
.destination-tab.active { color: #e5cf96; border-color: #c8aa6a; }
.destination-hero-image { border: 1px solid #4a402d; }
.destination-image { border-bottom: 1px solid #3f3729; }

.modal { background: rgba(0, 0, 0, 0.76); }
.modal-card { background: #151718; }
.modal-head { background: #1f1e19; border-color: #433a2b; }
.detail-section,
.detail-grid article,
.file-preview-empty,
.upload-note,
.scan-result {
  color: #d9d1c4;
  background: #111314;
  border-color: #353129;
}
.kv-list span { color: #9f998f; }
.kv-list b { color: #ede5d8; }

.calendar-day { color: #c2b9aa; background: #151718; border-color: #353129; }
.calendar-day.active { color: #16130d; background: #c8aa6a; border-color: #dfc483; }
.calendar-day.today:not(.active) { border-color: #c8aa6a; }
.pending-item { background: #131516; border-color: #353129; }
.pending-item strong { color: #e7ddcf; }

.reply-card pre {
  color: #e9dfcf;
  background: #0e1011;
  border-color: #3a3429;
}

.growth-center {
  --gc-muted: #aaa397;
  --gc-card: #17191a;
  --gc-teal: #c8aa6a;
  --gc-gold: #dfc483;
  --gc-line: #38342d;
}
.growth-nav { border-color: #3f3729; }
.growth-nav button { color: #c8bfae; background: #151718; border-color: #38342d; }
.growth-nav button.active,
.growth-nav button:hover { color: #11100d; background: #c8aa6a; border-color: #c8aa6a; }
.growth-center .card,
.growth-center .wizard,
.growth-center .list-row,
.growth-center .day-card { color: #eee6d9; background: #17191a; border-color: #38342d; }
.growth-center .step-dot { color: #a9a295; background: #24231f; }
.growth-center .step-dot.active { color: #11100d; background: #c8aa6a; }
.growth-center .step-dot.done { color: #dfc483; background: #29251d; }
.growth-center .hint { color: #e1cf9f; background: #29251d; border-left-color: #c8aa6a; }
.growth-center .day-tip { color: #ddd2bd; background: #20211f; }
.growth-center .pending { color: #e1c881; background: #2b261b; }
.growth-center .score-picker span { color: #d0c6b5; background: #24231f; }
.growth-center .score-picker input:checked + span { color: #11100d; background: #c8aa6a; }
.growth-center .chart { border-color: #3a352c; }
.growth-center .chart-bar { background: #c8aa6a; }

.growth-dialog { color: #eee6d9; background: #151718; border: 1px solid #4a402d; }
.growth-dialog::backdrop { background: rgba(0, 0, 0, 0.82); }
.growth-toast { color: #12100c; background: #d7bb78; }

.unified-login { background: #0d0f10; }
.login-visual {
  color: #f4eee3;
  background-color: #62563e;
  background-blend-mode: multiply;
}
.login-visual p { color: #e3c878; }
.login-visual span { color: #d5cdbc; }
.login-panel { color: #eee7da; background: #151718; border-color: #4a402d; box-shadow: var(--shadow); }
.login-brand img { background: #f7f4ed; border: 1px solid #9f8757; }
.login-brand span,
.login-panel small { color: #a8a095; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0f10; }
::-webkit-scrollbar-thumb { background: #4a402d; border: 2px solid #0d0f10; border-radius: 8px; }
::selection { color: #11100d; background: #d9bd7a; }

/* Chat data center */
.chat-data-center {
  --chat-gold: #c8aa6a;
  --chat-gold-soft: #e0c98d;
  --chat-surface: #151718;
  --chat-surface-2: #1d1f20;
  --chat-line: #3b372e;
}

.chat-data-head h2 { margin: 4px 0 6px; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.chat-data-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 0.75fr)) minmax(220px, 1.5fr);
  gap: 10px;
  margin: 18px 0 12px;
}

.chat-data-filters select,
.chat-data-filters input {
  width: 100%;
  min-width: 0;
  color: #eee7da;
  background: #151718;
  border: 1px solid var(--chat-line);
}

.chat-data-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.chat-data-stats article {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 15px;
  background: #151718;
  border: 1px solid var(--chat-line);
  border-radius: 6px;
}

.chat-data-stats span { color: #a9a196; font-size: 13px; }
.chat-data-stats strong { color: var(--chat-gold-soft); font-size: 22px; }

.chat-data-layout {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  min-height: 620px;
  overflow: hidden;
  background: #101213;
  border: 1px solid #463e2f;
  border-radius: 8px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28);
}

.chat-tree-panel {
  min-width: 0;
  padding: 14px;
  overflow: auto;
  background: #131516;
  border-right: 1px solid #3b372e;
}

.chat-tree-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 5px 13px;
  color: #e9e0d2;
}

.chat-tree-title span {
  min-width: 28px;
  padding: 3px 8px;
  color: #17130d;
  text-align: center;
  background: var(--chat-gold);
  border-radius: 999px;
}

.chat-data-tree { display: grid; gap: 7px; }
.chat-tree-group { min-width: 0; }
.chat-tree-group summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 8px;
  color: #ddd4c5;
  cursor: pointer;
  list-style: none;
  border-radius: 5px;
}
.chat-tree-group summary::-webkit-details-marker { display: none; }
.chat-tree-group summary::before { content: "›"; color: var(--chat-gold); transform: rotate(0); }
.chat-tree-group[open] > summary::before { transform: rotate(90deg); }
.chat-tree-group summary span { min-width: 0; overflow-wrap: anywhere; }
.chat-tree-group summary b { margin-left: auto; color: #8f887d; font-size: 12px; }
.chat-tree-group > :not(summary) { margin-left: 10px; }
.chat-tree-group.depth-2 > summary { color: #e7cc8b; }
.chat-tree-group.depth-3 > summary { background: #1d1e1c; }

.chat-tree-conversation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  width: calc(100% - 8px);
  margin: 4px 0 4px 8px;
  padding: 10px;
  color: #d7cec0;
  text-align: left;
  background: #181a1b;
  border: 1px solid transparent;
  border-radius: 6px;
}
.chat-tree-conversation:hover,
.chat-tree-conversation.active { background: #25231d; border-color: #78643b; }
.chat-tree-conversation > span { min-width: 0; overflow-wrap: anywhere; }
.chat-tree-conversation small { grid-column: 1; color: #8f887e; }
.chat-tree-conversation .chat-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.chat-tree-empty { padding: 30px 12px; color: #8f887e; text-align: center; }

.chat-conversation-panel {
  min-width: 0;
  background: #0f1112;
}

.chat-empty-state {
  display: grid;
  place-content: center;
  min-height: 560px;
  color: #aaa296;
  text-align: center;
}
.chat-empty-state strong { color: #e1d7c7; font-size: 22px; }
.chat-empty-state p { max-width: 420px; }

.chat-conversation-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid #373229;
}
.chat-conversation-head p { margin: 0 0 5px; color: var(--chat-gold); font-size: 12px; font-weight: 700; }
.chat-conversation-head h2 { margin: 0; color: #f2eadf; font-size: 24px; letter-spacing: 0; overflow-wrap: anywhere; }
.chat-conversation-head span { display: block; margin-top: 5px; color: #918b82; overflow-wrap: anywhere; }
.chat-conversation-state { display: flex; align-items: flex-start; gap: 7px; flex: 0 0 auto; }

.chat-status,
.chat-ai-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  color: #d8c79d;
  font-size: 11px;
  white-space: nowrap;
  background: #29251d;
  border: 1px solid #5b4d31;
  border-radius: 999px;
}
.chat-ai-badge { color: #16120b; background: #d5b76f; }

.chat-return-reason {
  display: flex;
  gap: 10px;
  margin: 12px 24px 0;
  padding: 10px 12px;
  color: #e4c7bd;
  background: #2b1d1b;
  border-left: 3px solid #b76a55;
}

.chat-conversation-actions,
.chat-file-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 24px;
  border-bottom: 1px solid #302d27;
}
.chat-conversation-actions button { min-height: 34px; padding: 7px 11px; }
.chat-conversation-actions button.active { color: #17130d; background: var(--chat-gold); }
.chat-file-link { color: #d8bd7b; text-decoration: none; overflow-wrap: anywhere; }
.chat-file-link:hover { text-decoration: underline; }

.chat-message-stream {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 720px;
  padding: 24px clamp(18px, 4vw, 52px) 42px;
  overflow: auto;
}
.chat-bubble-row { display: flex; flex-direction: column; align-items: flex-start; max-width: min(76%, 720px); }
.chat-bubble-row.planner { align-self: flex-end; align-items: flex-end; }
.chat-bubble-row.unknown { align-self: center; align-items: center; max-width: min(84%, 760px); }
.chat-speaker { margin: 0 7px 5px; color: #938d83; font-size: 12px; }
.chat-bubble {
  min-width: 110px;
  padding: 11px 13px 8px;
  color: #e8dfd1;
  background: #202324;
  border: 1px solid #373a39;
  border-radius: 8px 8px 8px 2px;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.18);
}
.chat-bubble-row.planner .chat-bubble {
  color: #1b1811;
  background: #d2b570;
  border-color: #e1c98d;
  border-radius: 8px 8px 2px 8px;
}
.chat-bubble-row.unknown .chat-bubble {
  color: #e5ddd0;
  background: #292723;
  border: 1px dashed #a68b52;
  border-radius: 7px;
}
.chat-review-badge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 2px 7px;
  color: #f0d89d;
  background: #463c28;
  border: 1px solid #6c5a36;
  border-radius: 3px;
  font-size: 10px;
}
.chat-bubble p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.chat-bubble time { display: block; margin-top: 6px; color: #85817a; font-size: 10px; text-align: right; }
.chat-bubble-row.planner .chat-bubble time { color: #66583a; }
.chat-attachment-name { display: inline-block; margin-top: 7px; font-size: 11px; opacity: .78; }

.chat-customer-profile {
  display: grid;
  gap: 10px;
  margin: 14px 24px 4px;
  padding: 14px;
  color: #d8d0c3;
  background: #171918;
  border: 1px solid #3a352b;
  border-left: 3px solid var(--chat-gold);
  border-radius: 6px;
}
.chat-profile-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chat-profile-facts span { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.chat-profile-facts b,
.chat-profile-line b { color: #a79e90; font-size: 11px; font-weight: 600; }
.chat-profile-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-profile-line span { padding: 3px 7px; background: #252621; border: 1px solid #3b392f; border-radius: 3px; font-size: 11px; }
.chat-profile-line.muted span { color: #bdb5aa; background: #211f1d; }
.chat-customer-profile > a { width: fit-content; color: #d8bd7b; font-size: 12px; text-decoration: none; }
.chat-customer-profile > a:hover { text-decoration: underline; }

.chat-import-card { max-width: 780px; }
.chat-customer-card { max-width: 720px; }
.chat-customer-merge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 16px 20px 20px;
  border-top: 1px solid #3b372e;
}
.chat-customer-merge label { display: grid; gap: 6px; color: #aaa297; }
.chat-customer-merge select { width: 100%; }
.chat-preview-card { width: min(1040px, calc(100vw - 40px)); max-width: 1040px; max-height: 92vh; overflow: hidden; }
.chat-preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid #3b372e; }
.chat-preview-tools span { margin-left: auto; color: #d2a38c; font-size: 12px; }
.chat-preview-list { display: grid; gap: 10px; max-height: 62vh; padding: 16px 20px; overflow: auto; background: #101213; }
.chat-preview-row { width: min(78%, 760px); padding: 11px; background: #1e2122; border: 1px solid #393b39; border-radius: 7px; }
.chat-preview-row.planner { justify-self: end; background: #29251d; border-color: #655536; }
.chat-preview-row-head { display: grid; grid-template-columns: auto minmax(110px, .4fr) minmax(150px, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.chat-preview-row-head b { color: var(--chat-gold); }
.chat-preview-row textarea { width: 100%; min-height: 84px; resize: vertical; }

@media (max-width: 1100px) {
  .chat-data-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-data-filters input { grid-column: 1 / -1; }
  .chat-data-layout { grid-template-columns: minmax(240px, 38%) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .chat-data-filters { grid-template-columns: 1fr; }
  .chat-data-filters input { grid-column: auto; }
  .chat-data-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-data-layout { display: block; min-height: 0; overflow: visible; }
  .chat-tree-panel { max-height: 430px; border-right: 0; border-bottom: 1px solid #3b372e; }
  .chat-conversation-panel { min-height: 440px; }
  .chat-empty-state { min-height: 420px; padding: 24px; }
  .chat-conversation-head { align-items: flex-start; padding: 18px 16px 14px; }
  .chat-conversation-head h2 { font-size: 20px; }
  .chat-conversation-state { flex-direction: column; }
  .chat-conversation-actions,
  .chat-file-bar { padding: 10px 16px; }
  .chat-message-stream { max-height: none; padding: 20px 14px 32px; }
  .chat-bubble-row { max-width: 88%; }
  .chat-bubble-row.unknown { max-width: 94%; }
  .chat-customer-profile { margin: 12px 16px 2px; }
  .chat-profile-facts { grid-template-columns: 1fr 1fr; }
  .chat-preview-card { width: calc(100vw - 16px); }
  .chat-preview-list { padding: 12px; }
  .chat-preview-row { width: 94%; }
  .chat-preview-row-head { grid-template-columns: auto 1fr auto; }
  .chat-preview-row-head input { grid-column: 1 / -1; }
  .chat-customer-merge { grid-template-columns: 1fr; }
}

/* Six-region material library */
.material-library-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 680px;
  overflow: hidden;
  border: 1px solid #3a352c;
  border-radius: 8px;
  background: #121415;
  box-shadow: var(--shadow);
}

.material-destination-tree {
  padding: 18px 12px;
  background: #0a0b0c;
  border-right: 1px solid #3a352c;
}

.material-tree-title,
.material-destination-node,
.material-section-card,
.material-category-nav button,
.material-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.material-tree-title { padding: 0 10px 14px; color: #8f897f; font-size: 12px; font-weight: 800; }
.material-tree-title strong { color: #d8c184; }
.material-destination-node {
  width: 100%;
  min-height: 50px;
  margin-bottom: 5px;
  padding: 0 12px;
  color: #c8c0b3;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: left;
}
.material-destination-node:hover { color: #f0dfb3; background: #181816; border-color: #332f28; }
.material-destination-node.active { color: #17130b; background: #c8aa6a; border-color: #dfc483; }
.material-destination-node b { min-width: 27px; text-align: right; font-size: 12px; }

.material-library-main { min-width: 0; padding: 20px; }
.material-section-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.material-section-card {
  min-height: 82px;
  padding: 15px;
  color: #e9e1d4;
  background: #181a1b;
  border: 1px solid #3b372f;
  border-radius: 7px;
  text-align: left;
}
.material-section-card > span { display: grid; gap: 5px; }
.material-section-card strong { font-size: 17px; }
.material-section-card small { color: #999288; line-height: 1.45; }
.material-section-card > b { display: grid; place-items: center; flex: 0 0 38px; height: 38px; color: #d8c184; background: #25231e; border-radius: 50%; }
.material-section-card.active { border-color: #b99a5d; background: #211e18; box-shadow: inset 3px 0 0 #c8aa6a; }

.material-category-nav {
  display: flex;
  gap: 7px;
  margin: 14px 0;
  padding-bottom: 4px;
  overflow-x: auto;
}
.material-category-nav button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 11px;
  color: #bdb5a8;
  background: #141617;
  border: 1px solid #35322c;
  border-radius: 6px;
}
.material-category-nav button b { color: #8f887c; font-size: 11px; }
.material-category-nav button.active { color: #17130b; background: #c8aa6a; border-color: #dfc483; }
.material-category-nav button.active b { color: #44371e; }

.material-library-tools { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 14px 0 18px; }
.material-search { display: grid; flex: 1 1 360px; max-width: 560px; gap: 6px; color: #a8a094; font-size: 12px; }
.material-search input { width: 100%; }
.material-content-head { align-items: flex-end; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #363229; }
.material-content-head > div > span { color: #c5a65f; font-size: 11px; font-weight: 800; }
.material-content-head h3 { margin-top: 5px; font-size: 25px; }
.material-content-head p { margin: 5px 0 0; color: #9d968b; }
.material-content-head > strong { color: #dfc483; font-size: 32px; }

.material-file-list,
.supplier-material-groups,
.supplier-route-list { display: grid; gap: 10px; }
.material-file-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  background: #17191a;
  border: 1px solid #34312b;
  border-radius: 7px;
}
.material-file-icon { display: grid; place-items: center; width: 54px; height: 54px; color: #d9c27f; background: #24221d; border: 1px solid #4b402c; border-radius: 6px; font-size: 11px; font-weight: 900; }
.material-file-copy { min-width: 0; }
.material-file-copy strong,
.material-file-copy span,
.material-file-copy small { display: block; overflow-wrap: anywhere; }
.material-file-copy strong { color: #eee7da; }
.material-file-copy span { margin-top: 4px; color: #989187; font-size: 12px; }
.material-file-copy small { margin-top: 5px; color: #c3a768; font-size: 11px; }

.supplier-material-group { overflow: hidden; background: #141617; border: 1px solid #38342d; border-radius: 7px; }
.supplier-material-group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 13px 16px; color: #eadfcb; cursor: pointer; list-style: none; }
.supplier-material-group > summary::-webkit-details-marker { display: none; }
.supplier-material-group > summary b { color: #c3a968; font-size: 12px; }
.supplier-material-group[open] > summary { background: #211e18; border-bottom: 1px solid #3b352a; }
.supplier-route-list { padding: 14px; }
.supplier-route-list section { display: grid; gap: 8px; }
.supplier-route-list h4 { color: #d4bb7b; font-size: 14px; }

.material-portrait-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; align-items: start; }
.hotel-material-browser { display: grid; gap: 24px; }
.hotel-filter-bar { position: sticky; top: 8px; z-index: 5; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(170px, .8fr) auto auto; align-items: end; gap: 12px; padding: 14px; background: rgba(18, 20, 21, .96); border: 1px solid #4a4131; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); backdrop-filter: blur(12px); }
.hotel-filter-bar label { display: grid; gap: 6px; }
.hotel-filter-bar label > span { color: #b7aa92; font-size: 11px; font-weight: 800; }
.hotel-filter-bar select { width: 100%; min-height: 40px; color: #f0e5d1; background: #202223; border: 1px solid #514936; border-radius: 6px; padding: 0 11px; }
.hotel-filter-count { display: flex; align-items: baseline; gap: 4px; min-width: 94px; padding-bottom: 8px; color: #a69b89; }
.hotel-filter-count strong { color: #e0c680; font-size: 24px; }
.hotel-filter-count span { font-size: 11px; }
.hotel-region-group { overflow: hidden; background: #111314; border: 1px solid #403a30; border-radius: 10px; }
.hotel-region-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; background: linear-gradient(90deg, #292319, #18191a); border-bottom: 1px solid #4b402c; }
.hotel-region-head span { display: block; margin-bottom: 4px; color: #aa9360; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.hotel-region-head h4 { margin: 0; color: #f1e5cc; font-size: 22px; }
.hotel-region-head b { color: #dfc483; font-size: 13px; }
.hotel-grade-list { display: grid; gap: 22px; padding: 18px; }
.hotel-grade-group { display: grid; gap: 12px; }
.hotel-grade-group + .hotel-grade-group { padding-top: 20px; border-top: 1px solid #302d27; }
.hotel-grade-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hotel-grade-head h5 { margin: 0; padding: 6px 11px; color: #16130d; background: #d6b96f; border-radius: 999px; font-size: 12px; }
.hotel-grade-head span { color: #978f82; font-size: 12px; }
@media (max-width: 900px) { .hotel-filter-bar { position: static; grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hotel-filter-bar { grid-template-columns: 1fr; } }
.material-portrait-card { min-width: 0; overflow: hidden; background: #17191a; border: 1px solid #3b372f; border-radius: 7px; }
.material-portrait-cover { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; }
.material-portrait-cover img { width: 100%; height: 100%; object-fit: cover; }
.material-portrait-cover.text-cover { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px; color: #efe3c7; background: linear-gradient(165deg, #26231d 0%, #101112 58%, #08090a 100%); border-bottom: 1px solid #4b402c; }
.material-portrait-cover.text-cover::before { content: "FT"; position: absolute; top: 16px; right: 16px; color: rgba(218, 191, 125, .2); font-size: 38px; font-weight: 900; }
.material-portrait-cover span { color: #c6a862; font-size: 11px; font-weight: 900; }
.material-portrait-cover strong { position: relative; max-width: 100%; color: #f1e9dc; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.material-portrait-cover small { color: #938c80; }
.material-portrait-cover i { position: absolute; top: 12px; left: 12px; padding: 5px 7px; color: #2a2110; background: #d6b96f; border-radius: 4px; font-size: 10px; font-style: normal; font-weight: 900; }
.material-card-body { display: grid; gap: 5px; padding: 12px; }
.material-card-body > strong { min-height: 42px; color: #ece3d5; line-height: 1.5; overflow-wrap: anywhere; }
.material-card-body > span { min-height: 18px; color: #938d83; font-size: 11px; }
.material-card-body .action-row { margin-top: 6px; }
.material-content-actions { display: flex; align-items: center; gap: 12px; }
.material-content-actions > strong { color: #dfc483; font-size: 32px; }

.city-card-browser { display: grid; gap: 16px; min-width: 0; }
.city-card-carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.city-card-carousel-toolbar p { margin: 0; color: #aaa297; font-size: 13px; }
.city-card-carousel-toolbar > div { display: flex; gap: 7px; }
.city-card-carousel-toolbar button {
  display: grid; place-items: center; width: 38px; height: 38px; color: #f2dfae;
  background: #1d1d1a; border: 1px solid #554a35; border-radius: 50%; font-size: 18px;
}
.city-card-carousel {
  display: flex; gap: 18px; min-width: 0; padding: 8px max(24px, calc(50% - 155px)) 16px;
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory;
  scrollbar-color: #8e7442 #22211d; cursor: grab;
}
.city-card-carousel.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.city-card-slide {
  flex: 0 0 250px; scroll-snap-align: center; overflow: hidden; opacity: .58;
  transform: scale(.94); background: #17191a; border: 1px solid #403b32; border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .24); transition: opacity .22s ease, transform .22s ease, border-color .22s ease;
}
.city-card-slide.active { opacity: 1; transform: scale(1); border-color: #d1b56f; box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 0 1px rgba(215, 187, 113, .22); }
.city-card-image-button { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: 0; }
.city-card-image-button img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; pointer-events: none; }
.city-card-slide-caption { display: grid; grid-template-columns: 1fr auto; gap: 3px 9px; align-items: baseline; padding: 12px 14px 13px; }
.city-card-slide-caption strong { color: #f0e7d7; font-size: 16px; }
.city-card-slide-caption span { color: #d0b36e; font-size: 11px; letter-spacing: .08em; }
.city-card-slide-caption small { grid-column: 1 / -1; color: #8f897f; }
.city-attraction-popover {
  position: relative; display: grid; gap: 13px; padding: 16px; background: linear-gradient(145deg, #211f19, #121415);
  border: 1px solid #524832; border-radius: 13px; box-shadow: 0 17px 38px rgba(0, 0, 0, .32);
}
.city-attraction-popover::before { content: ""; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; background: #201e18; border-top: 1px solid #524832; border-left: 1px solid #524832; transform: translateX(-50%) rotate(45deg); }
.city-attraction-popover-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.city-attraction-popover-head > div { display: grid; gap: 4px; }
.city-attraction-popover-head span { color: #b89a5e; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.city-attraction-popover-head strong { color: #f1e8d9; font-size: 18px; }
.city-attraction-popover-head > small { color: #9d9588; }
.city-attraction-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.city-attraction-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 66px; padding: 10px 12px; text-align: left; border-radius: 8px; }
.city-attraction-option span { display: grid; gap: 4px; min-width: 0; }
.city-attraction-option b { color: #eee5d7; overflow-wrap: anywhere; }
.city-attraction-option small { color: #918a80; }
.city-attraction-option em { flex: 0 0 auto; color: #8e877c; font-size: 10px; font-style: normal; }
.city-attraction-option.linked { background: #23251f; border: 1px solid #817044; cursor: pointer; }
.city-attraction-option.linked:hover { background: #302c21; border-color: #d2b66f; }
.city-attraction-option.linked em { color: #d4b870; }
.city-attraction-option.pending { opacity: .72; background: #171819; border: 1px solid #36332d; cursor: not-allowed; }
.city-attraction-empty { color: #9d9588; text-align: center; }
.material-target-highlight { animation: material-target-pulse 1.8s ease 2; border-color: #dfbf70; box-shadow: 0 0 0 3px rgba(223, 191, 112, .2); }
@keyframes material-target-pulse { 50% { box-shadow: 0 0 0 7px rgba(223, 191, 112, .1); } }

.material-links-card { width: min(900px, calc(100vw - 32px)); max-width: 900px; }
.material-link-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #3a352c; }
.material-link-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 54vh; padding: 16px 20px; overflow: auto; }
.material-link-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; padding: 11px; background: #111314; border: 1px solid #34312b; border-radius: 6px; cursor: pointer; }
.material-link-option input { margin-top: 3px; }
.material-link-option span { display: grid; gap: 4px; min-width: 0; }
.material-link-option strong { color: #e8dfd1; overflow-wrap: anywhere; }
.material-link-option small { color: #958e83; }

@media (max-width: 1100px) {
  .material-library-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .material-portrait-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

@media (max-width: 760px) {
  .material-library-layout { display: block; min-height: 0; overflow: visible; }
  .material-destination-tree { display: flex; gap: 6px; padding: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #3a352c; }
  .material-tree-title { display: none; }
  .material-destination-node { flex: 0 0 78px; min-height: 42px; margin: 0; }
  .material-library-main { padding: 14px; }
  .material-section-nav { grid-template-columns: 1fr; }
  .material-section-card { min-height: 72px; }
  .material-library-tools { align-items: stretch; flex-direction: column; }
  .material-search { flex-basis: auto; max-width: none; }
  .material-content-head { align-items: flex-start; }
  .material-content-head h3 { font-size: 21px; }
  .material-content-head > strong { font-size: 25px; }
  .material-file-item { grid-template-columns: 44px minmax(0, 1fr); }
  .material-file-icon { width: 44px; height: 44px; }
  .material-file-item > .action-row { grid-column: 1 / -1; }
  .material-portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .material-portrait-cover.text-cover { padding: 12px; }
  .material-portrait-cover strong { font-size: 14px; }
  .material-card-body { padding: 9px; }
  .material-card-body > strong { min-height: 40px; font-size: 12px; }
  .material-card-body .action-row { display: grid; grid-template-columns: 1fr 1fr; }
  .material-card-body .action-row > * { min-width: 0; padding-inline: 6px; font-size: 11px; text-align: center; }
  .material-link-filters,
  .material-link-options { grid-template-columns: 1fr; }
  .material-content-actions { width: 100%; justify-content: space-between; }
  .material-content-actions > strong { font-size: 25px; }
  .city-card-carousel-toolbar p { max-width: 230px; }
  .city-card-carousel { gap: 12px; padding-inline: calc(50% - 118px); }
  .city-card-slide { flex-basis: 220px; }
  .city-attraction-popover {
    position: fixed; z-index: 80; right: 8px; bottom: 8px; left: 8px; max-height: 40vh; overflow-y: auto;
    padding-bottom: max(14px, env(safe-area-inset-bottom)); border-radius: 16px;
  }
  .city-attraction-popover::before { display: none; }
  .city-attraction-popover-head { align-items: start; }
  .city-attraction-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-attraction-option { min-height: 58px; padding: 8px; }
  .city-attraction-option em { max-width: 70px; text-align: right; }
}
.route-delivery-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.route-delivery-actions > div {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft, #f7f8fa);
}

.route-delivery-actions > div > span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.delivery-missing {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 760px) {
  .route-delivery-actions { grid-template-columns: 1fr; }
}

.route-library-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

/* Video asset center */
.video-type-tabs { display:flex; gap:8px; margin-bottom:20px; padding-bottom:10px; overflow-x:auto; }
.video-type-tabs button { flex:0 0 auto; color:#b9b1a4; background:#171918; border:1px solid #403a30; }
.video-type-tabs button.active { color:#171918; background:#d2b66f; border-color:#d2b66f; }
.video-type-tabs b { margin-left:5px; }
.video-region { margin:0 0 26px; }
.video-region-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; border-bottom:1px solid #3b352c; }
.video-region-head h4 { color:#f1e6d5; font-size:20px; }.video-region-head span { color:#b9a069; }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.video-card { overflow:hidden; background:#171918; border:1px solid #3c382f; border-radius:8px; }
.video-media { display:grid; place-items:center; aspect-ratio:16/9; background:#090b0b; }
.video-media video,.video-media img { width:100%; height:100%; object-fit:contain; }
.video-processing { color:#d1b56f; font-weight:800; }
.video-card-copy { display:grid; gap:5px; padding:13px; }.video-card-copy>span { color:#c6a75e; font-size:11px; }
.video-card-copy>strong { color:#f0e8dc; }.video-card-copy>small { color:#9a9388; }
.video-card-copy>em { color:#e59687; font-size:11px; font-style:normal; overflow-wrap:anywhere; }
.video-upload-card { width:min(1180px,calc(100vw - 32px)); }
.video-upload-body { padding:18px; }
.video-batch-settings { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.video-batch-settings label { display:grid; gap:6px; color:#bcb3a5; font-size:12px; }
.video-drop { display:grid; place-items:center; min-height:112px; margin:16px 0; padding:18px; color:#d9c383; text-align:center; border:1px dashed #7b6942; background:#141716; cursor:pointer; }
.video-drop.dragging { background:#29271f; border-color:#e2c374; }.video-drop input { margin-top:10px; }
.video-preflight { max-height:48vh; overflow:auto; }
.video-preflight-table { display:grid; gap:7px; }
.video-preflight-table article { display:grid; grid-template-columns:minmax(180px,1.5fr) repeat(4,minmax(100px,1fr)) auto auto; gap:7px; align-items:center; padding:8px; background:#121514; border:1px solid #37332c; }
.video-preflight-table article>div strong,.video-preflight-table article>div small { display:block; overflow-wrap:anywhere; }
.video-preflight-table article>div strong { color:#eee4d5; }.video-preflight-table article>div small { color:#8d877e; }
.video-preflight-table input { min-width:0; }.video-preflight-table .ok { color:#91c29e; }.video-preflight-table .bad { color:#e58f82; }
@media(max-width:900px){.video-grid{grid-template-columns:1fr 1fr}.video-batch-settings{grid-template-columns:1fr}.video-preflight-table article{grid-template-columns:1fr 1fr}.video-preflight-table article>div{grid-column:1/-1}}
@media(max-width:600px){.video-grid{grid-template-columns:1fr}}

/* Route reception material packs */
.route-pack-toolbar { display:grid; grid-template-columns:minmax(280px,1fr) 1.5fr; gap:16px; align-items:stretch; margin-bottom:20px; padding:18px; border:1px solid #4b4232; background:linear-gradient(135deg,#211f19,#151817); }
.route-pack-toolbar label { display:grid; gap:8px; color:#c5a75f; font-size:12px; font-weight:800; }
.route-pack-toolbar select { min-height:48px; color:#f4ead8; border-color:#67583a; background:#101312; }
.route-pack-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.route-pack-summary>div { display:grid; place-items:center; align-content:center; min-height:72px; border-left:1px solid #423b2f; }
.route-pack-summary strong { color:#e1c372; font-size:24px; }.route-pack-summary span { color:#999185; font-size:11px; }
.route-pack-stages { display:grid; gap:10px; }
.route-pack-stage { overflow:hidden; border:1px solid #3c382f; background:#151817; }
.route-pack-stage.ready { border-left:3px solid #c9aa62; }.route-pack-stage.pending { opacity:.78; border-left:3px solid #5e5a52; }
.route-pack-stage summary { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:14px; align-items:center; padding:15px 18px; cursor:pointer; list-style:none; }
.route-pack-stage summary::-webkit-details-marker { display:none; }.route-pack-stage summary:hover { background:#211f1a; }
.pack-code { display:grid; place-items:center; width:52px; height:36px; color:#171918; background:#cdb06a; font-weight:900; }
.route-pack-stage.pending .pack-code { color:#b7b0a5; background:#292b29; }
.route-pack-stage summary strong,.route-pack-stage summary small { display:block; }.route-pack-stage summary strong { color:#eee4d4; font-size:17px; }
.route-pack-stage summary small { margin-top:3px; color:#928b80; }.route-pack-stage summary b { color:#d8bd7a; }
.pack-stage-actions { display:flex; align-items:center; gap:12px; }
.pack-stage-actions button { border:1px solid #816d42; border-radius:8px; padding:8px 12px; color:#ead69e; background:#292318; font-weight:700; white-space:nowrap; }
.pack-stage-actions button:hover { border-color:#d1b56f; background:#3a301d; color:#fff1c8; }
.pack-stage-body { padding:0 18px 18px; border-top:1px solid #332f29; }
.pack-group h5 { margin:16px 0 10px; color:#cbb16f; font-size:14px; }.pack-assets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.pack-media-card,.pack-file-card { min-width:0; overflow:hidden; background:#101312; border:1px solid #353129; }
.pack-image { width:100%; padding:0; border:0; background:#090b0b; }.pack-image img,.pack-media-card video { display:block; width:100%; aspect-ratio:9/16; object-fit:contain; background:#090b0b; }
.pack-media-card strong { display:block; min-height:43px; padding:10px 10px 4px; color:#e9e0d3; font-size:12px; overflow-wrap:anywhere; }
.pack-media-card>a { display:inline-block; margin:4px 10px 10px; color:#d3b66e; font-size:12px; }
.pack-file-card { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px; }
.pack-file-card>div { min-width:0; }.pack-file-card span,.pack-file-card strong { display:block; }.pack-file-card span { color:#b99c5a; font-size:10px; }.pack-file-card strong { margin-top:4px; color:#e8dfd2; overflow-wrap:anywhere; }
.pack-empty { padding:22px; color:#8e887f; text-align:center; border:1px dashed #474139; }
.route-pack-common { margin-top:24px; padding:20px; border:1px solid #443d31; background:#171918; }
.route-pack-common>div:first-child>span { color:#b99b58; font-size:10px; letter-spacing:.14em; }.route-pack-common h4 { margin:4px 0; color:#ede2d1; font-size:21px; }.route-pack-common p { color:#918b82; }
@media(max-width:1000px){.route-pack-toolbar{grid-template-columns:1fr}.pack-assets{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.route-pack-summary{grid-template-columns:repeat(3,1fr)}.route-pack-summary>div{border-left:0;border-top:1px solid #423b2f}.pack-assets{grid-template-columns:repeat(2,minmax(0,1fr))}.route-pack-stage summary{grid-template-columns:50px minmax(0,1fr);padding:12px}.pack-stage-actions{grid-column:1/-1;justify-content:flex-end}.pack-stage-body{padding:0 10px 12px}.pack-file-card{grid-column:1/-1;flex-direction:column;align-items:stretch}}

.route-library-toolbar .segmented {
  width: max-content;
  padding: 4px;
  border-radius: 8px;
}

.route-library-toolbar .segmented button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 6px;
}

.route-catalog {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.route-group {
  display: grid;
  gap: 12px;
}

.route-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #3a352c;
}

.route-group-head span,
.route-kicker {
  color: #c8aa6a;
  font-size: 12px;
  font-weight: 800;
}

.route-library-card {
  min-width: 0;
  color: #ede5d8;
  background: #17191a;
  border-color: #39352d;
  box-shadow: var(--shadow);
}

.route-library-card p { color: #a9a195; }
.route-library-card .route-delivery-actions > div {
  color: #ddd4c5;
  background: #111314;
  border-color: #3a352c;
}

.route-library-card h3 {
  margin-top: 5px;
}

.itinerary-import-panel {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid #423b2f;
  border-radius: 8px;
  background: #171918;
}

.itinerary-import-result {
  margin: 14px 0;
  padding: 12px;
  border-left: 3px solid #c8aa6a;
  background: #111311;
  color: #cbbd9b;
  line-height: 1.6;
}

.itinerary-import-items,
.route-version-list {
  display: grid;
  gap: 8px;
}

.itinerary-import-items > article,
.route-version-list > article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid #39352d;
  border-radius: 6px;
  background: #20211e;
}

.itinerary-import-items strong,
.itinerary-import-items span,
.route-version-list strong,
.route-version-list span {
  display: block;
}

.itinerary-import-items span,
.route-version-list span {
  margin-top: 4px;
  color: #a99f89;
  font-size: 12px;
}

.itinerary-import-items p {
  margin: 6px 0 0;
  color: #cbbd9b;
  font-size: 13px;
}

@media (max-width: 760px) {
  .route-library-toolbar,
  .route-library-toolbar .segmented { width: 100%; }
  .route-library-toolbar .segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itinerary-import-items > article,
  .route-version-list > article { align-items: stretch; flex-direction: column; }
}

/* Black-gold contrast hardening: keep every legacy data surface readable. */
.table-wrap table {
  color: #eee7dc;
  background: #121415;
}

.table-wrap thead,
.table-wrap th,
.table-wrap th:last-child {
  color: #f0d99f;
  background: #24211b;
  border-color: #4b422f;
}

.table-wrap td,
.table-wrap td:last-child {
  color: #eee7dc;
  background: #17191a;
  border-color: #34312b;
}

.table-wrap tbody tr:nth-child(even) td,
.table-wrap tbody tr:nth-child(even) td:last-child {
  background: #121415;
}

.table-wrap tbody tr:hover td,
.table-wrap tbody tr:hover td:last-child {
  color: #fff8e8;
  background: #29251d;
}

.table-wrap th:last-child,
.table-wrap td:last-child {
  box-shadow: -12px 0 20px rgba(0, 0, 0, 0.34);
}

.table-wrap td a:not(.table-action) { color: #e3c87f; }
.table-wrap td strong { color: #fff4dc; }
.table-wrap td small,
.table-wrap td .muted { color: #aaa397; }

select option {
  color: #f3eee5;
  background: #111314;
}

.faq-list article,
.route-delivery-actions > div,
.upload-drop,
.asset-card,
.folder-row {
  color: #e9e2d7;
  background: #151718;
  border-color: #38342d;
}

.route-delivery-actions > div > span:first-child,
.delivery-missing { color: #aaa397; }

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  color: #77736c;
  background: #191a19;
  opacity: 1;
}

/* Route Studio */
.itinerary-builder-modal { padding: 0; }
.itinerary-builder-card { width: min(1480px, 100vw); height: 100vh; max-height: none; margin: 0; border-radius: 0; overflow: hidden; background: #0f1211; }
.builder-topbar { height: 78px; padding: 15px 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #3d392f; background: #151817; }
.builder-topbar span,.builder-main-head span,.builder-section-title span,.builder-create-card>span,.builder-output-hero>span { color:#c8aa6a; font-size:11px; font-weight:900; letter-spacing:.18em; }
.builder-topbar h3 { margin: 2px 0 0; color:#fff6e6; font:700 23px Georgia,"Noto Serif TC",serif; }
#itinerary-builder-content { height: calc(100vh - 78px); overflow:auto; }
.builder-start { display:grid; grid-template-columns:minmax(340px,.75fr) minmax(480px,1.25fr); gap:28px; max-width:1240px; margin:auto; padding:44px 28px; }
.builder-create-card,.builder-drafts { padding:30px; border:1px solid #3d392f; background:#171a18; }
.builder-create-card h2,.builder-section-title h2 { margin:5px 0 24px; color:#f4ead9; font:700 30px Georgia,"Noto Serif TC",serif; }
.builder-create-form { display:grid; gap:16px; }
.builder-create-form label,.builder-form-grid label { display:grid; gap:7px; color:#b8b0a2; font-size:12px; font-weight:700; }
.builder-drafts article { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid #39352d; }
.builder-drafts article strong,.builder-drafts article span,.builder-drafts article small { display:block; }
.builder-drafts article strong { color:#f3eadb; font-size:16px; }.builder-drafts article span { margin:4px 0; color:#b9ad98; }.builder-drafts article small { color:#756f66; }
.builder-shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:100%; }
.builder-steps { position:sticky; top:0; height:calc(100vh - 78px); padding:24px 14px; border-right:1px solid #38342c; background:#121514; }
.builder-steps button { width:100%; display:flex; align-items:center; gap:13px; padding:14px 12px; border:0; border-left:2px solid transparent; border-radius:0; color:#8f897f; background:transparent; text-align:left; }
.builder-steps button i { width:30px; font-style:normal; color:#6d675f; font-size:11px; letter-spacing:.1em; }
.builder-steps button.active { color:#fff2d9; border-left-color:#c8aa6a; background:#22231f; }.builder-steps button.done i { color:#c8aa6a; }
.builder-main { max-width:1120px; width:100%; margin:0 auto; padding:34px 38px 80px; }
.builder-main-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.builder-main-head h2 { margin:4px 0 0; color:#f4ead9; font:700 34px Georgia,"Noto Serif TC",serif; }
.builder-save-state { color:#868078; font-size:12px; }
.builder-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.builder-form-grid.compact { gap:14px; }.builder-form-grid .wide { grid-column:1/-1; }
.builder-form-grid input,.builder-form-grid select,.builder-form-grid textarea,.builder-create-form input,.builder-create-form select,.builder-template-save input { border:1px solid #49443b; background:#111413; color:#f0e8da; }
.builder-callout { padding:22px; border-left:3px solid #b66f4b; background:#211e19; }.builder-callout strong { color:#edd8b6; }.builder-callout p { margin:5px 0 0; color:#aaa196; }
.builder-nav { display:flex; justify-content:space-between; margin-top:30px; padding-top:22px; border-top:1px solid #35322b; }
.builder-ideas-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:24px; }.builder-ideas-layout aside { padding:20px; background:#161917; border:1px solid #39352e; }.builder-ideas-layout aside h3 { margin:8px 0 12px; color:#d9c9ad; }
.builder-idea-row { display:grid; grid-template-columns:75px 1fr 38px 38px; gap:8px; align-items:start; margin-bottom:10px; }.builder-idea-row b { padding-top:12px; color:#c8aa6a; font-size:12px; }.builder-idea-row textarea { min-height:72px; }.builder-template-save { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-top:22px; }
.idea-template { display:block; width:100%; margin-bottom:8px; padding:12px; border:1px solid #3c3932; background:#20221f; text-align:left; }.idea-template strong,.idea-template span { display:block; }.idea-template span { margin-top:3px; color:#8f877c; font-size:11px; }
.builder-days { display:grid; gap:22px; }.builder-day-card { padding:24px; border:1px solid #403c33; background:#171a18; box-shadow:0 14px 34px rgba(0,0,0,.15); }.builder-day-card header { display:grid; grid-template-columns:auto 150px minmax(0,1fr) auto; gap:14px; align-items:center; margin-bottom:20px; }.builder-day-card header span { color:#c87953; font-weight:900; letter-spacing:.14em; }.builder-day-card header h3 { grid-column:2/-1; color:#eee1cd; }
.builder-attractions { padding:15px; border:1px solid #38352e; background:#111412; }.builder-attractions>span { display:block; margin-bottom:10px; color:#c8aa6a; font-size:12px; font-weight:800; }.builder-attractions label { display:inline-flex; align-items:center; margin:0 8px 8px 0; padding:8px 10px; border:1px solid #454137; background:#1d211e; }.builder-attractions input { width:auto; }
.check-label { display:flex!important; align-items:center; gap:8px; margin-top:8px; color:#d2c3ab!important; }.check-label input { width:auto; }
.builder-preview-actions { display:flex; align-items:center; gap:20px; margin-bottom:16px; }.validation-error,.validation-warning,.validation-ok { display:flex; gap:12px; margin:8px 0; padding:12px 14px; border-left:3px solid; background:#1a1b19; }.validation-error{border-color:#bd6258;color:#efb0aa}.validation-warning{border-color:#c7984f;color:#e4c68f}.validation-ok{border-color:#6b9c7e;color:#a9d3b7}
.builder-document-preview { max-width:820px; margin:28px auto; color:#2c403a; background:#f7f0e5; box-shadow:0 20px 60px #0007; }.builder-document-preview>header { padding:70px 60px 40px; color:#fff; background:linear-gradient(135deg,#113630,#285e53); }.builder-document-preview>header span { color:#dfc89f; font-size:11px; font-weight:800; letter-spacing:.17em; }.builder-document-preview>header h1 { margin:8px 0; font:700 44px Georgia,"Noto Serif TC",serif; }.builder-document-preview>section { padding:28px 48px; border-bottom:1px solid #d9cdbd; }.preview-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.preview-day>span { color:#b66f4b; font-weight:900; }.preview-day h2 { color:#173f3a; font:700 26px Georgia,"Noto Serif TC",serif; }
.builder-output-hero { padding:32px; border:1px solid #514832; background:linear-gradient(135deg,#1b211e,#24231d); }.builder-output-hero h2 { margin:5px 0; color:#f1e5cf; font:700 34px Georgia,"Noto Serif TC",serif; }.builder-output-hero p { color:#aaa197; }.builder-output-hero .button-row { margin-top:20px; }.builder-output-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }.builder-output-grid article { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid #3d3931; background:#171a18; }.builder-output-grid article i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#173f3a; background:#c8aa6a; font-style:normal; font-weight:900; }.builder-output-grid article div { flex:1; min-width:0; }.builder-output-grid strong,.builder-output-grid span { display:block; }.builder-output-grid strong { color:#efe4d2; }.builder-output-grid span { margin-top:3px; overflow:hidden; color:#8e877e; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.builder-output-grid a { color:#dfc283; }.builder-versions { margin-top:25px; }.builder-versions article { display:flex; justify-content:space-between; align-items:center; padding:12px; border-top:1px solid #38342d; color:#b9afa0; }
@media(max-width:900px){.builder-start,.builder-shell,.builder-ideas-layout{grid-template-columns:1fr}.builder-steps{position:static;height:auto;display:flex;overflow:auto;border-right:0;border-bottom:1px solid #38342c}.builder-steps button{min-width:150px}.builder-main{padding:24px 18px 60px}.builder-form-grid,.builder-output-grid{grid-template-columns:1fr}.builder-day-card header{grid-template-columns:1fr}.builder-day-card header h3{grid-column:auto}.builder-template-save{grid-template-columns:1fr}.builder-document-preview>header{padding:45px 26px}.builder-document-preview>section{padding:24px}.preview-meta{grid-template-columns:1fr}}