/* account.pleiad.dev のページ（§7.4）。Pleiad と同じトークン。
   背景は白、影と灰色の面の入れ子は無し。ライトとダークは prefers-color-scheme。 */
:root {
  color-scheme: light;
  --surface-paper: #fff;
  --surface-1: #f4f5f9;
  --surface-2: #e8eaf1;
  --surface-3: #dcdee8;
  --fill-primary: #3a499e;
  --fill-primary-hover: #2f3c86;
  --on-fill: #f4f5ff;
  --ink: #1c2247;
  --ink-strong: #0f1330;
  --ink-weak: #596089;
  --ink-blue: #3a499e;
  --line: #c9cee0;
  --line-strong: #9eabde;
  --line-blue: #5665cd;
  --ink-danger: #b3261e;
  --surface-veil: rgba(21, 22, 28, .32);
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Yu Gothic UI", "Hiragino Sans",
    "Noto Sans JP", system-ui, sans-serif;
  --dur-fast: 120ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-paper: #1b1c23;
    --surface-1: #222329;
    --surface-2: #2a2b32;
    --surface-3: #35363e;
    --fill-primary: #5665cd;
    --fill-primary-hover: #6573d6;
    --ink: #dfe3f2;
    --ink-strong: #f4f6ff;
    --ink-weak: #8a91b8;
    --ink-blue: #9eabde;
    --line: #2c2f3f;
    --line-strong: #454a66;
    --line-blue: #728cd7;
    --ink-danger: #e89a8f;
    --surface-veil: rgba(0, 0, 0, .5);
  }
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  font: 14px/1.6 var(--font);
  color: var(--ink);
  background: var(--surface-paper);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit }
p { margin: 0 }
a { color: var(--ink-blue); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--line-blue); outline-offset: 2px }

.hd { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 32px }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-strong); font-size: 16px }
.brand svg { width: 22px; height: 22px }
.hd .who { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--ink-weak); min-width: 0 }
.who .em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink-blue); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none }
@media (max-width: 480px) { .who .em { display: none } }

/* 中央の 1 列（幅 400px まで）。アカウントのページは 600px */
.main { max-width: 400px; margin: 56px auto 72px; padding: 0 24px }
.main.wide { max-width: 600px; margin-top: 24px }
.h1 { font-size: 24px; font-weight: 700; color: var(--ink-strong); margin: 0 8px 20px; line-height: 1.35 }
.msg { margin: 0 8px 20px; color: var(--ink) }
.weak { color: var(--ink-weak) }
.small { font-size: 12px }

/* 節の見出し・項目・行（アカウントのページ） */
.gh { min-height: 32px; padding: 0 8px; margin-top: 24px; font-size: 12px; font-weight: 600; color: var(--ink-weak); letter-spacing: .04em; display: flex; align-items: center; gap: 8px }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 40px; margin: 12px 8px 0 }
.kv dt { color: var(--ink-weak) }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
.row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px; border-radius: 8px }
.row .rt { flex: 1; min-width: 0; display: flex; flex-direction: column }
.row .nm.strong { font-weight: 600; color: var(--ink-strong) }
.row .sub { font-size: 12px; color: var(--ink-weak); line-height: 1.4 }
a.row { color: var(--ink) }
a.row:hover { background: var(--surface-1); text-decoration: none }
a.row svg { width: 16px; height: 16px; color: var(--ink-weak); flex: none }
.row-msg { margin: 4px 8px 0 }

/* 課金のモックの画面の上の帯（§7.3） */
.proto { background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; text-align: center; padding: 6px 16px }

