:root {
  color-scheme: dark;
  --ink: #e7e7ea;
  --sub: #6b6b74;
  --dim: #a4a4ae;
  --line: #232329;
  --bg: #060608;
  --red: #e5484d;
  --surface: #0e0e12;
  --app-w: 340px;
  --band: #0a0a0e;
  --band-w: 660px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.app { width: 100%; max-width: var(--app-w); text-align: center; }

.app::before {
  content: ''; position: fixed; top: 0; bottom: 0; left: 50%;
  width: min(100%, var(--band-w)); transform: translateX(-50%);
  background: var(--band); z-index: -1; pointer-events: none;
}
.app.doc::before { content: none; }

.screen { display: none; }
.screen.active { display: block; }

.mark {
  font-size: 15px; font-weight: 700; letter-spacing: .34em;
  text-indent: .34em; margin: 0 0 56px; color: var(--ink);
}

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:disabled { opacity: .35; cursor: default; }

.btn {
  display: block; width: 100%; padding: 18px;
  background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  border-radius: 2px; text-decoration: none; text-align: center;
}
.btn:hover:not(:disabled) { background: #ffffff; }

.btn-line {
  padding: 11px 22px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 13px; color: var(--sub); background: transparent;
}
.btn-line:hover { color: var(--ink); border-color: var(--ink); }
.btn-red { padding: 11px 24px; border-radius: 2px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; }
.btn-red:hover { background: #b42318; }
.btn-mini {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--ink); font-size: 12.5px; white-space: nowrap;
}
.btn-mini:hover:not(:disabled) { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.who { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.disc {
  position: relative;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: var(--ink);
}
.disc.blank { color: #2c2c33; }
.label { font-size: 11px; letter-spacing: .1em; color: var(--sub); }

.disc::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid var(--ink); opacity: 0;
}
.disc.speaking::after { animation: halo 1.5s ease-out infinite; }
.disc.wait::after { animation: halo 2s ease-out infinite; border-color: var(--sub); }
@keyframes halo {
  0%   { transform: scale(.94); opacity: .5 }
  100% { transform: scale(1.24); opacity: 0 }
}

#orb, .call-icon {
  width: 108px; height: 108px;
  background: url("icon.png") center / cover no-repeat, var(--surface);
  overflow: hidden;
}

.row { display: flex; justify-content: center; gap: 44px; margin: 0 0 40px; }
.clock { font-size: 46px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .02em; margin: 0 0 44px; }
.ctrl { display: flex; justify-content: center; gap: 10px; }
.big { font-size: 27px; font-weight: 700; margin: 14px 0 34px; color: var(--ink); }

.note { font-size: 12px; color: var(--sub); margin: 0; min-height: 1.4em; letter-spacing: .02em; }
.err {
  border: 1px solid #4a1f1f; background: #1a0f0f; color: #f2a9a6;
  border-radius: 2px; padding: 13px 15px; margin: 0 0 16px;
  font-size: 12.5px; line-height: 1.75; text-align: left; word-break: break-word;
}
.err a { color: inherit; border-bottom: 1px solid currentColor; text-decoration: none; }
.gap { height: 18px; }

.btn-x {
  display: block; padding: 16px 18px; text-align: center;
  border: 1px solid var(--ink); border-radius: 2px;
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
}
.btn-x:hover { background: var(--ink); color: var(--bg); }
.login .mark { margin-bottom: 20px; }
.tagline, .credit {
  position: relative; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 48px);
}
.tagline { margin: 0; font-size: min(19px, 4vw); font-weight: 700; line-height: 1.7; color: var(--ink); }
.credit { margin: 10px 0 40px; font-size: min(13px, 3vw); line-height: 1.7; color: var(--sub); }
.consent { margin: 16px 0 0; font-size: 11px; line-height: 1.7; color: var(--sub); }
.consent a { color: var(--sub); border-bottom: 1px solid var(--line); text-decoration: none; }
.consent a:hover { color: var(--ink); border-color: var(--ink); }
.consent.alt { margin-top: 14px; }

#mic { position: relative; margin: 0 0 18px; text-align: left; }
.mic-row {
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  cursor: pointer; user-select: none;
}
.mic-row:hover, .mic-row[aria-expanded="true"], .mic-row:focus-visible { border-color: var(--ink); outline: none; }
.mic-ico { width: 15px; height: 15px; flex: none; color: var(--sub); }
#mic-name {
  flex: 1; min-width: 0; font-size: 12px; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mic-caret { width: 12px; height: 12px; flex: none; color: var(--sub); }
#mic-list {
  position: absolute; left: 0; right: 0; top: 46px; z-index: 20;
  padding: 4px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8);
}
.mic-opt {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 2px; font-size: 12px; color: var(--sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mic-opt:hover, .mic-opt:focus-visible { outline: none; background: var(--bg); color: var(--ink); }
.mic-opt[aria-selected="true"] { color: var(--ink); }
#mic-meter { height: 2px; margin-top: 12px; background: var(--line); overflow: hidden; }
#mic-bar { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.mic-note { font-size: 11px; color: var(--sub); margin: 8px 0 0; min-height: 1.35em; letter-spacing: .02em; }
#menu-wrap {
  position: fixed; top: 14px; z-index: 30;
  right: max(14px, calc(50% - var(--band-w) / 2 + 14px));
}
#s-idle .mark { margin-bottom: 40px; }
.call-icon { margin: 0 auto 40px; }

#menu-btn {
  width: 40px; height: 40px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); border: 1px solid var(--line); background: var(--surface);
}
#menu-btn:hover, #menu-btn[aria-expanded="true"] { border-color: var(--ink); }
#menu-btn svg { width: 20px; height: 20px; }
#menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 240px;
  padding: 4px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); text-align: left;
}
.menu-item, .menu-link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 2px; font-size: 13px; color: var(--ink); text-decoration: none; text-align: left;
}
.menu-link { color: var(--sub); }
.menu-item:hover, .menu-link:hover { background: var(--bg); color: var(--ink); }
.menu-item svg { width: 16px; height: 16px; flex: none; color: var(--sub); }
.menu-sep { height: 1px; margin: 4px 0; background: var(--line); }
#menu form { margin: 0; }
.menu-logout { color: var(--red); }
.menu-logout:hover { background: #1a0f0f; color: var(--red); }
.menu-logout svg { color: var(--red); }

#menu .me { margin: 0 0 4px; padding: 8px 8px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }

dialog#plan-dialog, dialog#prompt-dialog, dialog#withdraw-dialog, dialog#coupon-dialog {
  width: min(420px, calc(100vw - 32px)); max-height: 92vh; max-height: 92dvh;
  padding: 0; border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .8);
}
dialog#plan-dialog::backdrop, dialog#prompt-dialog::backdrop, dialog#withdraw-dialog::backdrop, dialog#coupon-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.dialog-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.dialog-close { width: 32px; height: 32px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; color: var(--sub); }
.dialog-close:hover { color: var(--ink); background: var(--bg); }
.dialog-close svg { width: 16px; height: 16px; }
.dialog-body { padding: 18px 20px 20px; text-align: left; font-size: 15px; line-height: 1.85; }
dialog#prompt-dialog { width: min(720px, calc(100vw - 32px)); }
.dialog-note { font-size: 11px; line-height: 1.8; color: var(--sub); margin: 0 0 10px; }
#prompt-text {
  display: block; width: 100%; height: min(46vh, 400px);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.8; resize: vertical;
}
#prompt-text:focus { outline: none; border-color: var(--ink); }
#prompt-note:empty { display: none; }
#prompt-note { margin: 8px 0 0; color: var(--red); }
.starts { display: flex; flex-direction: column; gap: 10px; }
.btn-premium { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-premium:hover:not(:disabled), .btn-premium:focus-visible {
  background: var(--ink); color: var(--bg); outline: none;
}
.btn-premium.locked { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink); border-color: var(--ink); }
.btn-premium.locked .lock { width: 16px; height: 16px; flex: none; opacity: .7; }
.btn-premium .price-tag {
  flex: none; padding: 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; background: var(--ink); color: var(--bg);
}
.btn-premium.locked:hover:not(:disabled), .btn-premium.locked:focus-visible { background: var(--ink); color: var(--bg); }
.btn-premium.locked:hover:not(:disabled) .price-tag, .btn-premium.locked:focus-visible .price-tag { background: var(--bg); color: var(--ink); }
.ledger { width: 100%; border-collapse: collapse; margin: 14px 0 0; font-size: 12px; }
.ledger th, .ledger td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ledger th { font-size: 11px; font-weight: 500; color: var(--sub); white-space: nowrap; }
.ledger td:nth-child(3), .ledger td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger td a { color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
.ledger .spent { font-weight: 500; }
#result-note:not([hidden]) { margin: 0 0 22px; }
.result-plan {
  margin: 0 0 22px; padding: 22px 20px; text-align: left; font-size: 15px; line-height: 1.85;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.result-plan .premium-pitch, .result-plan .premium-terms { margin: 0; }
/* **340px の列では dt と dd を横に並べない。**「しずくちゃん 甘えん坊のす／がた」と
   折り返して読めなくなる（本人の指摘 2026-09-18）。画面の幅ではなく**入る箱の幅**で決まるので、
   ビューポートのメディアクエリではなくここで指定する */
.result-plan .terms, .dialog-body .terms { grid-template-columns: 1fr; gap: 2px 0; }
.result-plan .terms dt, .dialog-body .terms dt { margin-top: 12px; }
.result-plan .terms dt:first-child, .dialog-body .terms dt:first-child { margin-top: 0; }
.result-plan .note { font-size: 13.5px; line-height: 1.85; color: var(--dim); margin: 12px 0 0; }
.result-plan .note a { color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
.hangup-warn { font-size: 13px; line-height: 1.9; color: var(--ink); margin: 0 0 16px; }
.hangup-warn b { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hangup-acts { display: flex; flex-direction: column; gap: 10px; }
.hangup-acts button { width: 100%; padding: 14px 16px; text-align: center; }
.prompt-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 14px; }
.prompt-actions .btn { flex: 1; padding: 14px; }
.prompt-actions .btn-line { flex: none; }
.dialog-body h2 { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--sub); margin: 18px 0 8px; }
.dialog-body .note { font-size: 13.5px; line-height: 1.9; color: var(--dim); margin: 10px 0 0; }
.dialog-body .note a { color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
.dialog-body .ok, .dialog-body .err { margin: 0 0 12px; }
.cr-balance { padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); }
.cr-balance .cr-free, .cr-balance .cr-paid { display: inline-block; margin: 0 18px 4px 0; font-size: 14px; color: var(--dim); }
.cr-balance.cr-now { margin-top: 18px; padding: 11px 14px; }
.cr-balance.cr-now .cr-free { margin: 0; font-size: 13.5px; }
.cr-balance b { color: var(--ink); font-size: 16px; font-weight: 500; margin-left: 4px; }
.cr-balance .cr-paid { display: block; margin-bottom: 8px; }
.cr-main { display: flex; align-items: baseline; gap: 8px; }
.cr-main .cr-k { font-size: 14px; color: var(--dim); }
.cr-main b { font-size: 22px; margin-left: 0; }
.cr-sub { display: block; margin-top: 5px; font-size: 14px; color: var(--dim); }
.cr-sub b { font-size: 14.5px; margin: 0 1px; }
.coupon-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.coupon-form label { font-size: 12.5px; color: var(--sub); }
.coupon-form input[type=text] {
  flex: 1; min-width: 150px; max-width: 220px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
.coupon-form input[type=text]:focus { outline: none; border-color: var(--ink); }
.coupon-form .btn-line { flex: none; }
.dialog-body .premium-pitch, .dialog-body .premium-terms { margin-top: 0; }
.dialog-body .terms dd { color: var(--ink); }
.dialog-foot { margin: 14px 0 0; font-size: 13.5px; }
.dialog-foot a { color: var(--sub); border-bottom: 1px solid var(--line); text-decoration: none; }
.dialog-foot a:hover { color: var(--ink); }

.remain { margin: -32px 0 32px; font-variant-numeric: tabular-nums; }
.remain.low { color: var(--red); }
#result-note { margin: -18px 0 26px; line-height: 1.8; }
#result-note a { color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }

.credits .cr-balance { background: var(--surface); }
.premium-pitch { margin: 16px 0 0; }
.premium-name { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.premium-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 16px; line-height: 1; }
.premium-price b { font-size: 40px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.premium-price .yen { font-size: 18px; font-weight: 700; }
.premium-price .tax { margin-left: 8px; font-size: 13.5px; color: var(--dim); }
.premium-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.premium-facts div {
  padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); text-align: center; line-height: 1.3;
}
.premium-facts b { display: block; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.premium-facts span { display: block; margin-top: 5px; font-size: 13px; color: var(--dim); }
.premium-pts { margin: 0 0 18px; padding-left: 1.3em; font-size: 15px; line-height: 1.9; color: var(--ink); }
.premium-pts li { margin: 0 0 4px; }
.premium-terms { margin: 16px 0 0; }
.premium-terms h3 { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--dim); margin: 0 0 10px; }
.terms { display: grid; grid-template-columns: max-content 1fr; gap: 7px 14px; margin: 0; font-size: 14.5px; line-height: 1.85; }
.terms dt { color: var(--dim); white-space: nowrap; font-size: 13.5px; }
.terms dd { margin: 0; color: var(--ink); }
.premium-terms .acts { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; }
.premium-terms .acts .btn, .premium-pitch .acts .btn { width: 100%; padding: 16px 14px; font-size: 16px; }
.premium-terms .acts .btn-line { width: 100%; padding: 12px; font-size: 14px; }
@media (max-width: 480px) {
  .terms { grid-template-columns: 1fr; gap: 0 0; }
  .terms dt { margin-top: 8px; }
}
.ok {
  border: 1px solid #1f4a2a; background: #0f1a12; color: #a9f2b6;
  border-radius: 2px; padding: 13px 15px; margin: 0 0 16px; font-size: 12.5px; line-height: 1.75;
}
.grant { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.grant input {
  padding: 9px 10px; font: inherit; font-size: 12.5px; min-width: 0;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}
.grant input[type=number] { width: 190px; }
.grant .btn { width: auto; padding: 9px 16px; font-size: 12.5px; }

.me {
  display: flex; align-items: center; gap: 12px;
  text-align: left; margin: 0 0 10px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
}
.me-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); object-fit: cover;
}
.me-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.me-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.me-id { font-size: 11.5px; color: var(--sub); }
.me form { margin: 0; }
[hidden] { display: none !important; }

#vol { display: flex; align-items: center; gap: 10px; margin: 22px auto 0; max-width: 260px; }
.vol-ico { width: 15px; height: 15px; flex: none; color: var(--sub); }
#vol-val { width: 3.6em; text-align: right; font-size: 11px; color: var(--sub); }
#vol-range {
  flex: 1; min-width: 0; height: 2px; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none; background: var(--line); cursor: pointer;
}
#vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%; background: var(--ink); border: 0;
}
#vol-range::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--ink); border: 0; }
#vol-range:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

