:root {
  --sc-ink: #18231f;
  --sc-forest: #174d3b;
  --sc-forest-deep: #123b31;
  --sc-mint: #dcebdd;
  --sc-paper: #f3efe3;
  --sc-cream: #fffdf6;
  --sc-orange: #e96b3a;
  --sc-gold: #d7a436;
  --sc-line: #d8d4c8;
  --sc-muted: #66736d;
  --sc-danger: #a53e35;
  --sc-shadow: 0 12px 34px rgba(24, 35, 31, 0.07);
}

body.sc-page {
  min-height: 100vh;
  margin: 0;
  color: var(--sc-ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(215, 164, 54, 0.17), transparent 24%),
    linear-gradient(145deg, #f7f3e8, #edf1e9 55%, #f5ecdf);
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.sc-page .container,
.sc-shell {
  width: min(1540px, 100%);
  max-width: 1540px;
  margin: 0 auto;
  padding: 18px 24px 70px;
}

.sc-page h1,
.sc-page h2,
.sc-page h3 {
  color: var(--sc-ink);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.025em;
}

.sc-page .hidden {
  display: none !important;
}

/* Authentication is intentionally calmer than the operational workspace. */
.sc-page #loginPanel.sc-login {
  width: min(500px, calc(100% - 32px));
  margin: 11vh auto;
  padding: 36px;
  border: 1px solid var(--sc-line);
  border-top: 6px solid var(--sc-forest);
  border-radius: 18px;
  background: rgba(255, 253, 246, 0.96);
  box-shadow: 0 28px 80px rgba(24, 35, 31, 0.14);
}

.sc-page #loginPanel.sc-login::before {
  content: "SC";
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50% 50% 42% 58%;
  color: #fff;
  background: var(--sc-forest);
  font: 700 17px Georgia, serif;
}

.sc-page #loginPanel.sc-login h1 {
  margin: 4px 0 10px;
  font-size: clamp(34px, 6vw, 44px);
}

.sc-page #loginPanel.sc-login p:not(.eyebrow) {
  color: var(--sc-muted);
  line-height: 1.55;
}

.sc-page label,
.sc-field-label {
  color: var(--sc-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sc-page input,
.sc-page select,
.sc-page textarea {
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  color: var(--sc-ink);
  background: #fff;
}

.sc-page input:focus,
.sc-page select:focus,
.sc-page textarea:focus {
  border-color: var(--sc-forest);
  outline: 3px solid rgba(23, 77, 59, 0.13);
}

.sc-page #loginPanel input {
  margin: 7px 0;
  padding: 12px;
}

.sc-page #loginPanel button {
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
}

/* Shared masthead mirrors the Product Price Book brand block. */
.sc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0 20px;
}

.sc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sc-ink);
  text-decoration: none;
}

.sc-mark {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50% 50% 42% 58%;
  color: #fff;
  background: var(--sc-forest);
  font: 700 16px Georgia, serif;
}

.sc-brand-copy p,
.sc-brand-copy h1 {
  margin: 0;
}