/* プランの選択（/billing/plans）: プランの札とできること */
.plan-card { margin: 0 8px; padding: 20px; border: 1px solid var(--line); border-radius: 16px }
.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.plan-name { font-size: 18px; font-weight: 700; color: var(--ink-strong) }
.plan-price { color: var(--ink-weak) }
.plan-lede { margin-top: 8px }
.plan-card .actions { margin: 20px 0 0 }
.plan-card .msg { margin: 16px 0 0 }
.plan-card .plan-msg { font-size: 13px; color: var(--ink-weak) }
.done { margin-top: 16px }
.done-h { font-weight: 600; color: var(--ink-strong) }
.done .weak { margin-top: 4px }
.feats { list-style: none; margin: 4px 0 0; padding: 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.feats li { padding: 16px; border-radius: 12px; background: var(--surface-1) }
.feat-k { font-size: 12px; font-weight: 600; color: var(--ink-blue); letter-spacing: .04em }
.feat-h { margin-top: 4px; font-weight: 600; color: var(--ink-strong); line-height: 1.45 }
.feat-sub { margin-top: 6px; font-size: 13px; color: var(--ink-weak) }

/* /plus: 「プランを見る」と招待コードの欄の区切り */
.redeem { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line) }

/* 請求の一覧の表 */
.tbl { width: 100%; border-collapse: collapse; margin: 12px 0 0 }
.tbl th, .tbl td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line) }
.tbl th { color: var(--ink-weak); font-size: 12px; font-weight: 600 }

/* 今月の利用の帯 */
.meter { display: flex; align-items: center; gap: 12px; margin: 12px 8px 0 }
.meter .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden }
.meter .bar i { display: block; height: 100%; background: var(--ink-blue); border-radius: 999px }
.meter .bar i.over { background: var(--ink-danger) }
.danger { color: var(--ink-danger) }
a.danger:hover { text-decoration: underline }
.btn.danger { background: var(--ink-danger); color: #fff; font-weight: 600 }
.btn.danger:hover { background: var(--ink-danger); filter: brightness(1.08) }
.btn.danger[disabled]:hover { background: var(--ink-danger); filter: none }

/* 確認のダイアログ（アカウントの削除） */
.veil { position: fixed; inset: 0; background: var(--surface-veil); display: grid; place-items: center; padding: 16px; z-index: 10 }
.dlg { width: 480px; max-width: 100%; background: var(--surface-paper); border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 20px; display: flex; flex-direction: column }
.dlg-t { font-size: 18px; font-weight: 700; margin: 0; color: var(--ink-strong); line-height: 1.4 }
.dlg-b { margin-top: 16px; display: flex; flex-direction: column; gap: 16px }
.dlg-b .msg { margin: 0 }
.dlg-b .field { margin: 0 }
.gone { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px }
.gone li { display: flex; gap: 10px; align-items: center }
.gone svg { width: 16px; height: 16px; color: var(--ink-weak); flex: none }
.dlg-f { display: flex; align-items: center; gap: 8px; margin-top: 24px }
.dlg-f .sp { flex: 1 }

.btn {
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  min-height: 44px;
  cursor: pointer;
  background: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background var(--dur-fast);
}
.btn:hover { background: var(--surface-1) }
.btn.quiet { background: var(--surface-2) }
.btn.quiet:hover { background: var(--surface-3) }
.btn.pri { background: var(--fill-primary); color: var(--on-fill); font-weight: 600 }
.btn.pri:hover { background: var(--fill-primary-hover) }
.btn .mark { height: 18px; width: auto; flex: none }
.btn[disabled] { opacity: .42; cursor: default }
.btn[disabled]:hover { background: var(--surface-2) }

.buttons { display: flex; flex-direction: column; gap: 10px; margin: 0 8px }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 8px 0 }
.actions.tail { margin-top: 32px; align-items: center }
.actions .note { margin: 0; font-size: 12px; color: var(--ink-weak) }

.field { margin: 16px 8px 0 }
.flabel { font-size: 12px; font-weight: 600; color: var(--ink-weak); margin-bottom: 6px; display: block }
.inp {
  width: 100%;
  font: inherit;
  background: var(--surface-1);
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ink);
}
.inp.mono { font-family: "Cascadia Mono", Consolas, "SFMono-Regular", monospace; font-size: 13px }

.foot { margin: 24px 8px 0; font-size: 12px; color: var(--ink-weak) }

[hidden] { display: none !important }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }