:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-soft: #f9fafb;
  --text: #172033;
  --muted: #667085;
  --border: #d9e0ea;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --success: #067647;
  --warning: #b54708;
  --danger: #b42318;
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select {
  font: inherit;
}

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

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 14px;
  background: #111827;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  font-weight: 800;
  font-size: 18px;
  padding: 0 8px;
}

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

.sidebar a,
.icon-btn {
  color: #d1d5db;
  border-radius: var(--radius);
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sidebar a.active,
.sidebar a:hover,
.icon-btn:hover {
  background: #243044;
  color: #fff;
  text-decoration: none;
}

.sidebar form {
  margin-top: auto;
}

.page {
  padding: 24px;
  max-width: 1500px;
  width: 100%;
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: 26px;
  margin-bottom: 6px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 15px;
}

.page-header p,
.muted,
small {
  color: var(--muted);
}

.panel,
.bulk-bar,
.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

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

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

.metrics div,
.split-metrics div {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--panel-soft);
}

.metrics strong,
.split-metrics strong {
  display: block;
  font-size: 22px;
  line-height: 1.2;
}

.metrics span,
.split-metrics span,
.split-metrics small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.filters,
.form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr)) auto auto;
  gap: 12px;
  align-items: end;
}

.refresh-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.refresh-bar strong {
  display: block;
  margin-bottom: 4px;
}

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

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

input,
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  background: #fff;
}

input:invalid {
  border-color: var(--danger);
}

