:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #667085;
  --line: #d7dee8;
  --teal: #14746f;
  --teal-dark: #0e514d;
  --amber: #a15c07;
  --amber-bg: #fff7e6;
  --rose: #b42318;
  --rose-bg: #fff1f0;
  --shadow: 0 12px 26px rgba(31, 41, 55, 0.07);
}

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

.lmessage-reservation-summary-grid article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}

.lmessage-reservation-summary-grid span {
  color: var(--muted);
  font-size: 0.84rem;
}

.lmessage-reservation-summary-grid strong {
  font-size: 1.4rem;
}

.lmessage-reservation-view-controls {
  margin-bottom: 14px;
}

.lmessage-reservation-table {
  min-width: 1180px;
}

.lmessage-customer-history {
  display: grid;
  gap: 4px;
  min-width: 260px;
}

.lmessage-customer-history span {
  color: var(--muted);
  font-size: 0.82rem;
}

.lmessage-reservation-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .lmessage-reservation-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lmessage-reservation-pagination {
    align-items: stretch;
    flex-direction: column;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[hidden] {
  display: none !important;
}

.admin-login-gate {
  align-items: center;
  background: #f3f5f7;
  display: flex;
  min-height: 100vh;
  padding: 24px;
}

.admin-login-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgb(21 34 50 / 10%);
  display: grid;
  gap: 28px;
  margin: auto;
  max-width: 440px;
  padding: 36px;
  width: 100%;
}

.admin-login-brand {
  align-items: center;
}

.admin-login-panel h1 {
  font-size: 30px;
  margin: 4px 0 0;
}

.admin-login-description,
.admin-login-status {
  color: var(--muted);
  line-height: 1.7;
  margin: 8px 0 0;
}

.admin-login-status.is-error {
  color: #a83232;
}

.admin-login-form {
  display: grid;
  gap: 16px;
}

.admin-login-form label {
  display: grid;
  font-weight: 700;
  gap: 8px;
}

.admin-login-form input {
  min-height: 48px;
}

.admin-login-form .button {
  min-height: 48px;
  width: 100%;
}

.admin-account-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .admin-login-gate {
    padding: 16px;
  }

  .admin-login-panel {
    gap: 22px;
    padding: 26px 20px;
  }
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 18px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

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

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

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: var(--teal);
  color: #ffffff;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

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

.nav {
  display: grid;
  gap: 6px;
}

.nav-group {
  display: grid;
  gap: 4px;
}

.nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nav-chevron {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: transform 160ms ease;
}

.nav-group.is-open .nav-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: none;
  gap: 4px;
  padding-left: 12px;
}

.nav-group.is-open .nav-submenu {
  display: grid;
}

.nav-button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  background: transparent;
  color: #344054;
  text-align: left;
  cursor: pointer;
}

.nav-subbutton {
  min-height: 38px;
  padding: 9px 14px;
  color: #475467;
  font-size: 13px;
}

