:root {
  color-scheme: dark;
  --bg: #1a1818;
  --rail: #1e1b1b;
  --surface: #221e1c;
  --surface-raised: #2b2522;
  --line: rgba(245, 242, 238, .09);
  --line-strong: rgba(245, 242, 238, .17);
  --text: #e9e4df;
  --muted: #b4aca7;
  --gold: #d4b68d;
  --gold-light: #e3caa8;
  --gold-wash: rgba(212, 182, 141, .1);
  --danger: #f0a27a;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px / 1.55 var(--sans);
  min-width: 280px;
}

h1, h2, h3, p { margin-block: 0; }
h2 { font-size: 16px; font-weight: 600; line-height: 1.45; }
h3 { font-size: 14px; font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); }
a { color: var(--gold); text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
img, video { max-width: 100%; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.main-content:focus { outline: none; }

.skip-link {
  position: fixed;
  z-index: 5;
  inset: .5rem auto auto .5rem;
  padding: .55rem .8rem;
  border-radius: .5rem;
  background: var(--text);
  color: var(--bg);
  transform: translateY(-150%);
}

.skip-link:focus { transform: none; }

.entry {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(48px, 15vh, 160px) clamp(16px, 10vw, 140px);
}

.entry-inner {
  width: min(100%, 410px);
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(17px, 4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.entry h1, .page-header h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

.passkey-actions {
  display: grid;
  gap: 14px;
  width: min(100%, 340px);
  justify-items: start;
}

.passkey-actions details { width: 100%; }
.passkey-actions summary {
  display: list-item;
  padding-block: 9px;
  color: var(--gold-light);
  cursor: pointer;
}

.passkey-actions form {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-block-start: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.passkey-actions form .field { width: 100%; }
.passkey-actions form p, #passkey-message { font-size: 14px; }
#passkey-message:empty { display: none; }

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.wordmark > span {
  width: 9px;
  height: 9px;
  margin-inline: 2px;
  transform: rotate(45deg);
  border: 1px solid var(--gold);
}

.wordmark small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.workspace { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  inset-block-start: 0;
  align-self: start;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 24px 13px 14px;
  background: var(--rail);
  border-inline-end: 1px solid var(--line);
}

.sidebar .wordmark { padding-inline: 9px; }
.navigation { display: grid; gap: 5px; margin-block: 29px 18px; }
.navigation a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.navigation a:hover { color: var(--text); background: var(--surface-raised); }
.navigation a[aria-current="page"] {
  background: var(--gold-wash);
  border-color: rgba(212, 182, 141, .34);
  color: var(--gold);
  font-weight: 600;
}

.account {
  min-width: 0;
  margin-top: auto;
  padding: 8px 3px 0 8px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .button-quiet { flex: none; }

.main-content {
  width: 100%;
  max-width: 1350px;
  min-width: 0;
  margin-inline: auto;
  padding: 23px clamp(16px, 3vw, 40px) 52px;
}

.page-header { padding-block: 2px 10px; margin-bottom: 10px; }
.demo-banner {
  width: fit-content;
  margin-bottom: 7px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 12px;
}

.view, .stack { display: grid; align-content: start; gap: 11px; min-width: 0; }
.panel {
  min-width: 0;
  padding: clamp(12px, 1.65vw, 18px);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.panel > :where(h2, h3):first-child { margin-bottom: 10px; }
.panel.stack > :where(h2, h3):first-child { margin-bottom: 0; }
.panel > :where(p, h2, h3) + :where(p, .row, .table-wrap, form, dl) { margin-top: 9px; }
.panel.stack > :where(p, h2, h3) + :where(p, .row, .table-wrap, form, dl) { margin-top: 0; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.row > * { min-width: 0; }
.spread { justify-content: space-between; }
.muted, .empty { color: var(--muted); }
p.muted, p.empty { font-size: 13px; }
.error, [role="alert"] { color: var(--danger); }

.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  min-width: 0;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover, button:hover { border-color: rgba(212, 182, 141, .54); }
.button-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
  font-weight: 600;
}

.button-primary:hover { background: var(--gold-light); }
.button-quiet { color: var(--muted); background: transparent; border-color: transparent; padding-inline: 7px; }
.button-quiet:hover { color: var(--gold-light); border-color: transparent; }
.button-danger { color: var(--danger); border-color: rgba(240, 162, 122, .42); }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .52; }
button[aria-pressed="true"]:not(.button-primary), .button.active:not(.button-primary) {
  border-color: rgba(212, 182, 141, .42);
  background: var(--gold-wash);
  color: var(--gold);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 9px;
  align-items: end;
}

.field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

input:not([type="checkbox"], [type="radio"]), select, textarea {
  min-height: 36px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 14px;
}

.field :where(input, select, textarea) { width: 100%; }
textarea { min-height: 84px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }

.order-refund-region { display: contents; }
.order-reason-field { grid-column: 1 / -1; }
.order-reason-choices { gap: 6px; }
.order-reason-choices .order-reason-chip {
  border-radius: 22px;
  padding-inline: 11px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
  gap: 6px 3px;
}

.metric {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 6px 6px 7px;
  text-align: center;
  font-size: 12px;
}

.metric strong, .metric .value, .metric .metric-value {
  order: -1;
  color: var(--gold);
  font-size: clamp(19px, 1.85vw, 23px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.funnel-step {
  display: grid;
  width: 100%;
  gap: 4px;
  justify-items: stretch;
  justify-content: stretch;
  padding: 5px 0 7px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  text-align: start;
  font-weight: 400;
}

.funnel-step:last-child { border-bottom: 0; }
.funnel-step:hover { border-color: var(--line); color: var(--gold-light); }
.funnel-step .row { justify-content: space-between; }
.funnel-step .row strong { font-weight: 500; }
.funnel-step .row > span { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-step .muted { font-size: 12px; }
.stack:has(> .funnel-step) { gap: 2px; }
.funnel-alert {
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(240, 162, 122, .1);
  color: var(--danger);
  font-size: 13px;
}
meter {
  display: block;
  width: 100%;
  height: 8px;
  accent-color: var(--gold);
}
meter::-webkit-meter-bar { background: var(--line); border: 0; border-radius: 4px; }
meter::-webkit-meter-optimum-value { background: var(--gold); border-radius: 4px; }
meter::-moz-meter-bar { background: var(--gold); border-radius: 4px; }
.funnel-step.worst .row strong { color: var(--danger); }
.funnel-step.worst meter::-webkit-meter-optimum-value { background: var(--danger); }
.funnel-step.worst meter::-moz-meter-bar { background: var(--danger); }

.report-overview > .data-pairs:has(> .row) {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--gold-wash);
}

.report-overview > .data-pairs:first-of-type dd { font-weight: 600; }
.report-overview > .data-pairs:empty { display: none; }
.trend-up { color: #8fc79a; }
.trend-down { color: var(--danger); }
.report-ai { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.report-ai > .stack { grid-column: 1 / -1; }
.report-ai > .stack:empty { display: none; }
.report-ai > .button {
  border-color: rgba(212, 182, 141, .28);
  border-radius: 20px;
  background: var(--gold-wash);
  color: var(--gold);
}

.table-wrap { max-width: 100%; overflow: auto; scrollbar-color: #6c5d45 var(--bg); }
.data-table, table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  text-align: start;
  font-variant-numeric: tabular-nums;
}

th, td { text-align: start; padding: 7px 9px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
td { max-width: 320px; overflow-wrap: anywhere; font-size: 13px; }
td .button {
  min-height: 29px;
  padding: 3px 6px;
  border-color: transparent;
  color: var(--gold);
  white-space: nowrap;
}
td .button:hover { border-color: var(--line); }
tbody tr:last-child td { border-bottom: 0; }

dl { margin-block: 0; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.data-pairs { display: grid; gap: 6px; }
.data-pairs > .row {
  display: grid;
  grid-template-columns: minmax(72px, 105px) minmax(0, 1fr);
  align-items: baseline;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.data-pairs > .row:last-child { padding-bottom: 0; border-bottom: 0; }
summary { cursor: pointer; }
details > summary { min-height: 36px; padding-block: 7px; }
details[open] > summary { margin-bottom: 8px; }
details[open] > :not(summary) { margin-bottom: 8px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.long-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; }
.topic { padding: 12px 0; border-bottom: 1px solid var(--line); }
.topic:last-child { border-bottom: 0; }
blockquote {
  margin: 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid #6d5c3d;
  color: var(--muted);
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 12px;
}
.media-grid img, .media-grid video { display: block; border-radius: 5px; }
.media-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 5px;
}
.badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(212, 182, 141, .28);
  border-radius: 20px;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 12px;
}

.notice {
  position: fixed;
  z-index: 4;
  inset: auto clamp(12px, 4vw, 48px) max(12px, env(safe-area-inset-bottom));
  width: fit-content;
  max-width: min(460px, calc(100vw - 24px));
  padding: 12px 16px;
  background: var(--surface-raised);
  border: 1px solid rgba(212, 182, 141, .42);
  border-radius: 8px;
  color: var(--text);
  box-shadow: 0 5px 15px #0004;
}

.funnel-filters > .row .button {
  min-height: 33px;
  padding-inline: 5px;
  border-color: transparent;
  background: transparent;
  color: var(--gold);
}
.funnel-filters > .row .button:hover { color: var(--gold-light); }
.funnel-filters form .row p:empty { display: none; }

@media (min-width: 761px) {
  .funnel-filters form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 1130px) {
  .funnel-report:has(> .report-primary):has(> .report-funnel) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
  .funnel-report > :not(.report-primary, .report-funnel) { grid-column: 1 / -1; }
  .report-primary { grid-column: 1; }
  .report-funnel { grid-column: 2; }
}

@media (max-width: 760px) {
  .workspace { display: block; }
  .sidebar {
    position: static;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    padding: max(7px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 3px max(12px, env(safe-area-inset-left));
    border-inline-end: none;
    border-bottom: 1px solid var(--line);
  }
  .sidebar .wordmark { padding: 0; font-size: 16px; }
  .sidebar .wordmark > span { width: 8px; height: 8px; }
  .sidebar .wordmark small { font-size: 12px; }
  .navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding-block: 2px 5px;
  }
  .navigation a { min-height: 40px; justify-content: center; padding: 5px 2px; font-size: 12px; }
  .account { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; }
  .account-name { max-width: 90px; }
  .main-content { padding: 13px max(12px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .page-header { padding-block: 1px 7px; margin-bottom: 5px; }
  .page-header h1 { font-size: 21px; }
  .button, button { min-height: 41px; }
  .button.funnel-step { min-height: 44px; }
  td .button { min-height: 38px; }
  input:not([type="checkbox"], [type="radio"]), select, textarea { min-height: 41px; font-size: 16px; }
  .funnel-filters form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
  }
  .funnel-filters form .form-grid { display: contents; }
  .funnel-filters > .row .button { min-height: 38px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  th, td { padding: 6px 8px; }
}

@media (max-width: 390px) {
  .sidebar .wordmark small, .account-name { display: none; }
}

@media (max-width: 360px) {
  .navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .navigation a { font-size: 13px; }
}