/* merchant-desk Mini App — design tokens + base.
 * Tokens are the seller-guide / SakuraBiz system (1:1 with the Claude Design
 * source 商家支援台.dc.html and ~/Projects/seller-guide/design-tokens.css).
 * Theme key `seller-guide-theme` is shared so the merchant sees one brand. */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f4eee4;
  --heading: #1b3a52;
  --ink: #2c3f4b;
  --muted: #566773;
  --line: #e7decf;
  --accent: #e67a3c;
  --accent-strong: #c75f22;
  --navy: #1b3a52;
  --btn-ink: #241502;
  --tg-bg: #dce3ea;
  --tg-head: #ffffff;
  --tg-bubble: #ffffff;
  --tg-line: #e4e4e8;
  --tg-link: #2e78c8;
  --tg-sub: #7a8893;
  --sys-bg: #eae3d6;
  --sys-ink: #6a5a45;
  --warn-bg: #fbeee2;
  --warn-line: #e2a878;
  --warn-ink: #9a4a12;
  --b-prog-bg: #fbe6d6;
  --b-prog-ink: #b85a1e;
  --b-wait-bg: #fbf1d6;
  --b-wait-ink: #9a7b1c;
  --b-done-bg: #dceedd;
  --b-done-ink: #2e7d44;
  --b-close-bg: #e7e2da;
  --b-close-ink: #6b7178;
  --b-auto-bg: #dce6f0;
  --b-auto-ink: #2a5b86;
  --shadow: 0 1px 2px rgba(27, 58, 82, 0.06), 0 14px 34px -20px rgba(27, 58, 82, 0.3);
  --shadow-sm: 0 1px 2px rgba(27, 58, 82, 0.07), 0 6px 16px -12px rgba(27, 58, 82, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1b27;
    --surface: #13293b;
    --surface-2: #1b3a52;
    --heading: #f2eee6;
    --ink: #d6e1e8;
    --muted: #9db2c0;
    --line: #274359;
    --accent: #e67a3c;
    --accent-strong: #f0945a;
    --navy: #1b3a52;
    --btn-ink: #241502;
    --tg-bg: #0e1b26;
    --tg-head: #17212b;
    --tg-bubble: #19283a;
    --tg-line: #0e1922;
    --tg-link: #62b0f0;
    --tg-sub: #8198a8;
    --sys-bg: #1e2a1b;
    --sys-ink: #b8c7a8;
    --warn-bg: #2a2014;
    --warn-line: #6b4a24;
    --warn-ink: #f0b07a;
    --b-prog-bg: #3a2414;
    --b-prog-ink: #f0945a;
    --b-wait-bg: #332c12;
    --b-wait-ink: #e0c25a;
    --b-done-bg: #15301c;
    --b-done-ink: #74c088;
    --b-close-bg: #222a30;
    --b-close-ink: #93a2ac;
    --b-auto-bg: #14283a;
    --b-auto-ink: #6fb0e6;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 44px -22px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px -14px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0c1b27;
  --surface: #13293b;
  --surface-2: #1b3a52;
  --heading: #f2eee6;
  --ink: #d6e1e8;
  --muted: #9db2c0;
  --line: #274359;
  --accent: #e67a3c;
  --accent-strong: #f0945a;
  --navy: #1b3a52;
  --btn-ink: #241502;
  --tg-bg: #0e1b26;
  --tg-head: #17212b;
  --tg-bubble: #19283a;
  --tg-line: #0e1922;
  --tg-link: #62b0f0;
  --tg-sub: #8198a8;
  --sys-bg: #1e2a1b;
  --sys-ink: #b8c7a8;
  --warn-bg: #2a2014;
  --warn-line: #6b4a24;
  --warn-ink: #f0b07a;
  --b-prog-bg: #3a2414;
  --b-prog-ink: #f0945a;
  --b-wait-bg: #332c12;
  --b-wait-ink: #e0c25a;
  --b-done-bg: #15301c;
  --b-done-ink: #74c088;
  --b-close-bg: #222a30;
  --b-close-ink: #93a2ac;
  --b-auto-bg: #14283a;
  --b-auto-ink: #6fb0e6;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 44px -22px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px -14px rgba(0, 0, 0, 0.6);
}

.sd-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.sd-input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
[hidden] {
  display: none !important;
}