.nav-submenu-label {
  margin: 8px 10px 2px;
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

.nav-button:hover,
.nav-button.is-active {
  background: #e7f2f1;
  color: var(--teal-dark);
  font-weight: 700;
}

.main {
  padding: 28px;
}

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

.eyebrow {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

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

h1 {
  font-size: 28px;
}

h2 {
  font-size: 18px;
}

.topbar-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compact-buttons {
  gap: 6px;
}

.compact-actions {
  gap: 8px;
  margin-top: 8px;
}

.compact-buttons .button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.segmented-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: #f8fafc;
}

.segmented-button {
  min-width: 62px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: #475467;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.segmented-button.is-active {
  background: #ffffff;
  color: var(--teal-dark);
  box-shadow: 0 1px 4px rgba(31, 41, 55, 0.12);
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}

.pill-muted {
  background: #eef2f6;
  color: #344054;
}

.pill-warn {
  background: var(--amber-bg);
  color: #7a4304;
}

.pill-success {
  background: #dff6ec;
  color: #146c55;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

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

.metric,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.metric {
  padding: 18px;
}

.metric span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

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

.store-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.store-selected-label {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
}

.mobile-nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

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

.dashboard-metric {
  min-height: 126px;
}

.dashboard-metric strong {
  display: block;
  font-size: 26px;
}

.dashboard-metric small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.line-usage-metric strong {
  font-size: 22px;
}

.dashboard-calendar-panel {
  min-height: 290px;
}

.dashboard-calendar-heading {
  align-items: flex-start;
}

.dashboard-week-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.dashboard-day-button {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 170px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.dashboard-day-button:hover,
.dashboard-day-button:focus-visible {
  border-color: var(--teal);
  background: #f3fbf9;
  outline: none;
}

.dashboard-day-button.is-today {
  border-color: #77b9ad;
}

.dashboard-day-button strong {
  font-size: 14px;
}

.dashboard-day-count {
  font-size: 22px;
  font-weight: 800;
}

.dashboard-day-slots {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-day-calendar h3 {
  margin: 0 0 12px;
  font-size: 17px;
}

.dashboard-day-reservation {
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.dashboard-day-reservation:first-child {
  border-top: 0;
}

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

.panel {
  margin-bottom: 16px;
  padding: 18px;
}

.issue-panel {
  border-color: #b7d5c4;
  background: #fbfffd;
}

.panel-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.source-issue-grid {
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
  margin-bottom: 14px;
}

.source-selected-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.source-selected-stats div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.source-selected-stats dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.source-selected-stats dd {
  margin: 0;
  font-weight: 700;
}

.source-destination-warning {
  margin: 10px 0 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
}

.source-destination-warning.is-ready {
  border-color: #b9d8d3;
  background: #eef8f6;
  color: var(--teal-dark);
}

.source-destination-warning.is-missing {
  border-color: #f2c7a7;
  background: #fff7ed;
  color: #9a3412;
}

.source-proof-panel {
  margin: 12px 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

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

.source-proof-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.source-proof-grid span,
.source-proof-grid small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.source-proof-grid strong {
  color: var(--ink);
  font-size: 15px;
}

.source-proof-grid small {
  overflow-wrap: anywhere;
}

.source-qr-url,
.source-test-count {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
}

.source-qr-url {
  margin: -2px 0 10px;
}

.mini-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.mini-section-heading strong {
  font-size: 13px;
}

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

.source-link-row {
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.source-link-row.is-selected {
  background: #f1fbf9;
  box-shadow: inset 3px 0 0 var(--teal);
}

.source-link-name strong,
.source-link-count strong {
  display: block;
  margin-bottom: 3px;
}

.source-link-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-mini-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #d9e2ea;
  border-radius: 999px;
  padding: 3px 9px;
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  white-space: nowrap;
}

.source-mini-pill-accent {
  border-color: #b9d8d3;
  background: #eef8f6;
  color: var(--teal-dark);
}

.muted-block {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
}

.source-folder-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.source-folder-shell > .source-detail-grid.is-inline {
  grid-column: 2;
  margin: 0;
}

.source-folder-shell > .source-detail-grid.is-inline .panel {
  margin: 0;
}

.source-folder-panel {
  position: sticky;
  top: 14px;
  min-width: 0;
  overflow: hidden;
  grid-row: 1 / span 2;
}

.source-folder-panel .panel-heading {
  align-items: flex-start;
}

.source-folder-panel .panel-heading > div {
  min-width: 0;
}

.source-folder-panel .pill {
  flex: 0 0 auto;
  max-width: 92px;
  white-space: normal;
  text-align: center;
}

.source-folder-nav {
  display: grid;
  gap: 8px;
}

.source-folder-nav-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.source-folder-nav-item:hover,
.source-folder-nav-item.is-active {
  border-color: #79b8ac;
  background: #eef8f6;
}

.source-folder-nav-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-folder-nav-item strong {
  color: var(--teal-dark);
  font-size: 12px;
}

.source-folder-nav-item.line-tag-folder-depth-1 {
  margin-left: 12px;
  width: calc(100% - 12px);
}

.source-folder-nav-item.line-tag-year-toggle {
  grid-template-columns: minmax(0, 1fr) auto 16px;
}

.line-tag-folder-chevron {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  overflow: visible !important;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.line-tag-year-toggle[aria-expanded="true"] .line-tag-folder-chevron {
  transform: rotate(90deg);
}

.source-folder-nav-item.line-tag-folder-depth-2 {
  margin-left: 24px;
  width: calc(100% - 24px);
  padding-block: 8px;
  color: var(--muted);
}

.source-bulk-bar {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.source-bulk-bar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.compact-column {
  width: 54px;
  text-align: center;
}

.source-list-panel table {
  table-layout: fixed;
}

.source-list-panel th,
.source-list-panel td {
  vertical-align: middle;
}

.source-list-panel th:nth-child(1),
.source-list-panel td:nth-child(1) {
  width: 48px;
}

.source-list-panel th:nth-child(2),
.source-list-panel td:nth-child(2) {
  width: 30%;
}

.source-list-panel th:nth-child(3),
.source-list-panel td:nth-child(3) {
  width: 28%;
}

.source-list-panel th:nth-child(4),
.source-list-panel td:nth-child(4) {
  width: 84px;
}

.source-list-panel th:nth-child(5),
.source-list-panel td:nth-child(5) {
  width: 92px;
}

.source-list-panel .compact-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.source-list-panel .compact-buttons .button {
  width: 100%;
  padding-inline: 8px;
}

.folder-manager {
  margin-top: 16px;
}

.folder-add-row {
  align-items: flex-end;
  margin-bottom: 12px;
}

.folder-add-row input {
  max-width: 280px;
}

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

.folder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.folder-row input {
  min-height: 36px;
  min-width: 0;
}

.folder-row .pill {
  justify-content: center;
  min-width: 0;
  padding-inline: 6px;
  text-align: center;
}

.folder-row .button {
  grid-column: 1 / -1;
  min-width: 0;
  padding-inline: 8px;
}

.qr-preview {
  display: grid;
  place-items: center;
  min-height: 228px;
  margin: 14px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  text-align: center;
}

.qr-preview img {
  width: min(220px, 100%);
  height: auto;
  image-rendering: pixelated;
}

.qr-download-link[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.55;
}

.subpanel {
  margin: 16px 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.commerce-toolbar {
  margin-bottom: 16px;
}

.commerce-page-heading,
.commerce-orders-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.commerce-page-heading {
  margin-bottom: 16px;
}

.commerce-page-heading h2,
.commerce-orders-heading h2 {
  margin: 0;
}

.commerce-public-actions,
.commerce-history-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.entry-link-control {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.entry-link-status {
  margin-top: 10px;
}

.entry-copy-url {
  display: block;
  width: 100%;
  margin: 8px 0 14px;
}

.commerce-summary-grid .metric {
  min-height: 126px;
}

.commerce-summary-grid .metric small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}

.commerce-orders-panel {
  margin-top: 18px;
}

.commerce-automation-panel {
  display: grid;
  gap: 16px;
}

.commerce-message-guard {
  margin: 0;
}

.commerce-automation-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.commerce-automation-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.commerce-automation-form .inline-check {
  display: inline-flex;
  justify-self: start;
}

.commerce-automation-body-field textarea {
  min-height: 190px;
  resize: vertical;
}

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

.commerce-placeholder-row small {
  color: var(--muted);
}

.commerce-staff-notification-section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  margin-top: 6px;
  padding-top: 20px;
}

.commerce-staff-notification-heading h3 {
  margin: 0;
}

.commerce-staff-recipient-list,
.commerce-staff-recipient-candidates {
  display: grid;
  gap: 8px;
}

.commerce-staff-recipient-card,
.commerce-staff-recipient-candidate {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px;
}

.commerce-staff-recipient-identity {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.commerce-staff-recipient-identity > div,
.commerce-staff-recipient-candidate > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.commerce-staff-recipient-identity strong,
.commerce-staff-recipient-candidate strong,
.commerce-staff-recipient-identity small,
.commerce-staff-recipient-candidate small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-staff-recipient-identity small,
.commerce-staff-recipient-candidate small {
  color: var(--muted);
  font-size: 12px;
}

.commerce-staff-recipient-avatar {
  align-items: center;
  background: #d1fae5;
  border-radius: 50%;
  color: #065f46;
  display: flex;
  flex: 0 0 auto;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  object-fit: cover;
  overflow: hidden;
  width: 42px;
}

.commerce-staff-recipient-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.commerce-staff-recipient-add {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.commerce-staff-recipient-add > summary {
  cursor: pointer;
  font-weight: 800;
}

.commerce-staff-recipient-add[open] > summary {
  margin-bottom: 12px;
}

.commerce-staff-recipient-search {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 10px;
}

.commerce-staff-recipient-search input {
  min-width: 0;
  width: 100%;
}

.commerce-staff-notification-audit-table table {
  min-width: 760px;
}

.commerce-customer-search {
  width: min(320px, 100%);
}

.commerce-customer-search span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.commerce-history-ranges {
  margin: 14px 0;
}

.commerce-history-ranges .button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.commerce-orders-table {
  min-width: 700px;
}

.commerce-orders-table td {
  vertical-align: middle;
}

.commerce-customer-cell {
  font-weight: 700;
}

.button.danger {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

.button.danger:hover,
.button.danger:focus-visible {
  border-color: #8f1c13;
  background: #8f1c13;
}

.commerce-order-action {
  min-width: 150px;
  white-space: nowrap;
}

.line-tag-dialog.commerce-refund-dialog {
  gap: 12px;
  padding: 16px;
  width: min(520px, calc(100vw - 32px));
}

.commerce-refund-body {
  display: grid;
  gap: 12px;
  padding: 0;
}

.commerce-refund-summary {
  display: grid;
  gap: 0;
  margin: 0;
}

.commerce-refund-summary div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.commerce-refund-summary dt {
  color: var(--muted);
}

.commerce-refund-summary dd {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.commerce-refund-warning {
  margin: 0;
  color: #9b2c22;
  line-height: 1.6;
}

.commerce-refund-dialog .result-box {
  min-height: 0;
  margin: 0;
  padding: 10px 12px;
  color: var(--text);
  white-space: normal;
}

.commerce-refund-actions {
  padding: 0;
}

.commerce-action-row,
.commerce-env-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.commerce-status-list {
  margin-top: 0;
}

.commerce-env-switch,
.commerce-filter-grid {
  margin-bottom: 14px;
}

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

.muted-text {
  color: var(--muted);
  font-size: 12px;
}

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

.compact-filter {
  display: grid;
  gap: 4px;
  min-width: min(280px, 100%);
}

.compact-filter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.compact-filter input {
  min-width: 0;
}

.compact-heading {
  margin-bottom: 12px;
}

.task-list,
.plain-list {
  margin: 0;
  padding-left: 22px;
  line-height: 1.8;
}

.warning-panel {
  border-color: #f2c98b;
}

.two-column,
.settings-grid,
.form-grid,
.single-column,
.status-lane-grid,
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.two-column > .panel {
  min-width: 0;
}

.status-lane-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.status-lane {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.status-lane span,
.status-lane small {
  color: var(--muted);
  font-size: 12px;
}

.status-lane strong {
  font-size: 22px;
}

.reservation-public-link-panel,
.reservation-minimal-panel,
.reservation-test-panel,
.reservation-followup-grid,
.reservation-command-grid,
.reservation-google-summary {
  margin-bottom: 16px;
}

.reservation-public-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.reservation-public-link input {
  min-width: 0;
}

@media (max-width: 680px) {
  .entry-link-control,
  .commerce-public-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .entry-link-control .button,
  .commerce-public-actions .button {
    width: 100%;
  }
}

.reservation-data-controls,
.reservation-data-legend,
.reservation-test-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.reservation-test-summary {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.reservation-minimal-form {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.2fr) repeat(2, minmax(140px, 0.75fr)) minmax(120px, 0.5fr) minmax(170px, 0.85fr);
  gap: 12px;
  align-items: end;
}

.reservation-public-sync-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(150px, 0.8fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.reservation-followup-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.reservation-store-notification-form {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.friend-staff-notification-options {
  border-top: 1px solid var(--line, #d8e2ed);
  margin-top: 20px;
  padding-top: 16px;
}

.reservation-store-notification-form img {
  border-radius: 50%;
  object-fit: cover;
}

.reservation-template-reference {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.reservation-template-reference strong {
  font-size: 13px;
}

.reservation-template-reference span {
  color: var(--muted);
  font-size: 12px;
}

.reservation-message-automation-panel {
  margin-bottom: 16px;
}

.reservation-message-guard {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.reservation-message-guard strong {
  font-size: 13px;
}

.reservation-message-guard span {
  color: var(--muted);
  font-size: 12px;
}

.reservation-automation-editor-heading {
  display: grid;
  grid-template-columns: minmax(220px, 360px);
  gap: 12px;
  align-items: end;
  margin: 16px 0 10px;
}

.reservation-workflow-notification-table {
  margin-bottom: 12px;
}

.reservation-workflow-notification-table table {
  min-width: 880px;
}

.reservation-message-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.reservation-message-summary-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.reservation-message-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-message-summary-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
}

.reservation-placeholder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.reservation-message-settings-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr) minmax(220px, 0.9fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.reservation-message-settings-grid .wide-field {
  grid-column: span 2;
}

.reservation-message-settings-grid .full-field {
  grid-column: 1 / -1;
}

.setting-check {
  min-height: 42px;
  align-items: center;
}

.inline-fields {
  display: grid;
  grid-template-columns: minmax(70px, 0.45fr) minmax(120px, 1fr);
  gap: 8px;
}

.reservation-end-preview {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  align-content: center;
}

.reservation-end-preview span,
.reservation-minimal-summary span {
  color: var(--muted);
  font-size: 12px;
}

.reservation-end-preview strong {
  font-size: 20px;
}

.reservation-minimal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.reservation-minimal-summary span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 6px 10px;
}

.reservation-workspace-tabs,
.commerce-workspace-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #f8fafc;
}

.reservation-workspace-tab,
.commerce-workspace-tab {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #475467;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  min-height: 36px;
  padding: 8px 12px;
}

.reservation-workspace-tab.is-active,
.commerce-workspace-tab.is-active {
  background: #ffffff;
  color: var(--teal-dark);
  box-shadow: 0 1px 4px rgba(31, 41, 55, 0.12);
}

#view-reservations > .reservation-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#view-reservations > .reservation-workspace-tabs .reservation-workspace-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.reservation-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  padding: 2px 6px;
  background: #fff4d6;
  color: #7a4304;
  font-size: 11px;
  font-weight: 900;
}

.commerce-workspace-note {
  margin-bottom: 16px;
}

[data-reservation-panel][hidden],
[data-commerce-panel][hidden] {
  display: none !important;
}

.inline-check {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.inline-check input {
  width: auto;
  margin: 0;
}

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

.line-delivery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #f8fafc;
}

.line-delivery-tab {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #475467;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  min-height: 36px;
  padding: 8px 12px;
}

.line-delivery-tab.is-active {
  background: #ffffff;
  color: var(--teal-dark);
  box-shadow: 0 1px 4px rgba(31, 41, 55, 0.12);
}

.line-delivery-focus-note {
  border: 1px solid #c7d7fe;
  border-radius: 8px;
  background: #eef4ff;
  color: #344054;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.line-delivery-panel,
.line-delivery-assets-shell {
  display: none;
}

.line-delivery-panel.is-active {
  display: block;
}

.line-compose-panel.is-active,
.subpanel.line-delivery-panel.is-active,
.step-delivery-planner.line-delivery-panel.is-active,
.form-grid.line-delivery-panel.is-active,
.mini-card.line-delivery-panel.is-active {
  display: grid;
}

.line-compose-panel {
  gap: 12px;
}

.line-compose-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.line-compose-shell-minimal {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
}

.line-audience-field,
.line-schedule-field {
  display: grid;
  gap: 8px;
}

.line-audience-trigger {
  width: 100%;
  min-height: 62px;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
}

.line-audience-trigger:hover,
.line-audience-trigger:focus-visible {
  border-color: var(--teal);
  outline: none;
}

.line-audience-trigger span {
  font-size: 15px;
  font-weight: 900;
}

.line-audience-trigger small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.line-audience-quick-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.line-audience-quick-choice {
  min-height: 44px;
  border: 1px solid #cfd7e3;
  border-radius: 6px;
  background: #ffffff;
  color: #344054;
  cursor: pointer;
  font-weight: 800;
  padding: 8px 10px;
}

.line-audience-quick-choice:hover,
.line-audience-quick-choice:focus-visible,
.line-audience-quick-choice.is-active {
  border-color: var(--teal);
  background: #edf8f6;
  color: #066c63;
  outline: none;
}

.line-audience-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.line-audience-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: #eef2f6;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
}

.line-audience-chip.is-exclude {
  background: #fff1f0;
  color: #a43832;
}

.line-audience-summary-card {
  position: sticky;
  top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  align-items: center;
  justify-items: center;
  padding: 20px 16px;
  text-align: center;
}

.line-audience-ring {
  --audience-percent: 0;
  width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 57%, transparent 58%),
    conic-gradient(var(--teal) calc(var(--audience-percent) * 1%), #e5e9ef 0);
  display: grid;
  place-items: center;
}

.line-audience-ring strong {
  color: #102a43;
  font-size: 28px;
  letter-spacing: 0;
}

.line-audience-ring.is-zero {
  background:
    radial-gradient(circle at center, #ffffff 0 57%, transparent 58%),
    conic-gradient(#d14343 100%, #e5e9ef 0);
}

.line-audience-summary-copy {
  display: grid;
  gap: 5px;
}

.line-audience-summary-copy > span,
.line-audience-summary-copy small {
  color: var(--muted);
  font-size: 12px;
}

.line-audience-summary-copy > strong {
  color: #102a43;
  font-size: 24px;
}

.line-audience-summary-copy p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
}

.line-schedule-selects {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(92px, 0.8fr) minmax(92px, 0.8fr) minmax(82px, 0.7fr) minmax(82px, 0.7fr);
  gap: 8px;
}

.line-compose-main,
.line-compose-side,
.line-compose-mini-panel {
  min-width: 0;
}

.line-compose-main,
.line-compose-mini-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.line-compose-side {
  display: grid;
  gap: 12px;
}

.line-compose-section-heading {
  display: grid;
  gap: 3px;
}

.line-compose-section-heading h3 {
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
}

.line-compose-section-heading span,
.line-test-safe-note,
.line-compose-tracking-status,
.line-compose-tracking-list small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.line-compose-target-count {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
}

.line-compose-target-count span {
  color: var(--muted);
  font-size: 12px;
}

.line-compose-target-count strong {
  font-size: 22px;
}

.line-compose-tracking {
  border-block: 1px solid #d7dee8;
  display: grid;
  gap: 10px;
  padding-block: 14px;
}

.line-compose-tracking-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.line-compose-tracking-heading > strong {
  color: var(--accent-dark);
  font-size: 13px;
}

.line-compose-tracking-list {
  display: grid;
  gap: 8px;
}

.line-compose-tracking-list article {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.line-compose-tracking-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.line-compose-tracking-list strong {
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.visually-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.visually-hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.line-image-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.line-image-picker span {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #f8fafc;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}

.line-image-auto-tag {
  display: grid;
  gap: 4px;
  border: 1px solid #b7dfd7;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f0fdfa;
  color: #134e4a;
}

.line-image-auto-tag > span {
  font-size: 12px;
  font-weight: 700;
}

.line-image-auto-tag strong,
.line-image-auto-tag small {
  overflow-wrap: anywhere;
}

.line-template-select-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.line-template-select-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.line-template-select-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.line-template-select-summary strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-template-select-summary small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.line-template-usage-preview {
  display: grid;
  gap: 10px;
  border: 1px solid #b8d6ce;
  border-radius: 8px;
  background: #f1fbf8;
  padding: 12px;
}

.line-template-usage-preview[hidden] {
  display: none;
}

.line-template-usage-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.line-template-usage-head span {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.line-template-usage-head strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.line-template-usage-preview p {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  border: 1px solid #cde4df;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font-size: 13px;
  line-height: 1.65;
  padding: 10px;
  white-space: pre-wrap;
}

.line-template-usage-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.line-template-usage-extras span {
  border: 1px solid #b8d6ce;
  border-radius: 999px;
  background: #ffffff;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.line-compose-main.is-template-mode #lineCampaignTitleField,
.line-compose-main.is-template-mode #lineDirectBodyField,
.line-compose-main.is-template-mode #lineReservationUrlField,
.line-compose-main.is-template-mode #lineImageLinkUrlField,
.line-compose-main.is-template-mode #lineImageAutoTagField,
.line-compose-main.is-template-mode #lineImageUrlField,
.line-compose-main.is-template-mode #lineCreativePreview {
  display: none !important;
}

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

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
}

.modal-backdrop[hidden] {
  display: none;
}

.line-template-block-editor {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.line-template-block-list {
  display: grid;
  gap: 10px;
}

.line-template-block-row {
  display: grid;
  gap: 10px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.line-template-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.line-template-block-head strong {
  font-size: 13px;
}

.line-template-block-actions {
  display: flex;
  gap: 6px;
}

.line-template-block-actions .button {
  min-width: 38px;
  padding: 7px 9px;
}

.line-template-image-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.line-test-modal {
  z-index: 1200;
}

.line-test-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border: 1px solid #ccd9e5;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 32, 48, 0.24);
}

.line-test-dialog-head,
.line-test-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.line-test-dialog-head {
  border-bottom: 1px solid #dbe4ec;
}

.line-test-dialog-head h2,
.line-test-dialog-head p,
.line-test-section-head h3,
.line-test-section-head p,
.line-test-confirmation h3 {
  margin: 0;
}

.line-test-dialog-head p,
.line-test-section-head p,
.line-test-auth p,
.line-test-management .field-note {
  color: #607187;
  font-size: 13px;
}

.line-test-auth,
.line-test-dialog-body {
  padding: 18px 20px;
}

.line-test-auth {
  background: #f5f8fa;
  border-bottom: 1px solid #dbe4ec;
}

.line-test-auth-form,
.line-test-section-head,
.line-test-register-grid {
  display: flex;
  align-items: end;
  gap: 10px;
}

.line-test-auth-form input {
  flex: 1;
}

.line-test-dialog-body {
  display: grid;
  gap: 16px;
}

.line-test-recipient-panel,
.line-test-management,
.line-test-confirmation,
.line-test-result {
  border: 1px solid #d5e0e9;
  border-radius: 8px;
  padding: 14px;
}

.line-test-recipient-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.line-test-recipient-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d5e0e9;
  border-radius: 6px;
}

.line-test-recipient-row strong,
.line-test-recipient-row small {
  display: block;
}

.line-test-recipient-row small {
  color: #607187;
}

.line-test-register-grid {
  margin-top: 12px;
}

.line-test-register-grid label {
  flex: 1;
  min-width: 0;
}

.line-test-candidate-picker {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border-top: 1px solid #d5e0e9;
  padding-top: 12px;
}

.line-test-candidate-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.line-test-candidate-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.line-test-candidate-row {
  display: grid;
  grid-template-columns: 24px 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid #d5e0e9;
  border-radius: 6px;
  padding: 8px 10px;
}

.line-test-candidate-row strong,
.line-test-candidate-row small {
  display: block;
}

.line-test-candidate-row small {
  color: #607187;
}

.line-test-candidate-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e8f3f1;
  color: #0f766e;
  display: grid;
  object-fit: cover;
  place-items: center;
  font-weight: 900;
}

.line-test-confirmation dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}

.line-test-confirmation dl div {
  padding: 10px;
  background: #f5f8fa;
  border-radius: 6px;
}

.line-test-confirmation dt {
  color: #607187;
  font-size: 12px;
}

.line-test-confirmation dd {
  margin: 4px 0 0;
  font-weight: 700;
}

.line-test-result.is-success {
  border-color: #99d7ca;
  background: #edf9f6;
}

.line-test-result.is-error {
  border-color: #efb2ae;
  background: #fff3f2;
}

.line-test-dialog-actions {
  justify-content: flex-end;
  border-top: 1px solid #dbe4ec;
}

@media (max-width: 720px) {
  .tap-measurement-panel .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .tap-measurement-panel .compact-filter {
    min-width: 0;
    width: 100%;
  }

  .line-test-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .line-test-dialog-head,
  .line-test-dialog-actions,
  .line-test-auth,
  .line-test-dialog-body {
    padding: 14px;
  }

  .line-test-auth-form,
  .line-test-register-grid,
  .line-test-candidate-search {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .line-test-confirmation dl {
    grid-template-columns: 1fr;
  }

  .line-test-dialog-actions .button {
    flex: 1;
  }
}

.line-audience-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1180px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.24);
}

.line-audience-dialog-head,
.line-audience-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}

.line-audience-dialog-head h2 {
  margin: 0;
  color: #344054;
  font-size: 26px;
  line-height: 1.25;
}

.line-audience-mode-row,
.line-audience-scope-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 18px 14px;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  padding: 12px;
}

.line-audience-mode,
.line-audience-scope,
.line-audience-menu-item,
.line-audience-option {
  border: 1px solid #e3e8ef;
  border-radius: 6px;
  background: #ffffff;
  color: #475467;
  cursor: pointer;
  font-weight: 900;
}

.line-audience-mode,
.line-audience-scope {
  min-height: 48px;
  padding: 10px 12px;
  text-align: center;
}

.line-audience-mode.is-active,
.line-audience-scope.is-active,
.line-audience-condition-section.is-primary h3,
.line-audience-dialog-actions .button.primary {
  background: #11c466;
  color: #ffffff;
}

.line-audience-dialog-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 28px;
  min-height: 0;
  overflow: auto;
  padding: 0 18px 18px;
}

.line-audience-menu,
.line-audience-condition-section {
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.line-audience-menu {
  align-content: start;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.line-audience-menu-item {
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
}

.line-audience-menu-item.is-active,
.line-audience-option.is-selected {
  border-color: #11c466;
  color: #0f8f4b;
}

.line-audience-condition-board {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.line-audience-condition-section {
  display: grid;
  gap: 14px;
  min-height: 170px;
  padding: 14px;
}

.line-audience-condition-section h3 {
  margin: 0;
  border-radius: 6px;
  background: #f2f4f7;
  color: #475467;
  font-size: 15px;
  line-height: 1.45;
  padding: 10px 12px;
  text-align: center;
}

.line-audience-condition-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.line-audience-condition-heading h3 {
  flex: 1;
}

.line-audience-condition-heading > strong {
  color: #0f766e;
  font-size: 13px;
  white-space: nowrap;
}

.line-audience-selected-box {
  min-height: 46px;
  border: 1px dashed #b7c0ce;
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  font-weight: 900;
  padding: 12px;
}

.line-audience-selected-box.is-muted {
  color: var(--muted);
  text-align: center;
}

.line-audience-match-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  padding: 10px 12px;
}

.line-audience-match-row > span {
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.line-audience-match-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.line-audience-option-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.line-audience-option {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  text-align: left;
}

.line-audience-option::before {
  content: "□";
  color: #667085;
  font-size: 18px;
  line-height: 1;
}

.line-audience-option.is-selected::before {
  content: "✓";
  color: #0f8f4b;
}

.line-audience-option span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.line-audience-dialog-actions {
  justify-content: center;
  border-top: 1px solid #e3e8ef;
}

.line-audience-dialog-actions .button {
  min-width: 180px;
}

.line-template-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.24);
}

.line-template-dialog-head,
.line-template-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.line-template-dialog-head {
  border-bottom: 1px solid var(--line);
}

.line-template-dialog-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.line-template-dialog-head h2,
.line-template-dialog-head p,
.line-template-picker-folders h3,
.line-template-picker-preview h3,
.line-template-picker-list-head h3 {
  margin: 0;
}

.line-template-dialog-head h2 {
  color: #111827;
  font-size: 18px;
  line-height: 1.35;
}

.line-template-dialog-head p,
.line-template-picker-list-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.line-template-picker-layout {
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(280px, 1fr) minmax(280px, 1fr);
  min-height: 0;
}

.line-template-picker-folders,
.line-template-picker-list-panel,
.line-template-picker-preview {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 14px;
}

.line-template-picker-folders {
  border-right: 1px solid var(--line);
  background: #f8fafc;
}

.line-template-picker-list-panel {
  border-right: 1px solid var(--line);
}

.line-template-picker-folders h3,
.line-template-picker-preview h3,
.line-template-picker-list-head h3 {
  color: #111827;
  font-size: 14px;
}

.line-template-picker-list-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.line-template-picker-list,
.line-template-picker-preview > div {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.line-template-picker-list {
  max-height: 520px;
}

.line-template-picker-row {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.line-template-picker-row:hover,
.line-template-picker-row.is-selected {
  border-color: #79b8ac;
  background: #eef8f6;
}

.line-template-picker-row strong,
.line-template-picker-row span,
.line-template-picker-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-template-picker-row strong {
  color: #111827;
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}

.line-template-picker-row span,
.line-template-picker-row small,
.line-template-preview-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.line-template-picker-row small {
  white-space: nowrap;
}

.line-template-preview-title {
  color: #111827;
  font-size: 16px;
  line-height: 1.4;
}

.line-template-preview-body {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  color: #344054;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.line-template-preview-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.line-template-preview-extras span {
  border: 1px solid #b9d8d3;
  border-radius: 999px;
  padding: 4px 9px;
  background: #eef8f6;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.line-template-dialog-actions {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}

.line-compose-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.line-compose-flow article {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}

.line-compose-flow strong {
  font-size: 13px;
}

.line-compose-flow span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.line-compose-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.line-compose-status-grid article {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.line-compose-status-grid span,
.line-compose-preview span {
  color: var(--muted);
  font-size: 12px;
}

.line-compose-status-grid strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.line-compose-preview {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.line-compose-preview > div {
  display: grid;
  gap: 3px;
}

.line-compose-preview p {
  margin: 0;
  color: #344054;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.line-compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.line-delivery-edit-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #b9d8d3;
  border-radius: 8px;
  background: #eef8f6;
  color: var(--teal-dark);
  margin: 12px 0;
  padding: 10px 12px;
}

.line-delivery-edit-banner[hidden] {
  display: none;
}

.line-delivery-edit-banner strong,
.line-delivery-edit-banner span {
  display: block;
}

.line-delivery-edit-banner span {
  color: #344054;
  font-size: 12px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.line-compose-actions .button {
  min-width: 132px;
}

.button-row.line-delivery-panel.is-active {
  display: flex;
}

#view-line[data-delivery-active-tab="templates"] .line-delivery-assets-shell,
#view-line[data-delivery-active-tab="greeting"] .line-delivery-assets-shell,
#view-line[data-delivery-active-tab="steps"] .line-delivery-assets-shell {
  display: grid;
}

.line-delivery-assets-shell .line-foundation-grid {
  grid-template-columns: minmax(0, 1fr);
}

.template-folder-shell,
.tag-folder-shell {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 12px 0;
}

#view-line .template-folder-shell[data-line-delivery-panel].is-active {
  display: grid;
}

.template-folder-panel,
.template-list-panel,
.line-tag-library-panel {
  min-width: 0;
}

.template-library-preview {
  color: var(--muted);
  font-size: 12px;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-editor-panel,
.observed-tag-panel {
  margin-top: 14px;
}

.tag-management-shell {
  grid-template-columns: 220px minmax(0, 1fr);
  margin-top: 0;
}

.tag-management-folders,
.tag-management-list {
  min-width: 0;
}

.line-tag-table {
  table-layout: fixed;
  width: 100%;
}

.line-tag-table th:nth-child(1),
.line-tag-table td:nth-child(1) {
  overflow-wrap: anywhere;
  width: 32%;
}

.line-tag-table th:nth-child(2),
.line-tag-table td:nth-child(2) {
  width: 20%;
}

.line-tag-table th:nth-child(3),
.line-tag-table td:nth-child(3) {
  width: 18%;
}

.line-tag-table th:nth-child(4),
.line-tag-table td:nth-child(4) {
  width: 14%;
}

.line-tag-table th:nth-child(5),
.line-tag-table td:nth-child(5) {
  width: 16%;
  white-space: nowrap;
}

.line-tag-search {
  display: block;
  width: min(280px, 100%);
}

.line-tag-search input {
  margin: 0;
  width: 100%;
}

.line-tag-usage-label {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.line-tag-count-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #087f74;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tap-measurement-destination {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
  max-width: 360px;
  overflow-wrap: anywhere;
}

.line-tag-count-button:hover,
.line-tag-count-button:focus-visible {
  color: #065f58;
}

.line-tag-count-button:disabled {
  color: var(--muted);
  cursor: default;
  text-decoration: none;
}

.line-tag-reaction {
  display: grid;
  gap: 2px;
}

.line-tag-reaction span,
.line-tag-reaction small {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.line-tag-rename-button {
  min-width: 96px;
}

.line-tag-modal {
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.line-tag-dialog {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.22);
  display: grid;
  gap: 16px;
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  padding: 20px;
  width: min(620px, calc(100vw - 40px));
}

.line-tag-rename-dialog {
  width: min(480px, calc(100vw - 40px));
}

dialog.rich-menu-test-confirmation:not([open]) {
  display: none;
}

.rich-menu-test-confirmation::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.rich-menu-test-confirmation p {
  line-height: 1.8;
  margin: 0;
}

.line-tag-dialog-head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.line-tag-dialog-head h2,
.line-tag-dialog-head p {
  margin: 0;
}

.line-tag-dialog-head p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.line-tag-customer-list {
  display: grid;
  gap: 0;
  min-height: 120px;
  overflow-y: auto;
}

.line-tag-customer-row {
  appearance: none;
  align-items: center;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 10px 4px;
}

.line-tag-customer-row:hover,
.line-tag-customer-row:focus-visible {
  background: #f0fdfa;
  outline: none;
}

.line-tag-customer-row:disabled {
  cursor: default;
}

.diagnostic-details > summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}

.diagnostic-details[open] > summary {
  margin-bottom: 8px;
}

.diagnostic-section {
  margin-top: 18px;
  min-width: 0;
}

.diagnostic-section h3 {
  margin: 0 0 10px;
}

.line-tag-customer-row:last-child {
  border-bottom: 0;
}

.line-tag-customer-avatar {
  align-items: center;
  background: #d1fae5;
  border-radius: 50%;
  color: #065f46;
  display: flex;
  font-size: 14px;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  overflow: hidden;
  width: 40px;
}

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

.line-tag-customer-row strong,
.line-tag-customer-row span {
  display: block;
}

.line-tag-customer-row span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.line-tag-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.source-simple-create .source-issue-grid {
  grid-template-columns: minmax(240px, 1.5fr) minmax(180px, 1fr);
}

.source-simple-folders {
  grid-row: auto;
  position: static;
}

.source-simple-folders h2 {
  margin: 0 0 14px;
}

.source-simple-table th:nth-child(3),
.source-simple-table td:nth-child(3),
.source-simple-table th:nth-child(4),
.source-simple-table td:nth-child(4),
.source-simple-table th:nth-child(5),
.source-simple-table td:nth-child(5) {
  text-align: center;
  white-space: nowrap;
  width: 110px;
}

.source-simple-table th:nth-child(1),
.source-simple-table td:nth-child(1) {
  width: 220px;
}

.source-simple-table th:nth-child(2),
.source-simple-table td:nth-child(2) {
  width: 220px;
}

.source-simple-table th:nth-child(6),
.source-simple-table td:nth-child(6) {
  white-space: nowrap;
  width: 140px;
}

.source-simple-table th:nth-child(7),
.source-simple-table td:nth-child(7) {
  width: 88px;
}

.source-simple-table td:nth-child(2) {
  max-width: 220px;
}

.source-detail-button {
  min-width: 68px;
}

.source-detail-dialog {
  width: min(1180px, calc(100vw - 40px));
}

.source-detail-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 20px;
}

.source-detail-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-weight: 800;
  padding: 13px 16px 11px;
}

.source-detail-tabs button.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.source-detail-panel {
  min-height: 320px;
  overflow-y: auto;
  padding: 18px 20px 22px;
}

.source-detail-panel[hidden] {
  display: none;
}

.source-report-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.source-report-toolbar label {
  margin: 0;
  min-width: 170px;
}

.source-report-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  margin: 16px 0;
}

.source-report-kpis article {
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 13px;
}

.source-report-kpis span {
  color: var(--muted);
  font-size: 12px;
}

.source-report-kpis strong {
  font-size: 20px;
}

.source-report-table-wrap {
  max-height: 420px;
  overflow: auto;
}

.source-report-table {
  min-width: 720px;
}

.source-report-table th,
.source-report-table td {
  white-space: nowrap;
}

.source-message-builder {
  border: 1px solid var(--line);
  border-radius: 10px;
  grid-column: 1 / -1;
  padding: 12px;
}

.source-message-builder summary {
  cursor: pointer;
  font-weight: 800;
}

.source-message-meta {
  margin-top: 12px;
}

.source-message-blocks {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.source-message-block {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.source-message-block-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.source-message-block-actions {
  display: flex;
  gap: 5px;
}

.source-message-block-actions button {
  min-width: 36px;
  padding: 6px 9px;
}

.source-flow {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, auto);
  justify-content: start;
  margin: 20px 0;
  overflow-x: auto;
}

.source-flow article {
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  min-width: 150px;
  padding: 16px;
}

.source-flow article span {
  color: var(--muted);
  font-size: 12px;
}

.source-flow article strong {
  font-size: 22px;
}

.source-flow i {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.source-stop-reasons {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 16px;
}

.source-stop-reasons h3 {
  margin-top: 0;
}

.source-stop-reason-row,
.source-archived-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
}

.source-archived-panel summary {
  cursor: pointer;
  font-weight: 800;
}

.source-archived-list {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.source-detail-scroll {
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
}

.source-modal-overview {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 220px minmax(0, 1fr);
}

.source-modal-qr {
  min-height: 220px;
}

.source-modal-qr img {
  max-height: 200px;
  max-width: 200px;
}

.source-modal-stats {
  margin: 0;
}

.source-link-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.source-folder-move-dialog {
  width: min(460px, calc(100vw - 32px));
}

.source-folder-move-dialog > label {
  margin: 0;
}

.source-folder-move-actions {
  justify-content: flex-end;
}

.source-action-editor {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

.source-action-editor h3 {
  margin: 0;
}

.source-action-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.source-action-config-grid > label {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.source-template-order-preview {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  border: 1px dashed #b8c4d2;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.source-template-order-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--muted);
  font-size: 12px;
}

.source-template-order-row strong {
  color: var(--text);
}

.source-action-choice {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.source-action-choice legend {
  padding: 0 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.source-action-choice .radio-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0;
  padding: 7px 0;
  font-weight: 700;
}

.source-action-choice input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.source-action-diagnostics {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.source-action-diagnostics summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 640px) {
  .source-detail-dialog {
    width: calc(100vw - 20px);
  }

  .source-detail-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 0 10px;
  }

  .source-detail-tabs button {
    padding-inline: 12px;
    width: 100%;
  }

  .source-detail-panel {
    padding: 14px 12px 18px;
  }

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

  .source-report-toolbar {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .source-report-toolbar label {
    min-width: 0;
  }

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

  .source-link-actions .button {
    width: 100%;
  }

  .source-flow {
    align-items: stretch;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .source-flow i {
    text-align: center;
    transform: rotate(90deg);
  }

  .source-archived-row {
    align-items: stretch;
    flex-direction: column;
  }
}

.source-action-preview-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
}

.source-action-image-row,
.source-action-status-grid {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.source-action-status-grid {
  color: var(--muted);
  font-size: 12px;
  justify-content: space-between;
}

.source-followup-image-preview {
  align-items: center;
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 72px minmax(0, 1fr);
  padding: 10px;
}

.source-followup-image-preview img {
  height: 72px;
  object-fit: cover;
  width: 72px;
}

@media (max-width: 900px) {
  .template-folder-shell,
  .tag-folder-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .tag-management-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-simple-create .source-issue-grid,
  .source-modal-overview,
  .source-action-config-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-template-image-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .template-library-preview {
    max-width: 240px;
  }
}

.muted-text {
  color: var(--muted);
  font-size: 12px;
}

.delivery-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.delivery-summary-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}

.delivery-summary-grid span,
.delivery-lane header span,
.delivery-card-meta,
.delivery-card-body {
  color: var(--muted);
  font-size: 12px;
}

.delivery-summary-grid strong {
  font-size: 20px;
}

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

.delivery-board + .table-wrap {
  display: none;
}

.delivery-lane {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  min-width: 0;
}

.delivery-lane header {
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

.delivery-lane-list {
  min-height: 120px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.delivery-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.delivery-card-title {
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.delivery-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.delivery-card-body {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.delivery-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.delivery-history-tabs,
.delivery-list-toolbar,
.delivery-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
}

.delivery-history-tabs {
  justify-content: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 6px;
}

.delivery-history-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #475467;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
}

.delivery-history-tab.is-active {
  background: #ffffff;
  color: var(--teal-dark);
  box-shadow: 0 1px 4px rgba(31, 41, 55, 0.12);
}

.delivery-history-tab strong {
  min-width: 24px;
  border-radius: 999px;
  background: #e8f6f3;
  color: var(--teal-dark);
  font-size: 12px;
  padding: 2px 7px;
  text-align: center;
}

.delivery-list-toolbar {
  justify-content: flex-start;
}

.delivery-page-size {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.delivery-page-size select {
  width: auto;
  min-width: 88px;
}

.delivery-history-table-wrap {
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.delivery-history-table {
  min-width: 860px;
}

#view-line-delivery-history .panel,
#view-line-delivery-history .single-column {
  min-width: 0;
  max-width: 100%;
}

#cancelSelectedDeliveries {
  margin-left: 4px;
}

.delivery-history-table th,
.delivery-history-table td {
  vertical-align: middle;
}

.check-cell {
  width: 48px;
  text-align: center;
}

.delivery-image-cell {
  width: 76px;
}

.delivery-image-cell img,
.delivery-image-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  object-fit: cover;
}

.delivery-image-placeholder.has-image {
  border-color: #b9d8d3;
  background: #eef8f6;
  color: var(--teal-dark);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #eef2f6;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  white-space: nowrap;
}

.status-pending {
  border-color: #f2c98b;
  background: var(--amber-bg);
  color: #7a4304;
}

.status-error {
  border-color: #f0a6a0;
  background: var(--rose-bg);
  color: var(--rose);
}

.delivery-action-cell {
  position: relative;
  width: 64px;
}

.delivery-action-trigger {
  width: 34px;
  height: 34px;
  font-size: 17px;
  line-height: 1;
}

.delivery-action-menu {
  position: fixed;
  z-index: 2000;
  min-width: 170px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  padding: 6px;
}

.delivery-action-menu[hidden] {
  display: none;
}

.delivery-action-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #344054;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
  text-align: left;
}

.delivery-action-menu button:hover:not(:disabled) {
  background: #f1fbf9;
  color: var(--teal-dark);
}

.delivery-action-menu button:disabled {
  color: #98a2b3;
  cursor: not-allowed;
}

.delivery-action-menu .danger-text {
  color: var(--rose);
}

.delivery-audience-panel {
  display: grid;
  gap: 12px;
}

.line-audience-condition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.delivery-readiness-strip,
.delivery-readiness-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delivery-readiness-strip {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.delivery-readiness-strip span,
.delivery-readiness-chip {
  border: 1px solid #d7dee8;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  padding: 5px 9px;
}

.line-target-proof-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  display: grid;
  gap: 7px;
}

.line-target-proof-panel strong {
  font-size: 13px;
}

.line-target-proof-panel ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.line-target-proof-panel li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.line-migration-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.migration-check-card {
  border: 1px solid var(--line);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.migration-check-card.is-ready {
  border-left-color: #16a34a;
}

.migration-check-card span {
  font-weight: 800;
}

.migration-check-card small {
  color: var(--muted);
  line-height: 1.45;
}

.delivery-detail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  margin: 0 0 14px;
  display: grid;
  gap: 12px;
}

.delivery-detail-panel[hidden] {
  display: none;
}

.delivery-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.delivery-detail-body {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.compact-actions {
  margin-top: 10px;
}

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

.step-delivery-summary {
  margin-bottom: 0;
}

.step-delivery-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
  align-items: start;
}

.step-delivery-list,
.step-delivery-form,
.step-delivery-step {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.step-delivery-list,
.step-delivery-form {
  padding: 12px;
}

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

.step-plan-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 7px;
}

.step-plan-card.is-suggestion {
  border-style: dashed;
  background: #fffdf7;
}

.step-plan-title {
  font-weight: 900;
  overflow-wrap: anywhere;
}

.step-plan-meta,
.step-plan-steps {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.step-delivery-form {
  display: grid;
  gap: 12px;
}

.step-delivery-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.step-delivery-step {
  padding: 12px;
}

.step-delivery-step h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.line-foundation-panel {
  display: grid;
  gap: 14px;
}

.line-foundation-summary {
  margin-bottom: 0;
}

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

#view-line .mini-card[data-line-delivery-panel="greeting"] {
  grid-template-columns: minmax(0, 1fr);
}

#view-line .mini-card[data-line-delivery-panel="greeting"] > * {
  min-width: 0;
  max-width: 100%;
}

.message-preview {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mini-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.mini-card h3 {
  margin: 0;
  font-size: 15px;
}

.mini-card textarea {
  min-height: 112px;
}

#view-line [data-line-delivery-panel],
#view-line .line-delivery-assets-shell {
  display: none;
}

#view-line [data-line-delivery-panel].is-active {
  display: block;
}

#view-line .line-compose-panel.is-active,
#view-line .subpanel[data-line-delivery-panel].is-active,
#view-line .step-delivery-planner[data-line-delivery-panel].is-active,
#view-line .form-grid[data-line-delivery-panel].is-active,
#view-line .mini-card[data-line-delivery-panel].is-active {
  display: grid;
}

#view-line .button-row[data-line-delivery-panel].is-active {
  display: flex;
}

#view-line[data-delivery-active-tab="templates"] .line-delivery-assets-shell,
#view-line[data-delivery-active-tab="greeting"] .line-delivery-assets-shell,
#view-line[data-delivery-active-tab="qr-actions"] .line-delivery-assets-shell,
#view-line[data-delivery-active-tab="steps"] .line-delivery-assets-shell {
  display: grid;
}

.reservation-view-controls {
  margin: 0;
}

.reservation-primary-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.reservation-public-link-compact {
  margin-bottom: 12px;
}

.reservation-card-list,
.today-reservation-list,
.reservation-history-list,
.course-card-grid {
  display: grid;
  gap: 12px;
}

.reservation-card,
.today-reservation-item,
.reservation-history-item,
.course-card,
.week-reservation,
.timeline-reservation {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.reservation-card {
  display: grid;
  gap: 10px;
}

.reservation-card-header,
.reservation-card-footer,
.today-reservation-main,
.course-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reservation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 12px;
}

.reservation-status,
.course-badge,
.reservation-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
}

.reservation-source-badge {
  border: 1px solid #d0d5dd;
  background: #f8fafc;
  color: #475467;
}

.source-app {
  border-color: #9fd4c9;
  background: #e8f6f3;
  color: var(--teal-dark);
}

.source-test {
  border-color: #b8a6ff;
  background: #f1efff;
  color: #4b35a8;
}

.source-google,
.source-sync {
  border-color: #aac7ff;
  background: #eef4ff;
  color: #2453a6;
}

.source-sample {
  border-color: #f2c98b;
  background: var(--amber-bg);
  color: #7a4304;
}

.source-followup {
  border-color: #f0a6a0;
  background: var(--rose-bg);
  color: var(--rose);
}

.status-confirmed {
  border-color: #9fd4c9;
  background: #e8f6f3;
  color: var(--teal-dark);
}

.status-pending,
.status-request {
  border-color: #f2c98b;
  background: var(--amber-bg);
  color: #7a4304;
}

.status-cancel-request {
  border-color: #f0a6a0;
  background: var(--rose-bg);
  color: var(--rose);
}

.status-cancelled,
.status-rejected,
.status-denied {
  border-color: #e7a2a2;
  background: #fff0f0;
  color: #8f2d2d;
}

.status-muted {
  border-color: #d0d5dd;
  background: #eef2f6;
  color: #475467;
}

.status-google {
  border-color: #aac7ff;
  background: #eef4ff;
  color: #2453a6;
}

.status-followup {
  border-color: #f0a6a0;
  background: var(--rose-bg);
  color: var(--rose);
}

.table-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  word-break: break-word;
}

.course-teal {
  border-color: #9fd4c9;
  background: #f1fbf8;
  color: var(--teal-dark);
}

.course-blue {
  border-color: #aac7ff;
  background: #eef4ff;
  color: #2453a6;
}

.course-amber {
  border-color: #f2c98b;
  background: var(--amber-bg);
  color: #7a4304;
}

.course-gray {
  border-color: #d0d5dd;
  background: #eef2f6;
  color: #475467;
}

.today-reservation-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.today-reservation-time {
  color: var(--teal-dark);
  font-size: 14px;
}

.today-reservation-body {
  display: grid;
  gap: 6px;
}

.reservation-history-item {
  display: grid;
  gap: 8px;
}

.reservation-history-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.reservation-history-main time {
  color: var(--muted);
  font-size: 12px;
}

.course-card {
  display: grid;
  gap: 10px;
}

.course-card-meta {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  font-size: 13px;
}

.course-card-meta dt {
  color: var(--muted);
  font-weight: 800;
}

.course-card-meta dd,
.course-card p {
  margin: 0;
}

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

.reservation-calendar-board {
  min-height: 280px;
}

.reservation-calendar-links {
  margin-bottom: 16px;
}

.reservation-pending-table {
  min-width: 920px;
}

.reservation-pending-table th:nth-child(1),
.reservation-pending-table th:nth-child(2) {
  min-width: 180px;
}

.reservation-pending-table th:last-child,
.reservation-pending-table td:last-child {
  width: 1%;
  white-space: nowrap;
}

.reservation-date-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.reservation-date-controls .reservation-view-controls {
  margin-left: 2px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.icon-button:hover {
  border-color: #9fd4c9;
  color: var(--teal-dark);
}

.reservation-date-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 260px);
}

.reservation-date-current strong {
  min-width: 128px;
  font-size: 16px;
}

.reservation-date-current input {
  max-width: 160px;
  margin: 0;
}

.reservation-day-heading {
  margin-bottom: 10px;
  font-weight: 800;
}

.reservation-day-view {
  overflow-x: auto;
}

.reservation-timeline {
  display: grid;
  grid-template-columns: 72px minmax(300px, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  min-width: 390px;
}

.timeline-column-heading {
  min-height: 38px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
}

.timeline-google-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.timeline-hours {
  min-height: 1104px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 46px;
  border-bottom: 1px solid #eef2f6;
}

.timeline-row:last-child {
  border-bottom: 0;
}

.timeline-hour {
  display: block;
  height: 46px;
  border-bottom: 1px solid #eef2f6;
  padding: 12px 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.timeline-hour:last-child {
  border-bottom: 0;
}

.timeline-track {
  position: relative;
  min-height: 1104px;
  border-left: 1px solid var(--line);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 45px,
      #eef2f6 45px,
      #eef2f6 46px
    );
}

.timeline-slot {
  display: grid;
  gap: 6px;
  padding: 7px;
}

.timeline-reservation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
}

.timeline-reservation-block {
  position: absolute;
  left: 8px;
  right: 8px;
  min-height: 34px;
  overflow: hidden;
  align-content: start;
}

.timeline-reservation-block.reservation-history-only {
  left: 8px;
  right: auto;
  width: calc(34% - 10px);
  min-width: 112px;
  padding: 5px 7px;
  border-color: #e7a2a2;
  background: #fff0f0;
  color: #8f2d2d;
  font-size: 12px;
  z-index: 2;
}

.timeline-reservation-block.has-history-lane {
  left: calc(34% + 8px);
}

.timeline-track.has-split-calendar-lanes .timeline-reservation-block:not(.google-calendar-reservation) {
  right: calc(50% + 4px);
}

.timeline-track.has-split-calendar-lanes .timeline-reservation-block.google-calendar-reservation {
  left: calc(50% + 4px);
  right: 8px;
  z-index: 3;
}

.timeline-track.has-split-calendar-lanes .timeline-reservation-block.reservation-history-only {
  right: auto;
  width: calc(17% - 10px);
}

.timeline-track.has-split-calendar-lanes .timeline-reservation-block.has-history-lane:not(.google-calendar-reservation) {
  left: calc(17% + 8px);
}

.timeline-reservation-block.status-pending,
.week-reservation.status-pending {
  border-color: #d6a854;
  background: #fff4d6;
  color: #6f4300;
}

.timeline-reservation-block.status-confirmed,
.week-reservation.status-confirmed {
  border-color: #5fb6a7;
  background: #e4f6f0;
  color: #0b5e54;
}

.timeline-reservation-block.status-sync-error,
.week-reservation.status-sync-error {
  border-color: #e27b73;
  background: #fff0ef;
  color: #9c2f28;
}

.google-calendar-reservation {
  border-color: #aac7ff;
  background: #eef4ff;
  color: #2453a6;
}

.google-calendar-reservation span {
  font-weight: 800;
}

.google-reservation-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.google-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.month-google-list {
  display: grid;
  gap: 4px;
}

.month-google-reservation {
  display: grid;
  gap: 2px;
  border: 1px solid #aac7ff;
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 11px;
}

.month-google-reservation strong,
.month-google-reservation span {
  font-size: 11px;
}

.reservation-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 10px;
  overflow-x: auto;
}

.reservation-week-day {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.week-reservation {
  display: grid;
  gap: 5px;
  padding: 9px;
}

.week-reservation.reservation-history-only {
  justify-self: start;
  width: 72%;
  padding: 6px 7px;
  border-color: #e7a2a2;
  background: #fff0f0;
  color: #8f2d2d;
  font-size: 12px;
}

.reservation-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(108px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.reservation-month-day {
  display: grid;
  gap: 5px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.reservation-month-day.has-reservations {
  border-color: #9fd4c9;
  background: #f1fbf8;
}

.reservation-month-day:hover,
.reservation-month-day:focus-visible,
.reservation-month-day.is-selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(34 139 126 / 12%);
  outline: none;
}

.reservation-month-day:hover {
  transform: translateY(-1px);
}

.reservation-month-day span {
  font-size: 18px;
  font-weight: 800;
}

.reservation-month-day small {
  color: var(--muted);
  line-height: 1.5;
}

.reservation-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  overflow: auto;
  border-radius: 8px;
  background: #ffffff;
  padding: 22px;
  box-shadow: 0 24px 70px rgb(16 24 40 / 24%);
}

.reservation-staff-form,
.reservation-reschedule-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.reservation-staff-customer-field,
.reservation-customer-results,
.reservation-selected-customer,
.reservation-staff-preview,
.reservation-staff-status-note,
.reservation-direct-contact-note {
  grid-column: 1 / -1;
}

.reservation-staff-status-note {
  margin: -4px 0 14px;
  border-left: 3px solid #6fafa1;
  padding: 8px 10px;
  background: #f5fbf9;
  color: var(--muted);
  font-size: 12px;
}

.reservation-customer-results {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  margin: -4px 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.reservation-customer-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 9px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.reservation-customer-result:hover,
.reservation-customer-result:focus-visible {
  background: #eef8f6;
}

.reservation-selected-customer,
.reservation-staff-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 14px;
  border: 1px solid #9fd4c9;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f1fbf8;
}

.reservation-staff-preview span,
.reservation-selected-customer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-dialog-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

.reservation-detail-list {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0 0 18px;
}

.reservation-detail-list dt {
  color: var(--muted);
  font-weight: 800;
}

.reservation-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.reservation-delivery-audit {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
  border-top: 1px solid rgba(31, 41, 55, 0.12);
  padding-top: 12px;
}

.reservation-delivery-audit dt {
  color: var(--muted);
  font-weight: 800;
}

.reservation-delivery-audit dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.reservation-message-audit-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  border-top: 1px solid rgba(31, 41, 55, 0.12);
  padding-top: 12px;
}

.reservation-message-audit-preview > span,
.reservation-message-audit-preview > small {
  color: var(--muted);
}

.reservation-message-audit-preview > small,
.reservation-message-audit-preview > pre {
  grid-column: 1 / -1;
}

.reservation-message-audit-preview > pre {
  max-height: 320px;
  margin: 0;
  overflow: auto;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  color: var(--text);
  font: inherit;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reservation-detail-actions {
  margin-top: 16px;
}

.reservation-direct-contact-note {
  margin: 0 0 14px;
  border-left: 3px solid #d6a854;
  padding: 9px 11px;
  background: #fffaf0;
  color: #6f4300;
  font-size: 13px;
}

.customer-chat-link {
  margin-left: auto;
}

.single-column {
  grid-template-columns: minmax(0, 980px);
}

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

label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  padding: 11px 12px;
  background: #ffffff;
  color: var(--text);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  padding: 10px 14px;
  background: #ffffff;
  color: #344054;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.button.primary {
  border-color: var(--teal);
  background: var(--teal);
  color: #ffffff;
}

.button.secondary {
  border-color: #9fb6c3;
}

.button.danger {
  border-color: #f0a6a0;
  background: var(--rose-bg);
  color: var(--rose);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.button.is-disabled {
  pointer-events: none;
  opacity: 0.55;
}

.result-box {
  min-height: 150px;
  margin: 16px 0 0;
  overflow: auto;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  padding: 12px;
  background: #101828;
  color: #e4e7ec;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.compact-result {
  min-height: 92px;
}

.human-result {
  display: grid;
  gap: 12px;
  background: #ffffff;
  color: var(--text);
  white-space: normal;
}

.result-safe,
.result-success {
  border-color: #9fd4c9;
  background: #f1fbf8;
}

.result-error {
  border-color: #f0a6a0;
  background: var(--rose-bg);
}

.result-title {
  display: block;
  font-size: 16px;
}

.result-summary {
  margin: 0;
}

.result-list {
  padding-top: 10px;
  border-top: 1px solid rgba(31, 41, 55, 0.12);
}

.result-details {
  color: var(--muted);
  font-size: 12px;
}

.result-details pre {
  margin: 8px 0 0;
  overflow: auto;
  border-radius: 8px;
  padding: 10px;
  background: #101828;
  color: #e4e7ec;
  white-space: pre-wrap;
}

.creative-preview {
  display: grid;
  min-height: 152px;
  place-items: center;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px dashed #b9c5d4;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  text-align: center;
}

.creative-preview a,
.creative-preview img {
  display: block;
  width: 100%;
}

.creative-preview img {
  max-height: 260px;
  object-fit: contain;
  background: #ffffff;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap {
  overflow-x: auto;
}

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

th {
  color: var(--muted);
  font-size: 12px;
}

.empty-cell {
  color: var(--muted);
  text-align: center;
}

.empty-state {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.definition-list {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px 12px;
  margin: 0;
}

.definition-list.wide-list {
  grid-template-columns: 140px minmax(0, 1fr);
}

.definition-list dt {
  color: var(--muted);
  font-weight: 700;
}

.definition-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

code {
  border-radius: 6px;
  padding: 2px 5px;
  background: #eef2f6;
  color: #344054;
  font-size: 12px;
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.check-row input {
  width: auto;
}

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

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

.workflow-list span {
  color: var(--muted);
  line-height: 1.6;
}

.operation-map-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.line-chat-lockbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 12px 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.line-chat-lockbar strong,
.line-chat-lockbar span {
  display: block;
}

.line-chat-lockbar span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.line-chat-shell {
  display: grid;
  grid-template-columns: 280px minmax(360px, 1fr);
  min-height: calc(100vh - 170px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.line-chat-list-panel,
.line-chat-profile-panel {
  min-width: 0;
  background: #f8fafc;
}

.line-chat-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 1px solid var(--line);
}

.line-chat-profile-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  border-left: 1px solid var(--line);
  padding: 16px;
}

.line-chat-list-head {
  display: grid;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 14px;
}

.line-chat-list-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.line-chat-list-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.line-chat-list-filters {
  display: grid !important;
  gap: 8px !important;
}

.line-chat-list-filters input,
.line-chat-list-filters select {
  width: 100%;
  min-width: 0;
}

.line-chat-thread-list,
.commerce-order-list {
  display: grid;
  gap: 4px;
}

.line-chat-thread-list {
  max-height: calc(100vh - 275px);
  overflow: auto;
  padding: 8px;
}

.line-chat-pagination {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  background: #ffffff;
}

.line-chat-pagination > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.line-chat-pagination > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(34px, 1fr)) auto repeat(2, minmax(34px, 1fr));
  align-items: center;
  gap: 5px;
}

.line-chat-pagination .button {
  min-width: 0;
  padding: 6px 8px;
}

.line-chat-pagination strong {
  min-width: 48px;
  color: var(--text);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.line-chat-thread {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.line-chat-thread:hover,
.line-chat-thread.is-active {
  background: #e7f2f1;
}

.line-chat-thread strong,
.line-chat-thread span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-chat-thread-title-row {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.line-chat-thread-title-row strong {
  flex: 0 1 auto;
}

.line-chat-test-badge {
  flex: 0 0 auto;
  border: 1px solid #f3c463;
  border-radius: 999px;
  padding: 1px 6px;
  background: #fff7db;
  color: #805b00;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.4;
}

.line-chat-thread span,
.line-chat-message-meta,
.commerce-order-card span {
  color: var(--muted);
  font-size: 12px;
}

.line-chat-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #06c755;
  color: #ffffff;
  font-weight: 900;
}

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

.line-chat-avatar.large {
  width: 58px;
  height: 58px;
  margin: 0 auto 8px;
  font-size: 22px;
}

.line-chat-room-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: #eff4f7;
}

.line-chat-room-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  background: #ffffff;
}

.line-chat-room-head h2,
.line-chat-room-head p {
  margin: 0;
}

.line-chat-room-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.line-chat-message-list {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 18px;
}

.line-chat-load-older {
  justify-self: center;
  min-width: 220px;
  margin-bottom: 4px;
}

.line-chat-status {
  min-height: 36px;
  border-top: 1px solid var(--line);
  padding: 8px 14px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
}

.line-chat-status .result-title,
.line-chat-status .result-summary {
  display: block;
  margin: 0;
}

.line-chat-status .result-title {
  color: var(--text);
  font-size: 12px;
}

.line-chat-status.result-success {
  background: #f0fdf4;
  color: #166534;
}

.line-chat-status.result-error {
  background: #fff1f2;
  color: #9f1239;
}

.line-chat-message {
  display: grid;
  gap: 6px;
  justify-self: end;
  max-width: min(520px, 88%);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 12px;
  background: #d9f5df;
  color: #123026;
}

.line-chat-message-inbound,
.line-chat-message-internal {
  justify-self: start;
  border-radius: 16px 16px 16px 4px;
  background: #ffffff;
}

.line-chat-message p,
.commerce-order-card p {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.line-chat-message img {
  max-width: min(260px, 100%);
  border-radius: 8px;
}

.line-chat-message video,
.line-chat-message audio {
  max-width: min(420px, 100%);
}

.line-chat-tag-panel {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  background: #ffffff;
}

.line-chat-tag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.line-chat-tag-head strong,
.line-chat-tag-head span {
  display: block;
}

.line-chat-tag-head span,
.line-chat-tag-empty,
.line-chat-tag-result {
  color: var(--muted);
  font-size: 12px;
}

.line-chat-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.line-chat-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid #b7dfd7;
  border-radius: 999px;
  padding: 4px 7px 4px 10px;
  background: #e7f7f3;
  color: #134e4a;
  font-size: 12px;
  font-weight: 800;
}

.line-chat-tag-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-chat-tag-chip button {
  border: 0;
  border-radius: 999px;
  padding: 2px 6px;
  background: #ffffff;
  color: #0f766e;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.line-chat-tag-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.line-chat-tag-result {
  margin: 0;
}

.line-chat-tag-result.result-error {
  color: #9f1239;
}

.line-chat-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 12px;
  background: #ffffff;
}

.line-chat-compose-tools {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.line-chat-compose-tools .icon-button {
  width: 44px;
  height: 44px;
  font-size: 13px;
}

.line-chat-compose-tools .icon-button.is-active {
  border-color: var(--teal);
  background: #e7f2f1;
  color: var(--teal-dark);
}

.line-chat-compose-body {
  display: grid;
  gap: 8px;
}

.line-chat-compose-body textarea,
.line-chat-compose-body input {
  min-height: 44px;
}

.line-chat-image-drop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  border: 1px dashed #9fb2c3;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.line-chat-image-drop.is-dragging {
  border-color: var(--teal);
  background: #e7f2f1;
}

.line-chat-image-drop strong,
.line-chat-image-drop span {
  display: block;
  min-width: 0;
}

.line-chat-image-drop span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.line-chat-image-preview {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

.line-chat-image-preview img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  background: #eef2f6;
}

.line-chat-image-preview span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-chat-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.line-chat-profile-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  text-align: center;
}

.line-chat-profile-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.line-chat-profile-card span {
  color: var(--muted);
  font-size: 12px;
}

.line-chat-profile-list {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.line-chat-profile-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.line-chat-profile-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.commerce-orders-summary {
  margin-bottom: 18px;
}

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

.commerce-order-controls {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(160px, 1.4fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.commerce-order-controls input,
.commerce-order-controls select {
  min-width: 0;
}

.commerce-order-history {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.commerce-order-history-item {
  display: grid;
  grid-template-columns: minmax(92px, 0.7fr) minmax(160px, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #dfe5ed;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 9px;
}

.commerce-order-history-item strong {
  font-size: 12px;
}

.commerce-order-history-item span {
  color: var(--muted);
  font-size: 12px;
}

.rich-menu-intro .panel-heading {
  align-items: flex-start;
}

.rich-menu-intro h2 {
  margin: 10px 0 4px;
  font-size: 24px;
}

.rich-menu-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.rich-menu-shell.has-action-panel {
  grid-template-columns: 260px minmax(0, 1fr) minmax(320px, 0.74fr);
}

.rich-menu-publish-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.rich-menu-publish-panel .button-row {
  margin: 0;
}

.rich-menu-simple-test {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.rich-menu-current-publication {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6faf9;
}

.rich-menu-current-publication img {
  width: min(100%, 290px);
  height: auto;
  border-radius: 6px;
}

.rich-menu-current-publication p {
  margin: 6px 0 0;
}

.rich-menu-current-publication small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.rich-menu-simple-test label {
  min-width: min(100%, 250px);
}

.rich-menu-shell [hidden] {
  display: none !important;
}

.rich-menu-stepper {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 14px;
}

.rich-menu-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.rich-menu-step span {
  display: grid;
  grid-row: span 2;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #e5e7eb;
  color: #475569;
  font-weight: 900;
}

.rich-menu-step strong,
.rich-menu-step small {
  min-width: 0;
}

.rich-menu-step small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rich-menu-step.is-active {
  border-color: rgba(20, 116, 111, 0.45);
  background: #edf7f5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.rich-menu-step.is-active span {
  background: #10b981;
  color: #ffffff;
}

.rich-menu-settings-grid,
.rich-menu-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rich-menu-action-grid label:has(#richMenuActionType) {
  grid-column: 1 / -1;
}

.rich-menu-action-grid textarea {
  min-height: 96px;
}

.rich-menu-drop,
.line-chat-image-drop {
  display: grid;
  gap: 8px;
}

.rich-menu-drop {
  margin-top: 14px;
  border: 1px dashed #9fb6c3;
  border-radius: 8px;
  padding: 16px;
  background: #f8fafc;
}

.rich-menu-drop.is-dragging {
  border-color: var(--teal);
  background: #eef8f6;
}

.rich-menu-drop strong,
.rich-menu-drop span {
  display: block;
}

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

.rich-menu-area-editor {
  margin-top: 18px;
}

.rich-menu-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1200px);
  min-height: 260px;
  margin: 12px auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.rich-menu-stage img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.rich-menu-stage:has(img:not([hidden])) {
  min-height: 0;
}

.rich-menu-empty {
  color: var(--muted);
  font-weight: 800;
}

.rich-menu-overlay {
  position: absolute;
  cursor: crosshair;
  touch-action: none;
}

.rich-menu-area-box,
.rich-menu-drag-preview {
  position: absolute;
  border-radius: 6px;
}

.rich-menu-area-box {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(20, 116, 111, 0.88);
  background: rgba(20, 116, 111, 0.16);
  color: #062f2d;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}

.rich-menu-area-box.is-selected {
  border-color: #a15c07;
  background: rgba(255, 247, 230, 0.7);
  box-shadow: 0 0 0 2px rgba(161, 92, 7, 0.18);
}

.rich-menu-drag-preview {
  border: 2px dashed #f59e0b;
  background: rgba(245, 158, 11, 0.18);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.08);
  pointer-events: none;
  z-index: 3;
}

.rich-menu-drag-preview.is-pending {
  border-style: solid;
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82);
}

.rich-menu-drag-preview.is-pending::after {
  position: absolute;
  top: 6px;
  left: 6px;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #92400e;
  content: "未追加";
  font-size: 11px;
  font-weight: 900;
}

.rich-menu-drag-preview.has-overlap {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.18);
  box-shadow: 0 0 0 9999px rgba(127, 29, 29, 0.08);
}

.rich-menu-drag-preview.is-pending.has-overlap {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82);
}

.rich-menu-drag-preview.is-pending.has-overlap::after {
  color: #991b1b;
  content: "重なり";
}

.rich-menu-area-warning {
  margin: 10px 0 0;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
  font-weight: 800;
}

.rich-menu-pending-status {
  margin: 10px 0 0;
  color: #92400e;
  font-size: 13px;
  font-weight: 800;
}

.rich-menu-pending-actions {
  margin: 10px 0 0;
}

.rich-menu-area-bounds {
  margin: 12px 0;
}

.rich-menu-test-preflight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
}

.rich-menu-test-preflight label {
  min-width: 0;
}

.rich-menu-test-preflight .rich-menu-test-only-approval {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.rich-menu-test-only-approval input {
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
}

.rich-menu-preflight-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.rich-menu-preflight-list li {
  overflow-wrap: anywhere;
}

.timeline-unified-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.timeline-track.is-selectable {
  cursor: crosshair;
}

.timeline-selection-block {
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 3;
  min-height: 20px;
  border: 2px dashed var(--teal);
  border-radius: 6px;
  background: rgb(225 245 240 / 82%);
  pointer-events: none;
}

.customer-admin-gate {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.customer-admin-gate h2,
.customer-record-list-head h2,
.customer-record-detail-head h2,
.customer-record-section h3 {
  margin: 0;
}

.customer-admin-login {
  align-items: center;
  display: flex;
  gap: 8px;
}

.customer-admin-login input {
  min-width: 240px;
}

.customer-record-workspace {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  min-height: 680px;
}

.customer-record-list-panel,
.customer-record-detail-panel {
  margin: 0;
  min-width: 0;
}

.customer-record-list-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 150px);
}

.customer-record-list-head,
.customer-record-detail-head,
.customer-record-section-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.compact-button {
  min-height: 36px;
  padding: 7px 10px;
}

.customer-record-search input {
  min-width: 0;
  width: 100%;
}

.customer-record-list {
  display: grid;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
}

.customer-record-load-more {
  flex: 0 0 auto;
  width: 100%;
}

.customer-record-row {
  align-items: center;
  appearance: none;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 9px;
  text-align: left;
  width: 100%;
}

.customer-record-row:hover,
.customer-record-row:focus-visible {
  background: #f2f8f7;
  border-color: #9acac3;
  outline: none;
}

.customer-record-row-avatar,
.customer-record-avatar {
  align-items: center;
  background: #06c755;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  flex: 0 0 auto;
  font-weight: 800;
  justify-content: center;
  overflow: hidden;
}

.customer-record-row-avatar {
  height: 44px;
  width: 44px;
}

.customer-record-avatar {
  height: 58px;
  width: 58px;
}

.customer-record-row-avatar img,
.customer-record-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.customer-record-row-detail {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.customer-record-row-detail strong,
.customer-record-row-detail span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-record-row-detail span,
.customer-record-identity p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.customer-record-empty {
  align-content: center;
  color: var(--muted);
  display: grid;
  min-height: 520px;
  padding: 24px;
  text-align: center;
}

.customer-record-back {
  display: inline-grid;
}

.customer-record-identity {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.customer-display-name-editor {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
}

.customer-display-name-editor > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.customer-display-name-editor[open] > summary {
  margin-bottom: 4px;
}

.customer-display-name-editor p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.customer-display-name-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
}

.customer-display-name-controls input {
  min-width: 0;
  width: 100%;
}

.customer-record-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
}

.customer-submission-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 4px;
}

.customer-submission-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.customer-submission-card .customer-record-section-head {
  margin-bottom: 10px;
}

.customer-submission-list {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: 92px minmax(0, 1fr);
  margin: 0;
}

.customer-submission-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-submission-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.customer-submission-history-item {
  padding: 14px 0;
}

.customer-submission-history-item + .customer-submission-history-item {
  border-top: 1px solid var(--line);
}

.customer-record-summary > div {
  background: #f6f8fa;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 12px;
}

.customer-record-summary span {
  color: var(--muted);
  font-size: 12px;
}

.customer-record-summary strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.customer-record-section,
.customer-record-editor,
.customer-record-history {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}

.customer-record-section-head {
  margin-bottom: 12px;
}

.customer-reservation-summary {
  align-items: center;
  background: #f2f8f7;
  border-left: 3px solid var(--teal);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px;
}

.customer-chart-block {
  display: grid;
  gap: 12px;
  padding: 12px 0;
}

.customer-chart-block + .customer-chart-block,
.customer-history-row + .customer-history-row {
  border-top: 1px solid var(--line);
}

.customer-chart-block-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.customer-chart-block-head span {
  color: var(--muted);
}

.customer-chart-fields {
  display: grid;
  gap: 6px 12px;
  grid-template-columns: 92px minmax(0, 1fr);
  margin: 0;
}

.customer-chart-fields dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-chart-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.customer-photo-placeholder {
  align-items: center;
  background: #f8fafc;
  border: 1px dashed #b8c4d1;
  color: var(--muted);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 12px;
  padding: 14px;
}

.customer-photo-placeholder strong {
  color: var(--text);
}

.customer-record-editor > summary,
.customer-record-history > summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
}

.customer-record-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0;
}

.customer-record-form-wide {
  grid-column: 1 / -1;
}

.customer-record-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.customer-record-form input,
.customer-record-form textarea {
  min-width: 0;
  width: 100%;
}

.customer-history-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 0;
}

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

.customer-purchase-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0 18px;
}

.customer-purchase-summary > div {
  background: #f6f8fa;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.customer-purchase-summary span {
  color: var(--muted);
  font-size: 12px;
}

.customer-purchase-summary strong {
  font-size: 17px;
}

.customer-order-table-wrap {
  overflow-x: auto;
}

.customer-order-table {
  border-collapse: collapse;
  min-width: 680px;
  width: 100%;
}

.customer-order-table th,
.customer-order-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  text-align: left;
  vertical-align: middle;
}

.customer-order-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-order-table td {
  font-size: 13px;
}

.customer-order-product {
  font-weight: 700;
}

.customer-order-payment {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  white-space: nowrap;
}

.customer-order-payment.is-paid {
  background: #e5f4ef;
  color: #12624f;
}

.customer-order-payment.is-refunded,
.customer-order-payment.is-failed {
  background: #fcebea;
  color: #a22c25;
}

.customer-order-payment.is-pending,
.customer-order-payment.is-other {
  background: #f2f3f5;
  color: #586174;
}

.reservation-customer-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #86bdb6;
  text-underline-offset: 3px;
}

.reservation-customer-link:hover,
.reservation-customer-link:focus-visible {
  color: var(--teal-dark);
  outline: none;
}

.reservation-opens-customer {
  cursor: pointer;
}

.reservation-opens-customer:hover,
.reservation-opens-customer:focus-visible {
  border-color: #75b9b0;
  box-shadow: 0 0 0 2px rgb(17 123 113 / 12%);
  outline: none;
}

.reservation-customer-unlinked {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px 6px;
}

.reservation-customer-unlinked small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.line-tag-customer-row.is-clickable {
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.line-tag-customer-row.is-anonymous {
  cursor: default;
  grid-template-columns: minmax(0, 1fr);
}

.line-tag-customer-row.is-clickable:hover,
.line-tag-customer-row.is-clickable:focus-visible {
  background: #f2f8f7;
  outline: 2px solid #9acac3;
  outline-offset: -2px;
}

@media (max-width: 1080px) {
  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .summary-grid,
  .two-column,
  .settings-grid,
  .form-grid,
  .single-column,
  .status-lane-grid,
  .checklist-grid,
  .source-issue-grid,
  .source-proof-grid,
  .source-selected-stats,
  .source-folder-shell,
  .source-bulk-bar,
  .delivery-summary-grid,
  .delivery-board,
  .delivery-detail-grid,
  .line-audience-condition-grid,
  .line-audience-dialog-body,
  .line-audience-mode-row,
  .line-audience-scope-row,
  .line-compose-shell,
  .line-schedule-selects,
  .line-template-select-card,
  .line-template-picker-layout,
  .line-foundation-grid,
  .step-delivery-layout,
  .step-delivery-step-grid,
  .rich-menu-shell,
  .rich-menu-shell.has-action-panel,
  .rich-menu-settings-grid,
  .rich-menu-action-grid,
  .rich-menu-test-preflight,
  .reservation-public-link,
  .reservation-public-sync-form,
  .reservation-followup-form,
  .reservation-message-settings-grid,
  .reservation-automation-editor-heading,
  .reservation-message-summary-grid,
  .commerce-order-controls,
  .commerce-order-history-item,
  .reservation-minimal-form,
  .line-chat-shell,
  .folder-row {
    grid-template-columns: 1fr;
  }

  .commerce-page-heading,
  .commerce-orders-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .commerce-public-actions .button,
  .commerce-customer-search {
    width: 100%;
  }

  .commerce-history-ranges {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .commerce-history-ranges .button {
    min-width: 0;
    padding-inline: 8px;
  }

  .reservation-message-settings-grid .wide-field,
  .reservation-message-settings-grid .full-field {
    grid-column: 1;
  }

  #view-line-qr .summary-grid {
    grid-template-columns: 1fr;
  }

  .line-chat-shell {
    min-height: auto;
  }

  .line-chat-tag-actions {
    grid-template-columns: 1fr;
  }

  .line-chat-list-panel,
  .line-chat-profile-panel {
    border: 0;
  }

  .line-chat-list-panel {
    border-bottom: 1px solid var(--line);
  }

  .source-folder-panel {
    position: static;
    grid-row: auto;
  }

  .source-folder-shell > .source-detail-grid.is-inline,
  .source-list-panel {
    grid-column: auto;
  }

  .rich-menu-stepper {
    position: static;
  }

  .line-chat-profile-panel {
    border-top: 1px solid var(--line);
  }

  .line-chat-thread-list {
    max-height: 280px;
  }

  .line-template-picker-layout {
    align-content: start;
    grid-auto-rows: max-content;
    overflow: auto;
  }

  .line-template-picker-folders,
  .line-template-picker-list-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .line-template-picker-list,
  .line-template-picker-preview > div {
    max-height: none;
    overflow: visible;
  }

  .line-template-picker-folders,
  .line-template-picker-list-panel,
  .line-template-picker-preview {
    min-height: auto;
    overflow: visible;
  }
}

@media (max-width: 820px) {
  body {
    overflow-x: hidden;
  }

  .app-shell {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .sidebar,
  .main {
    min-width: 0;
    max-width: 100%;
  }

  .sidebar {
    gap: 10px;
    padding: 12px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .mobile-nav-toggle {
    display: grid;
    place-items: center;
  }

  .sidebar > .nav {
    display: none;
  }

  .sidebar.is-mobile-open > .nav {
    display: grid;
  }

  .main {
    padding: 18px;
  }

  .customer-admin-gate,
  .customer-admin-login,
  .customer-record-list-head,
  .customer-record-detail-head,
  .customer-record-section-head,
  .customer-reservation-summary,
  .customer-photo-placeholder,
  .customer-history-row {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-admin-login input,
  .customer-admin-login .button {
    min-width: 0;
    width: 100%;
  }

  .customer-record-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .customer-record-list-panel {
    max-height: none;
  }

  .customer-record-list {
    max-height: 58vh;
  }

  .customer-record-workspace.has-selected-customer .customer-record-list-panel {
    display: none;
  }

  .customer-record-workspace:not(.has-selected-customer) .customer-record-detail-panel {
    display: none;
  }

  .customer-record-back {
    align-self: flex-start;
    display: inline-grid;
  }

  .customer-record-summary,
  .customer-purchase-summary,
  .customer-record-form,
  .customer-display-name-controls,
  .customer-submission-grid {
    grid-template-columns: 1fr;
  }

  .customer-submission-list {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .customer-submission-list dd + dt {
    margin-top: 8px;
  }

  .customer-order-table-wrap {
    overflow: visible;
  }

  .customer-order-table {
    min-width: 0;
  }

  .customer-order-table thead {
    display: none;
  }

  .customer-order-table,
  .customer-order-table tbody,
  .customer-order-table tr,
  .customer-order-table td {
    display: block;
    width: 100%;
  }

  .customer-order-table tr {
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-top: 10px;
    padding: 7px 12px;
  }

  .customer-order-table td {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 12px;
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 9px 0;
  }

  .customer-order-table td:last-child {
    border-bottom: 0;
  }

  .customer-order-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
  }

  .customer-record-form-wide {
    grid-column: 1;
  }

  .customer-chart-fields {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
  }

  .store-switcher {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-metric {
    min-height: 108px;
  }

  .dashboard-week-calendar {
    grid-template-columns: repeat(7, minmax(132px, 1fr));
  }

  .dashboard-day-reservation {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .line-chat-lockbar {
    align-items: stretch;
    flex-direction: column;
  }

  .line-chat-composer {
    grid-template-columns: 1fr;
  }

  .line-chat-compose-tools {
    align-items: center;
  }

  .line-chat-message {
    max-width: 94%;
  }

  .line-tag-table,
  .line-tag-table tbody {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .line-tag-table thead {
    display: none;
  }

  .line-tag-table tbody {
    display: grid;
    gap: 10px;
  }

  .line-tag-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
  }

  .tag-management-list > .panel-heading {
    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .tag-management-list .line-tag-search {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .tag-management-list .line-tag-search input {
    min-width: 0;
    width: 100%;
  }

  .line-tag-table td {
    border: 0;
    min-width: 0;
    padding: 0;
    white-space: normal;
    width: auto;
  }

  .line-tag-table td:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
    overflow-wrap: anywhere;
    width: 100%;
  }

  .line-tag-table td:nth-child(2) {
    align-self: start;
    grid-column: 1;
    grid-row: 2;
    width: auto;
  }

  .line-tag-table td:nth-child(3) {
    align-self: start;
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    width: auto;
  }

  .line-tag-reaction {
    justify-items: end;
  }

  .line-tag-table td:nth-child(4) {
    color: var(--muted);
    font-size: 12px;
    grid-column: 1;
    grid-row: 3;
    width: auto;
  }

  .line-tag-table td:nth-child(4)::before {
    content: "最終反応 ";
  }

  .line-tag-table td:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
    width: auto;
  }

  .line-tag-rename-button {
    min-width: 0;
    width: 100%;
  }

  .source-simple-table,
  .source-simple-table tbody {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .source-simple-table thead {
    display: none;
  }

  .source-simple-table tbody {
    display: grid;
    gap: 10px;
  }

  .source-simple-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 10px 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
  }

  .source-simple-table td {
    border: 0;
    max-width: none;
    min-width: 0;
    padding: 0;
    text-align: left;
    white-space: normal;
    width: auto;
  }

  .source-simple-table td:nth-child(1),
  .source-simple-table td:nth-child(2),
  .source-simple-table td:nth-child(7) {
    grid-column: 1 / -1;
  }

  .source-simple-table td:nth-child(1) { grid-row: 1; }
  .source-simple-table td:nth-child(2) { grid-row: 2; }
  .source-simple-table td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .source-simple-table td:nth-child(4) { grid-column: 2; grid-row: 3; }
  .source-simple-table td:nth-child(5) { grid-column: 1; grid-row: 4; }
  .source-simple-table td:nth-child(6) { grid-column: 2; grid-row: 4; }
  .source-simple-table td:nth-child(7) { grid-row: 5; }

  .source-simple-table td:nth-child(3)::before,
  .source-simple-table td:nth-child(4)::before,
  .source-simple-table td:nth-child(5)::before,
  .source-simple-table td:nth-child(6)::before {
    color: var(--muted);
    display: block;
    font-size: 11px;
    margin-bottom: 3px;
  }

  .source-simple-table td:nth-child(3)::before { content: "URL読込"; }
  .source-simple-table td:nth-child(4)::before { content: "友だち追加"; }
  .source-simple-table td:nth-child(5)::before { content: "TEST稼働"; }
  .source-simple-table td:nth-child(6)::before { content: "更新"; }

  .source-detail-button {
    width: 100%;
  }

  .source-action-status-grid {
    align-items: flex-start;
    flex-direction: column;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .line-audience-dialog,
  .line-template-dialog {
    max-height: calc(100vh - 24px);
  }

  .line-audience-dialog-head,
  .line-audience-dialog-actions,
  .line-template-dialog-head,
  .line-template-dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .line-audience-dialog-head h2 {
    font-size: 22px;
  }

  .line-audience-dialog-body {
    gap: 12px;
    padding: 0 12px 12px;
  }

  .line-audience-mode-row,
  .line-audience-scope-row {
    margin: 0 12px 12px;
  }

  .line-template-picker-folders,
  .line-template-picker-list-panel,
  .line-template-picker-preview {
    padding: 16px 14px;
  }

  .line-template-picker-list-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .line-audience-dialog-actions .button,
  .line-template-dialog-actions .button,
  .line-template-select-card .button {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .delivery-history-table-wrap {
    overflow: visible;
  }

  .delivery-history-table,
  .delivery-history-table tbody {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .delivery-history-table thead {
    display: none;
  }

  .delivery-history-table tbody {
    display: grid;
    gap: 10px;
  }

  .delivery-history-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    padding: 12px;
  }

  .delivery-history-table td {
    border: 0;
    min-width: 0;
    padding: 0;
    white-space: normal;
    width: auto;
  }

  .delivery-history-table td:nth-child(1) {
    align-self: start;
    grid-column: 1;
    grid-row: 1;
  }

  .delivery-history-table td:nth-child(2) {
    align-self: start;
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  .delivery-history-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    overflow-wrap: anywhere;
  }

  .delivery-history-table td:nth-child(4) {
    align-self: start;
    grid-column: 2;
    grid-row: 2;
  }

  .delivery-history-table td:nth-child(5) {
    color: var(--muted);
    font-size: 12px;
    grid-column: 2;
    grid-row: 3;
  }

  .delivery-history-table td:nth-child(5)::before {
    content: "配信日時 ";
    font-weight: 800;
  }

  .delivery-history-table td:nth-child(6),
  .delivery-history-table td:nth-child(7) {
    color: var(--muted);
    font-size: 12px;
    grid-column: 1 / -1;
  }

  .delivery-history-table td:nth-child(6) {
    grid-row: 4;
  }

  .delivery-history-table td:nth-child(6)::before {
    content: "対象 ";
    font-weight: 800;
  }

  .delivery-history-table td:nth-child(7) {
    grid-row: 5;
  }

  .delivery-history-table td:nth-child(7)::before {
    content: "更新 ";
    font-weight: 800;
  }

  .delivery-history-table td:nth-child(8) {
    align-self: start;
    grid-column: 3;
    grid-row: 1;
  }

  .line-audience-quick-choices {
    grid-template-columns: 1fr;
  }

  .line-audience-summary-card {
    position: static;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .line-audience-ring {
    width: 96px;
  }

  .line-audience-ring strong {
    font-size: 22px;
  }

  .line-audience-condition-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .line-audience-condition-heading > strong {
    white-space: normal;
  }

  .reservation-primary-actions,
  .reservation-staff-preview,
  .reservation-selected-customer {
    align-items: stretch;
    flex-direction: column;
  }

  .reservation-primary-actions > .button,
  .customer-chat-link {
    width: 100%;
  }

  .reservation-staff-form,
  .reservation-reschedule-fields {
    grid-template-columns: 1fr;
  }

  .reservation-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .reservation-detail-list {
    grid-template-columns: 1fr;
  }

  .reservation-detail-list dd {
    margin-bottom: 8px;
  }

  .reservation-delivery-audit,
  .reservation-message-audit-preview {
    grid-template-columns: 1fr;
  }

  .reservation-message-audit-preview > small,
  .reservation-message-audit-preview > pre {
    grid-column: 1;
  }

  #view-reservations > .reservation-workspace-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commerce-staff-recipient-card,
  .commerce-staff-recipient-candidate {
    align-items: stretch;
    flex-direction: column;
  }

  .commerce-staff-recipient-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .commerce-staff-recipient-controls .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .commerce-staff-recipient-search {
    grid-template-columns: 1fr;
  }
}

.lmessage-archive-intro {
  display: grid;
  gap: 18px;
}

.lmessage-archive-metrics {
  margin: 0;
}

.lmessage-archive-metrics .metric small {
  display: block;
  margin-top: 4px;
}

.lmessage-archive-toolbar,
.lmessage-archive-footer {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.lmessage-archive-toolbar label {
  min-width: min(320px, 100%);
}

.lmessage-archive-toolbar p,
.lmessage-archive-footer span,
.lmessage-archive-redaction-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.lmessage-archive-table-wrap td:nth-child(2) {
  max-width: 440px;
  overflow-wrap: anywhere;
}

.lmessage-archive-modal {
  align-items: center;
  justify-content: center;
}

.lmessage-archive-dialog {
  width: min(920px, calc(100vw - 40px));
}

.lmessage-archive-detail-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.lmessage-archive-detail-body pre {
  background: #0f172a;
  border-radius: 8px;
  color: #e2e8f0;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin: 0;
  max-height: min(620px, calc(100vh - 220px));
  overflow: auto;
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 720px) {
  .lmessage-archive-toolbar,
  .lmessage-archive-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .lmessage-archive-footer .button,
  .lmessage-archive-toolbar label {
    width: 100%;
  }

  .lmessage-archive-dialog {
    max-height: calc(100vh - 24px);
    padding: 16px;
    width: calc(100vw - 24px);
  }

  .lmessage-archive-table-wrap {
    overflow: visible;
  }

  .lmessage-archive-table-wrap table,
  .lmessage-archive-table-wrap tbody {
    display: block;
    width: 100%;
  }

  .lmessage-archive-table-wrap thead {
    display: none;
  }

  .lmessage-archive-table-wrap tr {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 5px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 0;
  }

  .lmessage-archive-table-wrap td {
    border: 0;
    display: block;
    max-width: none;
    padding: 0;
  }

  .lmessage-archive-table-wrap td:first-child {
    font-weight: 700;
  }

  .lmessage-archive-table-wrap td:nth-child(3),
  .lmessage-archive-table-wrap td:nth-child(4) {
    color: var(--muted);
    font-size: 12px;
  }

  .lmessage-archive-table-wrap td:last-child {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 4;
  }

  .lmessage-archive-table-wrap .empty-cell {
    grid-column: 1 / -1;
  }
}