.lat {
  margin: 18px 0 0; min-height: 1.5em;
  font-size: 11px; color: var(--sub);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

body:has(.doc) { align-items: flex-start; }
.app.doc { max-width: 680px; text-align: left; padding-bottom: 40px; }
.doc .mark { text-align: center; margin-bottom: 40px; }
.doc .mark a { color: var(--ink); text-decoration: none; }
.doc h1 { font-size: 21px; font-weight: 700; margin: 0 0 6px; }
.doc h2 { font-size: 14px; font-weight: 700; margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 12.5px; font-weight: 700; margin: 18px 0 6px; color: var(--ink); }
.doc p, .doc li { font-size: 12.5px; line-height: 1.95; }
.doc p { margin: 0 0 12px; }
.doc ol, .doc ul { margin: 0 0 12px; padding-left: 1.6em; }
.doc li { margin: 0 0 4px; }
.doc a { color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
.doc a:hover { border-color: var(--ink); }
.doc a.btn, .doc a.btn:hover { color: var(--bg); border-bottom: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 12px; line-height: 1.8; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.doc th { color: var(--sub); font-weight: 500; font-size: 11px; letter-spacing: .06em; }
.doc .doc-date { color: var(--sub); font-size: 11px; margin: 0 0 26px; }
.doc .doc-foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; }
.doc .doc-foot.top { margin-top: 0; }
.doc .doc-nav { margin: 0 0 30px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; text-align: center; }
.doc .mark + .doc-nav { margin-top: -22px; }
.me-note a { color: var(--sub); border-bottom: 1px solid var(--line); text-decoration: none; }
.me-note a:hover { color: var(--ink); border-color: var(--ink); }

.hist .top { margin: 0 0 18px; padding: 0; border: 0; }
.hist-head { display: flex; align-items: center; gap: 14px; margin: 24px 0 18px; }
.hist-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); object-fit: cover; }
.hist-body { min-width: 0; }
.hist-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.hist-meta { display: flex; gap: 12px; font-size: 12px; color: var(--sub); }
.hist-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.doc .hist-item { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); text-decoration: none; }
.doc .hist-item:hover { border-color: var(--ink); }
.hist-item .hist-head { margin: 0; }
.doc .hist-who { font-size: 12.5px; color: var(--sub); margin: -6px 0 14px; }
.doc .hist-cta { margin: 52px 0 0; }
.doc .hist-cta .btn { max-width: 340px; margin: 0 auto; }
.result-home { display: block; width: 100%; margin-top: 10px; text-align: center; text-decoration: none; }
.hist .share { margin: 24px 0 8px; padding: 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); }
.hist .share h2 { margin: 0 0 10px; padding: 0; border: 0; }
.hist .share-opts { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12.5px; color: var(--sub); }
.doc .acts { margin: 0 0 8px; }
.note-form { margin: 0 0 8px; }
#profile-note {
  display: block; width: 100%; height: 190px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; line-height: 1.9; resize: vertical;
}
#profile-note:focus { outline: none; border-color: var(--ink); }
.note-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.pref-form { margin: 0 0 8px; }
.pref-form label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.pref-form label:hover { color: var(--ink); }
.doc .acts .btn-red { padding: 12px 20px; }
.withdraw-acts { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.withdraw-acts button { width: 100%; padding: 14px 16px; text-align: center; }
#withdraw-err { margin: 0 0 14px; }
.hist .share-opts label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.doc.wide { max-width: 1240px; }
.tok { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.tok input {
  flex: 1; padding: 14px 14px; font: inherit; font-size: 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}
.tok input:focus { outline: none; border-color: var(--ink); }
.tok .btn { width: auto; padding: 14px 22px; }
.doc td .me-id { margin-left: 6px; }
.tr { border-top: 1px solid var(--line); }
.tr .line { display: flex; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.8; }
.tr .t { flex: none; width: 3.6em; color: var(--sub); font-variant-numeric: tabular-nums; }
.tr .who { flex: none; width: 4em; color: var(--sub); }
.tr .ai .who { color: var(--ink); }
.tr .sys { color: var(--sub); }
.tr .sys .text { font-style: italic; }
.tr .text { flex: 1; white-space: pre-wrap; word-break: break-word; }

.doc .top-row { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 0; border: 0; }
.doc .top-row a[data-copy] { color: var(--sub); }
.doc .top-row a[data-copy]:hover { color: var(--ink); }

.tabbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; }
.tab {
  padding: 10px 16px; font-size: 13px; color: var(--sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.tabbar form { margin: 0 0 8px; }
.finder { margin: 0 0 14px; }
.finder input {
  padding: 9px 11px; font: inherit; font-size: 12.5px; width: 260px; max-width: 100%;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}
.finder input:focus { outline: none; border-color: var(--ink); }
.doc th.sortable { padding: 0; }
.doc th.sortable button {
  padding: 8px 10px; font: inherit; font-size: 11px; letter-spacing: .06em; color: var(--sub); white-space: nowrap;
}
.doc th.sortable button:hover { color: var(--ink); }
.doc th.sortable.on button { color: var(--ink); }
.doc td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-body].loading { opacity: .45; }

.pager { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; font-size: 12px; }
.pager + table { margin-top: 4px; }
table + .pager { margin-top: 10px; }
.doc .pager a { color: var(--sub); }
.doc .pager a:hover { color: var(--ink); }

.rec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--line);
}
.rec-head h2 { margin: 0; padding: 0; border: 0; }
.rec-head .dl { display: flex; gap: 14px; }
.doc .rec-head .dl a { color: var(--sub); }
.doc .rec-head .dl a:hover { color: var(--ink); }