.btn {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn.primary {
  background: var(--primary);
  color: #fff;
}

.btn.primary:hover {
  background: var(--primary-dark);
}

.btn.secondary {
  background: #eef4ff;
  color: #1d4ed8;
  border-color: #bfd0ff;
}

.btn.ghost {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.btn.danger {
  background: #fee4e2;
  color: var(--danger);
  border-color: #fecdca;
}

.btn.mini {
  display: inline-block;
  padding: 5px 9px;
  font-size: 13px;
}

.bulk-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bulk-bar span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.table-panel {
  padding: 0;
  overflow: hidden;
}

.table-scroll,
.table-panel {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  background: #f8fafc;
  font-size: 12px;
  text-transform: uppercase;
}

td small {
  display: block;
  margin-top: 4px;
}

.product-cell {
  display: grid;
  grid-template-columns: 52px minmax(260px, 1fr);
  gap: 10px;
  max-width: 680px;
}

.product-cell img,
.thumb,
.product-hero img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #eef2f7;
}

.product-cell a {
  color: var(--text);
  font-weight: 700;
}

.product-cell small {
  word-break: break-all;
}

.table-foot {
  padding: 12px 16px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.table-foot-top {
  border-bottom: 1px solid var(--border);
}

.table-foot-bottom {
  border-top: 1px solid var(--border);
}

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

.pagination label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pagination select {
  width: auto;
}

.page-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.page-btn {
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}

.page-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.page-gap {
  padding: 0 4px;
  color: var(--muted);
}

.row-check {
  cursor: pointer;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}

.badge.success {
  color: var(--success);
  background: #dcfae6;
}

.badge.warning {
  color: var(--warning);
  background: #fef0c7;
}

.badge.danger {
  color: var(--danger);
  background: #fee4e2;
}

.badge.neutral {
  color: #475467;
  background: #eaecf0;
}

.alert {
  border: 1px solid #b2ddff;
  background: #eff8ff;
  color: #175cd3;
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
}

.alert.danger {
  border-color: #fecdca;
  background: #fffbfa;
  color: var(--danger);
}

.product-hero {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.product-hero img {
  width: 140px;
  height: 140px;
}

.split-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}

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

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

.operation-card {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}

.rule-list,
.issue-list,
.preview ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.rule-list li,
.issue-list li,
.preview li {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: var(--panel-soft);
}

.rule-list span,
.issue-list span,
.preview small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.customer-platform-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.customer-platform-tab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text); }
.customer-platform-tab:hover { border-color: #84adff; background: #f5f8ff; text-decoration: none; }
.customer-platform-tab.active { border-color: var(--primary); background: #eef4ff; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.customer-platform-tab span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.customer-platform-page { margin-bottom: 20px; }
.customer-platform-page-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px; }
.customer-platform-page-heading h2 { margin: 0; }
.customer-platform-page-heading span { color: var(--muted); font-size: 13px; }
.customer-review-list { display: grid; gap: 12px; }
.customer-platform-empty { padding: 18px; color: var(--muted); text-align: center; }
.customer-review-card { padding: 0; margin: 0; overflow: hidden; }
.customer-review-card.needs-attention { border-color: #f79009; box-shadow: 0 0 0 2px rgba(247, 144, 9, 0.12); }
.customer-review-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; }
.customer-review-heading::marker { color: var(--primary); }
.customer-review-heading span { margin-left: 8px; color: var(--muted); }
.customer-review-badges { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.customer-review-badges .badge { margin-left: 0; }
.badge.attention { background: #fff4e5; color: #b54708; border: 1px solid #fdb022; }
.customer-review-body { border-top: 1px solid var(--border); padding: 2px 16px 16px; }
.customer-message-history { display: grid; gap: 8px; margin: 12px 0; }
.customer-message { max-width: 85%; padding: 10px 12px; border-radius: 10px; background: #f3f4f6; white-space: pre-wrap; }
.customer-message.seller { margin-left: auto; background: #e7f5ff; }
.customer-message.system { margin: 0 auto; background: #fff7db; }
.customer-message small { display: block; color: var(--muted); margin-bottom: 4px; }
.customer-draft { margin: 14px 0; padding: 14px; border: 1px solid #d8dee8; border-radius: 10px; background: #fbfcfe; }
.customer-draft.stale { border-color: #dc3545; }
.customer-review-card textarea { width: 100%; min-height: 92px; margin-top: 6px; }
.customer-review-card label { display: block; margin-top: 12px; }
.customer-send-status { display: grid; gap: 4px; margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-soft); }
.customer-send-status span { color: var(--muted); font-size: 13px; }
.customer-send-status.sent { border-color: #6ce9a6; background: #ecfdf3; }
.customer-send-status.failed,
.customer-send-status.unknown { border-color: #fda29b; background: #fef3f2; }
.customer-send-status.queued,
.customer-send-status.sending,
.customer-send-status.pending_confirmation { border-color: #84adff; background: #eff4ff; }

.rakuma-approval-card { border-color: #84adff; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08); }
.rakuma-approval-toolbar { position: sticky; top: 12px; z-index: 8; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-color: #6ce9a6; background: #ecfdf3; box-shadow: 0 8px 24px rgba(6, 118, 71, 0.16); }
.rakuma-approval-toolbar-copy { display: grid; gap: 4px; min-width: 0; }
.rakuma-approval-toolbar-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rakuma-approval-toolbar-copy small { color: #475467; }
.rakuma-approval-pending-label { color: var(--success); font-size: 13px; font-weight: 800; }
.rakuma-approval-toolbar-actions { flex: 0 0 auto; margin: 0; }
.rakuma-approval-toolbar-actions .btn { min-height: 44px; }
.rakuma-approval-toolbar.is-empty { position: static; border-color: var(--border); background: var(--panel); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.rakuma-approval-toolbar.is-empty .rakuma-approval-pending-label { color: var(--muted); }
.rakuma-queue-clock { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.rakuma-approval-section { margin: 22px 0; }
.rakuma-section-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px; }
.rakuma-section-heading h2 { margin: 0; }
.rakuma-section-heading span { color: var(--muted); font-size: 13px; }
.rakuma-queue-empty { color: var(--muted); text-align: center; }
.rakuma-approval-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rakuma-approval-heading h3 { margin-bottom: 6px; }
.rakuma-approval-card.queued { border-color: #84adff; background: #f8faff; }
.rakuma-approval-card.failed { border-color: #fda29b; background: #fffafa; }
.rakuma-approval-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; }
.rakuma-approval-details div { padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-soft); }
.rakuma-approval-details span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.rakuma-approval-details strong { display: block; }

.platform-card div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding: 12px 0;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(17, 24, 39, 0.5);
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-card {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: 0 20px 45px rgba(16, 24, 40, 0.24);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1px solid var(--border);
  background: #fff;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.weekday-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 14px;
  padding: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.weekday-box label {
  display: inline-flex;
  color: var(--text);
  align-items: center;
}

.weekday-box input {
  width: auto;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  width: min(380px, 100%);
  padding: 24px;
  display: grid;
  gap: 14px;
}

pre {
  white-space: pre-wrap;
  background: #0f172a;
  color: #d1d5db;
  border-radius: var(--radius);
  padding: 12px;
  max-height: 320px;
  overflow: auto;
}

.error-cell {
  max-width: 260px;
  color: var(--danger);
}

.back-link {
  display: inline-block;
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .sidebar nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .filters,
  .form-grid,
  .metrics,
  .grid-two,
  .platform-grid,
  .split-metrics,
  .product-hero {
    grid-template-columns: 1fr;
  }

  .bulk-bar,
  .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .page {
    padding: 16px;
  }

  .customer-platform-tabs {
    grid-template-columns: 1fr;
  }

  .customer-review-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-review-heading span {
    margin-left: 0;
  }

  .customer-review-badges {
    justify-content: flex-start;
  }

  .customer-message {
    max-width: 96%;
  }

  .rakuma-approval-toolbar {
    top: 8px;
    align-items: stretch;
    flex-direction: column;
  }

  .rakuma-approval-toolbar-copy strong {
    white-space: normal;
  }

  .rakuma-approval-toolbar-actions,
  .rakuma-approval-toolbar-actions .btn {
    width: 100%;
  }
}