.sc-brand-copy p {
  color: var(--sc-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sc-brand-copy h1 {
  font-size: 26px;
  line-height: 1.05;
}

.sc-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.sc-nav a,
.sc-nav button,
.sc-page .menu-link {
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  color: var(--sc-ink);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.sc-nav a:hover,
.sc-nav a[aria-current="page"] {
  background: var(--sc-mint);
  color: var(--sc-forest);
}

.sc-page .sc-nav #logoutBtn {
  padding: 8px 12px;
  color: #fff;
  background: var(--sc-danger);
}

/* Editorial hero establishes a clear purpose before operational controls. */
.sc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 210px;
  margin-bottom: 14px;
  padding: 34px;
  overflow: hidden;
  border-radius: 22px;
  color: #f8f4e8;
  background:
    radial-gradient(circle at 83% 15%, rgba(233, 107, 58, 0.55), transparent 26%),
    linear-gradient(120deg, var(--sc-forest-deep), #1d5c47 67%, #886125);
  box-shadow: 0 18px 45px rgba(23, 77, 59, 0.2);
}

.sc-page.sc-profit .sc-hero {
  background:
    radial-gradient(circle at 82% 15%, rgba(215, 164, 54, 0.55), transparent 27%),
    linear-gradient(120deg, #123b31, #23604b 65%, #826526);
}

.sc-page.sc-shopee .sc-hero {
  background:
    radial-gradient(circle at 84% 12%, rgba(238, 77, 45, 0.72), transparent 27%),
    linear-gradient(120deg, #123b31, #1d5c47 64%, #923e27);
}

.sc-page.sc-admin .sc-hero {
  background:
    radial-gradient(circle at 84% 12%, rgba(215, 164, 54, 0.55), transparent 27%),
    linear-gradient(120deg, #18362e, #244d40 64%, #705b32);
}

.sc-hero h2 {
  max-width: 900px;
  margin: 6px 0 12px;
  color: #fffaf0;
  font-size: clamp(30px, 4vw, 53px);
  line-height: 1.03;
}

.sc-hero-copy > p:not(.eyebrow):not(.sc-session) {
  max-width: 760px;
  margin: 0;
  color: #dbe7dc;
  line-height: 1.5;
}

.sc-page .eyebrow,
.sc-kicker {
  margin: 0;
  color: var(--sc-orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sc-hero .eyebrow,
.sc-hero .sc-kicker {
  color: #ffc492;
}

.sc-session {
  margin: 12px 0 0;
  color: #dbe7dc;
  font-size: 12px;
}

.sc-hero-aside {
  display: grid;
  flex: 0 0 auto;
  min-width: 170px;
  gap: 7px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 14px;
  background: rgba(255, 253, 246, 0.12);
  backdrop-filter: blur(8px);
}

.sc-hero-aside span {
  color: #dbe7dc;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sc-hero-aside strong {
  color: #fff;
  font: 23px Georgia, serif;
}

.sc-page.sc-shopee .sc-hero-aside .sync-health {
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font: 21px Georgia, serif;
}

/* Panels, KPIs and filters share the warm ledger treatment. */
.sc-page .cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.sc-page .card {
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--sc-line);
  border-top: 4px solid var(--sc-forest);
  border-radius: 14px;
  background: rgba(255, 253, 246, 0.9);
  box-shadow: none;
}

.sc-page .card::before {
  display: none;
}

.sc-page .card.metric-warn,
.sc-page .card.metric-bad {
  border-top-color: var(--sc-orange);
}

.sc-page .card.metric-money {
  border-top-color: var(--sc-gold);
}

.sc-page .card-label {
  color: var(--sc-muted);
  font-size: 11px;
  font-weight: 900;
}

.sc-page .card-value {
  margin-top: 7px;
  color: var(--sc-ink);
  font: 30px Georgia, serif;
}

.sc-page .panel {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--sc-line);
  border-radius: 16px;
  background: rgba(255, 253, 246, 0.94);
  box-shadow: var(--sc-shadow);
}

.sc-page .panel > h2:first-child,
.sc-page .section-heading h2 {
  margin: 3px 0 8px;
  font-size: 25px;
}

.sc-page .panel > h3,
.sc-page .section-heading h3 {
  font-size: 19px;
}

.sc-page .section-heading {
  margin: 24px 0 12px;
}

.sc-page .compact-heading {
  margin: 0 0 14px;
}

.sc-page .hint {
  color: var(--sc-muted);
  line-height: 1.5;
}

.sc-page .control-panel {
  border-color: var(--sc-line);
  background: rgba(255, 253, 246, 0.94);
}

.sc-page .controls {
  gap: 9px;
}

.sc-page .controls label {
  color: var(--sc-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sc-page button {
  min-height: 36px;
  margin-top: 8px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--sc-forest);
  font-weight: 900;
}

.sc-page button:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

.sc-page button:active {
  transform: translateY(0);
}

.sc-page button.secondary {
  border: 1px solid var(--sc-line);
  color: var(--sc-ink);
  background: #f2f0e9;
}

.sc-page button.danger,
.sc-page button.danger-action {
  color: #fff;
  background: var(--sc-danger);
}

.sc-page .toolbar {
  gap: 8px;
}

.sc-page .toolbar button:first-of-type:not(.secondary):not(.danger):not(.danger-action),
.sc-page .toolbar button.shopee-button {
  background: var(--sc-orange);
}

.sc-page .validation-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  border-radius: 9px;
  color: #fff;
  background: #155b48;
  font-weight: 800;
  text-decoration: none;
}

.sc-page details.panel summary {
  color: var(--sc-forest);
  font-weight: 900;
}

.sc-page .danger-panel {
  border-color: #e3b7ae;
  background: #fff8f2;
}

.sc-page .reset-box {
  border-color: #c9a99f;
  background: #fffaf3;
}

/* Dense ledger tables remain performant: no card conversion or client reflow. */
.sc-page .table-wrap {
  border: 1px solid var(--sc-line);
  border-radius: 11px;
  background: #fffdf8;
}

.sc-page table {
  color: var(--sc-ink);
}

.sc-page th {
  padding: 10px 8px;
  color: #37443e;
  background: #e9e3d5;
  font-size: 11px;
}

.sc-page td {
  padding: 10px 8px;
  border-color: var(--sc-line);
}

.sc-page tbody tr:nth-child(even) {
  background: #f8f5ec;
}

.sc-page tbody tr:hover {
  background: #edf5eb;
}

.sc-page .tag {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.sc-page .tag.matched,
.sc-page .tag.profit-ready {
  color: var(--sc-forest);
  background: var(--sc-mint);
}

.sc-page code {
  color: var(--sc-forest);
  font-size: 0.9em;
}

.sc-page .integration-shop-card,
.sc-page .review-card-grid > * {
  border-color: var(--sc-line);
  border-radius: 12px;
  background: linear-gradient(165deg, #fffdf8 35%, #f4f0e5);
}

.sc-page .shop-metrics div {
  border-color: var(--sc-line);
  background: rgba(255, 253, 246, 0.9);
}

.sc-page .message {
  border-radius: 12px;
  background: var(--sc-ink);
  box-shadow: 0 15px 42px rgba(24, 35, 31, 0.24);
}

.sc-page .message.toast-success {
  background: var(--sc-forest);
}

.sc-page .message.toast-error {
  background: var(--sc-danger);
}

.sc-page .sc-review-brief {
  background:
    linear-gradient(135deg, rgba(220, 235, 221, 0.72), transparent 60%),
    rgba(255, 253, 246, 0.95);
}

.sc-page .sc-section-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 12px;
}

.sc-page .sc-section-intro h2 {
  margin: 3px 0 0;
  font-size: 27px;
}

.sc-page .sc-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.sc-page .import-grid > *,
.sc-page .manual-grid > *,
.sc-page .sc-two-column > *,
.sc-page .integration-settings-grid > * {
  min-width: 0;
}

.sc-page .table-wrap {
  max-width: 100%;
}

@media (max-width: 1050px) {
  .sc-page .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .sc-nav {
    justify-content: flex-start;
  }

  .sc-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .sc-page .container,
  .sc-shell {
    padding: 10px 10px 60px;
  }

  .sc-topbar {
    gap: 14px;
    padding-bottom: 14px;
  }

  .sc-nav {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .sc-nav::-webkit-scrollbar {
    display: none;
  }

  .sc-nav a,
  .sc-nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sc-hero {
    min-height: 0;
    padding: 24px 18px;
  }

  .sc-hero-aside {
    width: 100%;
  }

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

  .sc-page .card {
    min-height: 88px;
  }

  .sc-page .card:nth-child(5):last-child {
    grid-column: 1 / -1;
  }

  .sc-page .panel {
    padding: 13px;
  }

  .sc-page .sc-two-column {
    grid-template-columns: 1fr;
  }

  .sc-page .sc-section-intro {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 470px) {
  .sc-page #loginPanel.sc-login {
    width: 100%;
    margin: 6vh auto;
    padding: 25px 20px;
  }

  .sc-page .cards {
    grid-template-columns: 1fr 1fr;
  }

  .sc-brand-copy h1 {
    font-size: 22px;
  }
}

.sc-page .evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 18px 0 22px;
}

.sc-page .evidence-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  background: #f8fafc;
}

.sc-page .evidence-field span {
  color: #58708a;
  font-size: 12px;
}

.sc-page .evidence-field strong {
  overflow-wrap: anywhere;
}

.sc-reconcile .evidence-action {
  margin: 18px 0 0;
  font-weight: 600;
}