:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f7f8;
  color: #182025;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f5f7f8; }
main { width: min(100% - 32px, 620px); margin: 0 auto; padding: 48px 0; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.mark { display: grid; place-items: center; width: 42px; height: 42px; background: #176b52; color: white; font-weight: 700; font-size: 22px; border-radius: 8px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 1px; font-size: 22px; letter-spacing: 0; }
h2 { font-size: 20px; letter-spacing: 0; }
.subtitle, .muted { color: #5d6a70; }
.subtitle { margin: 0; font-size: 14px; }
section { border: 1px solid #d6dcdf; background: white; padding: 24px; border-radius: 8px; }
.notice { padding: 12px; margin: 18px 0; border-left: 3px solid #c78200; background: #fff7e7; color: #604300; }
button { min-height: 42px; border: 1px solid #aab4b9; border-radius: 6px; padding: 8px 14px; background: #fff; color: #182025; font: inherit; cursor: pointer; }
button.primary { width: 100%; border-color: #176b52; background: #176b52; color: white; font-weight: 600; }
button:disabled { opacity: .65; cursor: wait; }
.ready-actions { display: grid; gap: 10px; }
.app-action, .attachment a { display: flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid #aab4b9; border-radius: 6px; padding: 8px 14px; color: #182025; text-decoration: none; font-weight: 600; }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
dl { margin: 16px 0 0; }
dt { margin-top: 16px; color: #5d6a70; font-size: 13px; }
dd { margin: 5px 0 0; padding: 12px; border: 1px solid #d6dcdf; border-radius: 6px; background: #f7f9fa; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; user-select: text; }
.attachments { display: grid; gap: 16px; margin-top: 18px; }
.attachment { display: grid; gap: 10px; }
.attachment img { display: block; width: 100%; max-height: 440px; object-fit: contain; border: 1px solid #d6dcdf; border-radius: 6px; background: #f7f9fa; }

@media (prefers-color-scheme: dark) {
  :root, body { background: #121719; color: #edf1f2; }
  section { background: #1b2225; border-color: #3a454a; }
  .subtitle, .muted, dt { color: #aeb9bd; }
  .notice { background: #342a17; color: #f3d69a; }
  button { background: #222b2f; color: #edf1f2; border-color: #59666c; }
  .app-action, .attachment a { color: #edf1f2; border-color: #59666c; }
  button.primary { background: #2b8a6b; border-color: #2b8a6b; }
  dd { background: #151b1e; border-color: #3a454a; }
  .attachment img { background: #151b1e; border-color: #3a454a; }
}

@media (max-width: 480px) {
  main { width: min(100% - 20px, 620px); padding: 24px 0; }
  section { padding: 18px; }
  .result-head { align-items: flex-start; }
}