.sound {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 0 0 8px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
}
.sound .play {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.sound .play svg { width: 18px; height: 18px; pointer-events: none; }

.sound .play .ico { display: none; pointer-events: none; line-height: 0; }
.sound .play[data-on="0"] .ico-play { display: inline-flex; }
.sound .play[data-on="1"] .ico-pause { display: inline-flex; }
.sound .play:hover { background: var(--ink); color: var(--bg); }
.sound .play[data-on="1"] { background: var(--ink); color: var(--bg); }
.sound .body { flex: 1; min-width: 0; }
.sound .seekbar {
  position: relative; height: 48px; cursor: pointer; touch-action: none; overflow: hidden;
  border-radius: 2px;
}
.sound .seekbar > * { pointer-events: none; }
.sound .seek-wave { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sound .seek-wave-rest { fill: var(--sub); opacity: .45; }
.sound .seek-wave-done { fill: var(--ink); }
.sound .seek-knob { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.sound .seekbar:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.sound .meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--sub); }
.sound .note { margin-left: auto; }
.sound .rate {
  font: inherit; font-size: 11px; color: var(--sub); background: var(--surface);
  border: 1px solid var(--line); border-radius: 2px; padding: 3px 6px;
}
.tnum { font-variant-numeric: tabular-nums; }

#debug {
  position: fixed; right: 0; bottom: 0;
  width: min(300px, 64vw); max-height: 4.8em; overflow-y: auto;
  background: rgba(14, 14, 18, .94);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  padding: 9px 12px; text-align: left; white-space: pre-wrap;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.8; color: #6a6a73;
  cursor: pointer;
}
#debug.expanded {
  width: min(430px, 100vw);
  max-height: 58vh;
  color: #8c8c96;
}
#debug:empty::after {
  content: "通話ログ";
  color: #34343c;
}

.backend-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.backend-pick .pick-now { width: 100%; margin: 0; font-size: 13px; }
.backend-pick .pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.backend-pick input[type=text] {
  flex: 1; min-width: 260px; padding: 9px 10px; font: inherit; font-size: 12.5px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}
.backend-pick .btn { width: auto; padding: 9px 18px; font-size: 12.5px; }
.backend-pick input[type=radio] { accent-color: var(--ink); width: 13px; height: 13px; }
.backend-pick .pick.off { opacity: .4; cursor: not-allowed; }
.backend-pick .pick.off input { cursor: not-allowed; }
.manage .switchbox {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel);
}
.manage .switchbox.on { border-color: #b8860b; background: rgba(184, 134, 11, .08); }
.manage .switchbox .fm-now { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.manage .switchbox .fm-label { font-size: 11.5px; opacity: .6; }
.manage .switchbox .fm-now b { font-size: 15px; }
.manage .switchbox select {
  padding: 8px 10px; font: inherit; font-size: 12.5px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}

.manage .caps, .manage .caps-reset {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel);
}
.manage .caps { display: grid; gap: 10px; }
.manage .caps.on { border-color: #b8860b; background: rgba(184, 134, 11, .08); }
.manage .caps.off .cap-now, .manage .caps.off input[type=number] { opacity: .45; }
.manage .caps select {
  padding: 8px 10px; font: inherit; font-size: 12.5px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}
.manage .caps-reset { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.manage .caps-reset b { font-size: 14px; font-variant-numeric: tabular-nums; }
.manage .cap-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.manage .cap-row .fm-label { flex: 0 0 210px; }
.manage .cap-now { font-size: 15px; font-variant-numeric: tabular-nums; }
.manage .cap-now.over { color: #d9534f; }
.manage .cap-sep { opacity: .4; }
.manage .cap-unit { font-size: 12px; opacity: .6; }
.manage .caps input[type=number] {
  width: 130px; padding: 8px 10px; font: inherit; font-size: 12.5px; text-align: right;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}
.manage .caps .btn-mini { justify-self: start; }
dialog#coupon-dialog { width: min(520px, calc(100vw - 32px)); }
.manage .coupon-code {
  margin: 6px 0 22px; padding: 22px 12px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 38px; font-weight: 700; letter-spacing: .14em; line-height: 1.2;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  user-select: all; overflow-wrap: anywhere;
}
.manage .coupon-acts { display: flex; flex-direction: column; gap: 10px; }
.manage .coupon-acts .btn { width: 100%; padding: 16px; font-size: 16px; }
.manage .coupon-acts .btn-line { width: 100%; padding: 12px; font-size: 14px; }

/* **`.doc p` / `.doc li`（12.5px）より詳細度を上げること。**
   `.stat-v` だけだと負けて、大きい数字が 12.5px に潰れる */
.hint-pop {
  position: absolute; z-index: 40; pointer-events: none; white-space: nowrap;
  padding: 5px 9px; border-radius: 4px; font-size: 12px; line-height: 1.4;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8);
}
.hint-pop.ng { border-color: var(--red); color: #f2a9a6; }
.manage .srange { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.manage .srange select {
  padding: 7px 10px; font: inherit; font-size: 12.5px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}
.manage .scards { display: grid; grid-template-columns: 1fr; gap: 18px; }
.manage .scard { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 18px 20px 12px; }
.manage .scard-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.manage .scard-t { font-size: 14px; color: var(--sub); letter-spacing: .04em; }
.manage .scard-n { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.manage .spark { display: block; width: 100%; height: auto; }
.manage .node-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; margin: 0 0 14px; align-items: start; }
.manage .node-panels .panel { margin: 0; }
.manage .panel { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 16px 18px; margin: 0 0 14px; }
.manage .panel-t { margin: 0 0 14px; font-size: 13px; color: var(--ink); letter-spacing: .04em; line-height: 1.4; }
.manage .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 24px; }
.manage .facts > div { min-width: 0; }
.manage .facts span { display: block; font-size: 11px; color: var(--sub); letter-spacing: .04em; margin: 0 0 3px; line-height: 1.4; }
.manage .facts b {
  display: block; font-weight: 400; font-size: 13.5px; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink); overflow-wrap: anywhere;
}
.manage .facts em { font-style: normal; }
.manage .facts em.warn { color: #d29922; }
.manage .facts em.bad { color: var(--red); }

.manage .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 14px; }
.manage .stat { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 16px 18px 14px; min-width: 0; }
.manage .stat-t { margin: 0 0 10px; font-size: 13px; color: var(--sub); letter-spacing: .04em; line-height: 1.4; }
.manage .stat-v {
  margin: 0; font-size: 31px; line-height: 1.2; color: var(--ink); font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.manage .stat-v small { font-size: 13px; font-weight: 400; color: var(--sub); margin-left: 7px; }
.manage .stat .meter { margin: 14px 0 0; }

.manage .chart {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 132px auto;
  gap: 4px 8px; margin: 14px 0 0;
}
.manage .chart-y {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; font-size: 10.5px; color: var(--sub);
  font-variant-numeric: tabular-nums; min-width: 24px; line-height: 1;
}
.manage .chart-plot { grid-area: 1 / 2; min-width: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manage .chart-plot svg { display: block; width: 100%; height: 100%; }
.manage .chart-x {
  grid-area: 2 / 2; display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--sub); font-variant-numeric: tabular-nums; line-height: 1;
}
.manage .chart .line { fill: none; stroke: #4a9eff; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.manage .chart .area { fill: #4a9eff14; stroke: none; }
.manage .chart .grid { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }

.meter { width: 100%; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: #3fb950; }
.meter i.hot { background: #d29922; }

.backend-bar form { margin: 0 0 0 auto; }
.backend-bar .me-id { font-size: 11px; }
.manage .note { border: 1px solid var(--line); background: var(--surface); color: var(--sub); border-radius: 2px; padding: 13px 15px; font-size: 12.5px; line-height: 1.75; }