/* アプリ画面（LP・ダッシュボード・設定・アナリティクス）の共通スタイル */
/* 文字の選択のハイライト。アクセント（--accent。ダークでは明るい青）を白で薄めたパステルに、文字はその色で濁らせた黒（公開ページの profile.css と同じ決め方） */
::selection { background: color-mix(in srgb, var(--accent) 35%, #ffffff); color: color-mix(in srgb, var(--accent) 35%, #111111); }
:root {
  color-scheme: light;
  --bg: #f7f7f5; --fg: #171717; --muted: #737373; --border: #e5e5e3; --card: #ffffff;
  --primary: #111111; --primary-fg: #ffffff; --primary-hover: #333333; --danger: #c5221f; --ok: #137333; --radius: 10px;
  --hover: #ebebe8; --hover-soft: #f0f0ee; --subtle: #fafaf8; --code-bg: #eeeeec; --header-bg: rgba(247,247,245,.85);
  --input-bg: #ffffff; --input-border: #d4d4d2; --focus: #9db8d2; --link: #1a73e8;
  --ok-bg: #e6f4ea; --danger-bg: #fce8e6; --danger-border: #f1c4c1; --warn-fg: #9a6700; --warn-bg: #fdf9e7; --warn-border: #ecd9a3;
  --switch-off: #d1d1cf; --switch-on: #4a4a48; --disabled-bg: #d9d9d7; --disabled-fg: #8a8a88;
  --chart-views: #111111; --chart-clicks: #9db8d2; --tip-bg: #111111; --tip-fg: #ffffff;
  --accent: #3b82f6; --accent-bg: #eff6ff; --accent-border: #bfdbfe; --accent-soft: #f8fbff; --preview-bg: #e9e9e6;
  --menu-shadow: 0 10px 30px rgba(0,0,0,.12); --mark-ring: transparent;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif;
}
/* ダーク配色。明示（data-theme="dark"）と、「システムに合わせる」（属性なし）で OS がダークのとき。lib/colormode.php */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141414; --fg: #ededed; --muted: #a1a1a1; --border: #2e2e2e; --card: #1c1c1c;
    --primary: #f2f2f2; --primary-fg: #111111; --primary-hover: #d4d4d4; --danger: #f28b82; --ok: #81c995;
    --hover: #2a2a2a; --hover-soft: #242424; --subtle: #202020; --code-bg: #2a2a2a; --header-bg: rgba(20,20,20,.85);
    --input-bg: #181818; --input-border: #3a3a3a; --focus: #4c6a88; --link: #8ab4f8;
    --ok-bg: rgba(129,201,149,.14); --danger-bg: rgba(242,139,130,.14); --danger-border: rgba(242,139,130,.35);
    --warn-fg: #fbbf24; --warn-bg: rgba(250,204,21,.08); --warn-border: rgba(250,204,21,.3);
    --switch-off: #3a3a3a; --switch-on: #8a8a8a; --disabled-bg: #2e2e2e; --disabled-fg: #6b6b6b;
    --chart-views: #ededed; --chart-clicks: #6b8fb3; --tip-bg: #ededed; --tip-fg: #111111;
    --accent: #60a5fa; --accent-bg: rgba(59,130,246,.15); --accent-border: rgba(96,165,250,.4); --accent-soft: rgba(59,130,246,.07); --preview-bg: #0c0c0c;
    --menu-shadow: 0 10px 30px rgba(0,0,0,.5); --mark-ring: rgba(255,255,255,.2);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141414; --fg: #ededed; --muted: #a1a1a1; --border: #2e2e2e; --card: #1c1c1c;
  --primary: #f2f2f2; --primary-fg: #111111; --primary-hover: #d4d4d4; --danger: #f28b82; --ok: #81c995;
  --hover: #2a2a2a; --hover-soft: #242424; --subtle: #202020; --code-bg: #2a2a2a; --header-bg: rgba(20,20,20,.85);
  --input-bg: #181818; --input-border: #3a3a3a; --focus: #4c6a88; --link: #8ab4f8;
  --ok-bg: rgba(129,201,149,.14); --danger-bg: rgba(242,139,130,.14); --danger-border: rgba(242,139,130,.35);
  --warn-fg: #fbbf24; --warn-bg: rgba(250,204,21,.08); --warn-border: rgba(250,204,21,.3);
  --switch-off: #3a3a3a; --switch-on: #8a8a8a; --disabled-bg: #2e2e2e; --disabled-fg: #6b6b6b;
  --chart-views: #ededed; --chart-clicks: #6b8fb3; --tip-bg: #ededed; --tip-fg: #111111;
  --accent: #60a5fa; --accent-bg: rgba(59,130,246,.15); --accent-border: rgba(96,165,250,.4); --accent-soft: rgba(59,130,246,.07); --preview-bg: #0c0c0c;
  --menu-shadow: 0 10px 30px rgba(0,0,0,.5); --mark-ring: rgba(255,255,255,.2);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Safari の長押しメニュー（リンク・画像のプレビュー / 保存）を全体で出さない。文字の選択も全体で止め、
   入力欄とタイムラインの投稿の本文（訳の元の文も）だけ選べるようにする */
html { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable]:not([contenteditable="false"]),
.tl-text, .tl-quote-text, .tl-menu-source-text, .tl-noscript { -webkit-user-select: text; user-select: text; }
body { font-family: var(--font); background: var(--bg); color: var(--fg); line-height: 1.6; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }

.site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
/* ヘッダーは全ページ共通で全幅 (箱の幅の上限は付けない)。ロゴは左端、ナビは右端に寄せる (中身が 1200px の中央寄せのページでも同じ) */
.site-header__inner { padding: 0 16px; height: var(--header-h, 52px); display: flex; align-items: center; justify-content: space-between; gap: 12px; }   /* --header-h: エディタはスマホで低くする (editor.css) */
.brand { font-weight: 900; font-size: 18px; letter-spacing: -.02em; text-decoration: none; color: var(--fg); }
.brand::after { content: ".me"; color: var(--muted); font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav__link { padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 500; white-space: nowrap; }
.site-nav__link:hover { background: var(--hover); color: var(--fg); }
.site-nav__link.is-active { color: var(--fg); background: var(--hover); }
.site-nav__handle { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.site-nav__handle .ti-icon { width: 14px; height: 14px; flex: none; }   /* 公開ページを開く印。エディタ以外のページは .ti-icon の大きさの指定 (editor.css) を読まないのでここで決める */
/* スマホ: ナビが画面からはみ出さないよう、ロゴの右の残り幅で横にスクロールさせる */
@media (max-width: 640px) {
  .site-nav__handle { display: none; }
  .site-header__inner { gap: 8px; }
  .logomenu-wrap { flex: none; }
  /* ロゴは f のマークだけ (folita.me の文字と ▾ は出さない。ボタンはそのままメニューを開く) */
  .brand--menu .brand__text, .brand--menu .brand__caret { display: none; }
  .brand--menu { gap: 0; padding: 5px; margin-left: -4px; }
  .site-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav__link { padding: 6px 8px; font-size: 13px; }
}

.flash { max-width: 1200px; margin: 12px auto 0; padding: 10px 16px; border-radius: 8px; font-weight: 500; }
.flash--success { background: var(--ok-bg); color: var(--ok); }
.flash--error { background: var(--danger-bg); color: var(--danger); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--fg); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s; }
.btn:hover { background: var(--hover-soft); }
.btn--primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--danger { color: var(--danger); border-color: var(--danger-border); }
.btn--danger:hover { background: var(--danger-bg); }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--lg { padding: 13px 24px; font-size: 16px; border-radius: 12px; }
.btn--ghost { background: transparent; border-color: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.container--narrow { max-width: 760px; }
.page-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.page-lead { color: var(--muted); margin: 0 0 20px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 16px; }
.card__title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.field { margin-bottom: 14px; }
.field__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.field__hint { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.field__input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); font-size: 14px;
}
.field__input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.field textarea { min-height: 90px; resize: vertical; }
.handle-input { display: flex; align-items: center; gap: 6px; }
.handle-input .at { color: var(--muted); font-weight: 700; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; vertical-align: middle; margin-left: 6px; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--lock { display: inline-flex; align-items: center; gap: 3px; }   /* 鍵アカウント: X の錠 + 「鍵」 */
.badge__icon { width: 12px; height: 12px; flex: none; }
.badge--ng { background: var(--danger-bg); color: var(--danger); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* 連携一覧（設定） */
.links { display: flex; flex-direction: column; gap: 10px; }
.link-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--subtle); padding: 10px 14px; }
.link-row__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); }
.link-row__body { flex: 1; min-width: 0; }
.link-row__provider { font-weight: 700; }
.link-row__meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social { display: flex; flex-direction: column; gap: 8px; }
.btn-social { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 9px 60px; font-size: 13.5px; font-weight: 600; color: var(--fg); background: var(--card); border: 1px solid var(--input-border); border-radius: 8px; text-decoration: none; cursor: pointer; }
.btn-social__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; }
.btn-social:hover { background: var(--hover-soft); }
.btn-social:disabled { color: var(--muted); cursor: not-allowed; }
.btn-social:disabled svg { opacity: .45; }
.pending { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg); }
.pending__form { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pending__code { width: 140px; font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: 4px; text-align: center; }
.pending__actions { display: flex; gap: 16px; margin-top: 8px; }
.link-btn { padding: 0; font-size: 12.5px; color: var(--link); background: none; border: none; cursor: pointer; text-decoration: underline; }

/* LP */
/* LP（index.php）。ヒーローは上にアクセントの淡い光、機能カードは Tabler の線画をアクセント色のチップに載せ、ホバーでわずかに浮く */
.hero { position: relative; text-align: center; padding: 72px 16px 40px; }
.hero::before { content: ""; position: absolute; left: 50%; top: -120px; width: min(900px, 120vw); height: 420px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.hero__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 99px; font-size: 12px; color: var(--muted); background: var(--card); }
.hero__badge .ti-icon { width: 14px; height: 14px; color: var(--accent); }
.hero__title { font-size: clamp(34px, 7vw, 60px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin: 18px 0 16px; }
.hero__lead { max-width: 640px; margin: 0 auto 28px; font-size: 16px; line-height: 1.75; color: var(--muted); }
.hero__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) { .hero__lead br { display: none; } }   /* 狭い画面では文の途中で折り返すので <br> の改行を外す */
.hero__actions .ti-icon { width: 18px; height: 18px; margin-left: 4px; }
.features { max-width: 1100px; margin: 0 auto; padding: 16px 16px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.features:last-of-type { padding-bottom: 80px; }
.features__head { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; font-size: clamp(18px, 3vw, 22px); font-weight: 800; }
.features__label { padding: 2px 12px; border-radius: 99px; background: var(--fg); color: var(--bg); font-size: 14px; }
.feature { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px 20px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.feature:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 11px;
  background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent); }
.feature__icon .ti-icon { width: 22px; height: 22px; }
.feature__title { font-weight: 700; margin: 0 0 4px; }
.feature__desc { color: var(--muted); margin: 0; font-size: 13.5px; line-height: 1.7; }
.site-footer { border-top: 1px solid var(--border); padding: 24px; text-align: center; color: var(--muted); font-size: 12px; }
.site-footer a { color: var(--muted); }

/* アナリティクス */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.stat__label { font-size: 12px; color: var(--muted); }
.stat__value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 8px; }
.chart__bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; position: relative; }
.chart__views { background: var(--chart-views); border-radius: 3px 3px 0 0; min-height: 2px; }
.chart__clicks { background: var(--chart-clicks); border-radius: 3px 3px 0 0; min-height: 0; margin-top: 2px; }
.chart__bar:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--tip-bg); color: var(--tip-fg); font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 2; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table td, .table th { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 設定（タブ + 行形式。/settings と、タブの無い連携パネル /integrations で共用） */
.settings { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; }
.settings__title { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.settings__lead { color: var(--muted); font-size: 13.5px; margin: 0 -16px 22px; padding: 0 16px 16px; border-bottom: 1px solid var(--border); }
.settings__h2 { display: flex; align-items: center; gap: 8px; }
.settings-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); margin: 0 -16px 22px; padding: 0 16px; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab { flex: none; padding: 10px 12px; margin-bottom: -1px; font-size: 15px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.settings-tab:hover { color: var(--fg); }
.settings-tab.is-active { color: var(--fg); font-weight: 700; border-bottom-color: var(--fg); }
.settings__h2 { font-size: 20px; font-weight: 800; margin: 6px 0 12px; }
.settings__h3 { font-size: 15px; font-weight: 700; margin: 6px 0 2px; display: flex; align-items: center; gap: 8px; }
.sdivider { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

.srow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
a.srow { text-decoration: none; color: inherit; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
a.srow:hover { background: var(--hover-soft); }
.srow__body { flex: 1; min-width: 0; }
.srow__label { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.srow__value { margin-top: 4px; font-size: 15px; overflow-wrap: anywhere; }
.srow__value--empty { color: var(--muted); }
.srow__desc { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.srow__action { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--fg); background: none; border: 0; padding: 6px 0 6px 10px; cursor: pointer; font-size: 14px; text-decoration: none; }
.srow__action svg { width: 14px; height: 14px; transition: transform .15s; }
.srow__action--btn { border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; background: var(--card); font-size: 13.5px; }
.srow__action--btn:hover { background: var(--hover-soft); }
.srow__action--btn:disabled { opacity: .5; cursor: not-allowed; }

/* 「変更 ›」で開く編集画面（一覧の代わりに同じタブの下に出す） */
.sedit-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; margin: 6px 0 22px; }
.sedit-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 8px; color: var(--fg); text-decoration: none; }
.sedit-back:hover { background: var(--hover); }
.sedit-back svg { width: 16px; height: 16px; transform: rotate(180deg); }
.sedit-form .field { margin-bottom: 20px; }
.sedit-form .field__label { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.sedit-form .field__input { padding: 12px 14px; font-size: 15px; }
.sedit-form .field__hint { margin-top: 8px; }
.sedit-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sedit-actions .btn { padding: 10px 18px; }
.sedit-actions .btn--primary:disabled { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-fg); opacity: 1; }
.swarn { border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: 10px; padding: 14px 16px; margin: 0 0 20px; }
.swarn__title { font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.swarn ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; }
.swarn li + li { margin-top: 4px; }
.prefix-input { display: flex; align-items: center; gap: 8px; }
.prefix-input__prefix { flex: none; color: var(--fg); font-size: 15px; }
.prefix-input .field__input { flex: 1; min-width: 0; }
.pw-input { position: relative; }
.pw-input .field__input { padding-right: 46px; }
.pw-input__eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.pw-input__eye:hover { background: var(--hover-soft); color: var(--fg); }
.pw-input__eye svg { width: 20px; height: 20px; }
.slink-help { display: inline-block; font-size: 12.5px; color: var(--muted); text-decoration: underline; margin-top: -8px; margin-bottom: 20px; }

/* 連携パネル（/integrations）: OAuth のデータソース 1 件ずつのカード */
.dsrc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.ptabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 0 10px; scrollbar-width: thin; }
.ptab { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; padding: 8px 4px; border-radius: 12px; border: 1px solid transparent; color: var(--fg); text-decoration: none; }
.ptab:hover { background: var(--hover-soft); }
.ptab[aria-selected="true"] { background: var(--card); border-color: var(--fg); }
.ptab__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--hover-soft); display: flex; align-items: center; justify-content: center; }
.ptab[aria-selected="true"] .ptab__icon { background: var(--card); }
.ptab__icon svg { width: 22px; height: 22px; }
.ptab__label { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ptab--off .ptab__icon, .ptab--off .ptab__label { opacity: .45; }
.ptab--off[aria-selected="true"] .ptab__icon, .ptab--off[aria-selected="true"] .ptab__label { opacity: 1; }
.dsrc { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; background: var(--card); }
.dsrc__head { display: flex; align-items: center; gap: 12px; }
.dsrc__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--hover-soft); display: flex; align-items: center; justify-content: center; }
.dsrc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dsrc__avatar svg { width: 22px; height: 22px; }
.dsrc__body { flex: 1; min-width: 0; }
.dsrc__name { font-weight: 700; font-size: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dsrc__name svg { width: 16px; height: 16px; }
.dsrc__name .badge { margin-left: 0; }
.dsrc__data { margin-top: 10px; }
.dsrc__data td { overflow-wrap: anywhere; }
.dsrc__data td:first-child { color: var(--muted); width: 32%; white-space: nowrap; }
/* Google の下のサービス（YouTube・カレンダーなど） */
.dsub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.dsub__title { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.dsub__item { padding: 10px 0; }
.dsub__item + .dsub__item { border-top: 1px dashed var(--border); }
.dsub__icon { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.dsub__icon svg { width: 24px; height: 24px; }
.dsub__error { margin: 8px 0 0; font-size: 13px; color: var(--danger); }
.dsub__label { font-size: 12.5px; font-weight: 700; margin: 12px 0 6px; }
.dsub__channel { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: inherit; text-decoration: none; font-size: 14px; }
.dsub__channel img { width: 28px; height: 28px; border-radius: 50%; }
.dsub__videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dsub__video { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; min-width: 0; }
.dsub__thumb { display: block; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--hover-soft); }
.dsub__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dsub__vtitle { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* トグルスイッチ */
.switch { position: relative; display: inline-block; flex: none; width: 52px; height: 30px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { position: absolute; inset: 0; background: var(--switch-off); border-radius: 99px; transition: background .15s; cursor: pointer; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .switch__track { background: var(--switch-on); }
.switch input:checked + .switch__track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: .5; cursor: not-allowed; }

/* ソーシャル連携の一覧 */
.slink { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.slink__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; }
.slink__icon svg { width: 22px; height: 22px; }
.slink__name { flex: 1; min-width: 0; font-size: 15px; }
.slink__meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbtns { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 4px; }
/* パスキー・セキュリティキー（設定「アカウント」タブ。登録は assets/js/webauthn.js） */
.slink--link { color: inherit; text-decoration: none; border-radius: 8px; }
.slink--link:hover { background: var(--hover-soft); }
.wa-add { margin-top: 10px; }
.wa-add .btn svg { width: 18px; height: 18px; }
.wa-add .btn.is-busy { opacity: .6; cursor: progress; }
.wa-notice { font-size: 13px; color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 8px; padding: 10px 12px; margin: 10px 0 0; }
.wa-notice.is-ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
/* 二段階認証（設定 ?edit=totp。lib/totp.php）: QR + 手入力用の鍵、リカバリーコードの一覧、6 桁の入力欄 */
.totp-steps { margin: 0 0 16px; padding-left: 1.5em; font-size: 13.5px; color: var(--note); line-height: 1.8; }
.totp-setup { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.totp-qr { flex: none; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.totp-key { flex: 1; min-width: 220px; }
.totp-key .field__label { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.totp-secret { display: block; font-size: 15px; letter-spacing: .06em; padding: 8px 10px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.totp-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .18em; max-width: 240px; }
.totp-recovery { margin-bottom: 4px; }
.totp-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 10px 0 4px; }
.totp-codes code { font-size: 15px; padding: 7px 8px; text-align: center; letter-spacing: .04em; }
.scode { display: block; word-break: break-all; padding: 8px 10px; font-size: 12.5px; }
.spre { background: var(--subtle); border: 1px solid var(--border); border-radius: 8px; padding: 10px; overflow-x: auto; margin: 0; font-size: 12px; }

/* ロゴメニュー（ヘッダー左端。lib/layout.php の folita_logo_menu()、assets/js/logomenu.js） */
.logomenu-wrap { position: relative; }
.brand--menu { display: inline-flex; align-items: center; gap: 7px; margin-left: -6px; padding: 5px 8px 5px 6px; border: 0; border-radius: 8px; background: none; cursor: pointer; line-height: 1; }
.brand--menu::after { content: none; }
.brand--menu .brand__text::after { content: ".me"; color: var(--muted); font-weight: 600; }
.brand--menu:hover, .brand--menu.is-active { background: var(--hover); }
.brand--menu:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.brand__mark { display: block; width: 22px; height: 22px; border-radius: 5px; box-shadow: 0 0 0 1px var(--mark-ring); }
.brand__caret { display: flex; color: var(--muted); }
.brand__caret svg { width: 14px; height: 14px; transition: transform .15s; }
.brand--menu.is-active .brand__caret svg { transform: rotate(180deg); }
.logomenu { position: absolute; top: calc(100% + 6px); left: -6px; z-index: 50; min-width: 250px; padding: 5px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--menu-shadow); font-size: 13.5px; }
.logomenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--fg); font: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.logomenu__item:hover, .logomenu__item:focus-visible, .logomenu__item.is-open { background: var(--hover); outline: none; }
.logomenu__icon { display: flex; flex: none; justify-content: center; width: 18px; color: var(--muted); }
.logomenu__icon svg { width: 16px; height: 16px; }
.logomenu__label { flex: 1; }
.logomenu__key, .logomenu__value, .logomenu__arrow { display: flex; flex: none; align-items: center; color: var(--muted); font-size: 12px; }
.logomenu__key svg, .logomenu__arrow svg { width: 14px; height: 14px; }
.logomenu__check svg { visibility: hidden; color: var(--fg); }
.logomenu__item[aria-checked="true"] .logomenu__check svg { visibility: visible; }
.logomenu__item[aria-checked="true"] .logomenu__label { font-weight: 700; }
.logomenu__sep { height: 1px; margin: 5px 6px; background: var(--border); }
/* サブメニュー（表示モード）: 横に開く。::before はホバーが途切れないようにする透明な橋 */
.logomenu__group { position: relative; }
.logomenu--sub { display: none; top: -6px; left: calc(100% + 4px); min-width: 210px; }
.logomenu--sub::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px; }
.logomenu__item--sub.is-open + .logomenu--sub { display: block; }
@media (hover: hover) and (min-width: 641px) {
  .logomenu__group:hover > .logomenu--sub { display: block; }
  .logomenu__group:hover > .logomenu__item--sub { background: var(--hover); }
}
/* スマホ: 画面幅いっぱいに出し、サブメニューは下に展開する */
@media (max-width: 640px) {
  .logomenu { position: fixed; top: var(--header-h, 52px); left: 12px; right: 12px; min-width: 0; }
  .logomenu--sub { position: static; min-width: 0; margin: 2px 0 4px 20px; padding: 0 0 0 8px; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  .logomenu--sub::before { content: none; }
  .logomenu__item--sub .logomenu__arrow svg { transform: rotate(90deg); }
}

/* 設定の編集画面の選択肢（ラジオ・チェックボックス + 説明） */
.schoice { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-size: 14.5px; cursor: pointer; }
.schoice input { flex: none; margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--primary); }
.schoice small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* タイムライン設定（/timeline） */
.tl-admin-add .btn svg { width: 15px; height: 15px; }
.tl-admin-off { opacity: .6; }
.tl-admin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.tl-admin-inline { display: flex; align-items: center; gap: 8px; margin: 0; }
.tl-admin-select { width: auto; max-width: 100%; padding: 6px 10px; font-size: 13px; }
.srow .tl-admin-select { flex: none; max-width: 48%; }
.tl-admin-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.tl-admin-actions form { margin: 0; }
.dsrc__name > svg { width: 16px; height: 16px; }
.tl-admin-meter { margin: 6px 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--subtle); }
.tl-admin-meter__track { height: 8px; margin-top: 8px; border-radius: 99px; background: var(--hover); overflow: hidden; }
.tl-admin-meter__track span { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.tl-admin-meter.is-warning .tl-admin-meter__track span { background: #f59e0b; }
.tl-admin-meter.is-critical .tl-admin-meter__track span { background: var(--danger); }

/* 管理ページ（admin.php）の「アカウント」タブ: Notion のデータベース（テーブルビュー）風の一覧。
   上のバー（ビュー名 + 件数 / 種類のチップ / 検索）、薄い罫線の表（行はホバーで少し色づく）、プロパティはタグ（.ntag。種類は select をタグの形にして選ぶと即保存）。
   メールは先頭 3 文字以降を • で隠す（lib/admin.php の folita_admin_mask_email） */
.settings--wide { max-width: 1100px; }
.ndb { margin-top: -6px; }
.ndb__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 2px 0 8px; }
.ndb__view { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin-left: -8px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.ndb__view svg { width: 16px; height: 16px; color: var(--muted); }
.ndb__count { font-weight: 500; font-size: 12px; color: var(--muted); }
.ndb__tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ndb__filters { display: flex; align-items: center; gap: 2px; }
.ndb__chip { padding: 3px 10px; border: 1px solid transparent; border-radius: 99px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.ndb__chip:hover { background: var(--hover-soft); color: var(--fg); }
.ndb__chip.is-active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); font-weight: 600; }
a.ndb__chip, a.ndb__chip:hover { text-decoration: none; }   /* リンクのバッジ（API タブの「自分のみ」）は下線を出さない */
a.ndb__chip.is-active { color: light-dark(#1f3f66, #bcd3f0); }   /* 選択中の文字は淡い青の背景になじむ落ち着いた紺（濃い青にも黒にもしない。.ntag--* と同じ「淡い背景 + 同系の濃い文字」の組み合わせ） */
.settings, .settings * { -webkit-tap-highlight-color: transparent; }   /* 設定・管理ページ: スマホのタップの水色のハイライトを出さない */
.ndb__search { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 4px 8px; border-radius: 6px; color: var(--muted); }
.ndb__search:hover, .ndb__search:focus-within { background: var(--hover-soft); }
.ndb__search svg { width: 15px; height: 15px; flex: none; }
.ndb__search input { width: 160px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 13.5px; outline: none; }
.ndb__search input::placeholder { color: var(--muted); }
.ndb__scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.ndb__table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; }
.ndb__table th { padding: 7px 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; white-space: nowrap; }
.ndb__table th svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.ndb__table th + th, .ndb__table td + td { border-left: 1px solid var(--border); }
.ndb__table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.ndb__table tbody tr:hover td { background: var(--hover-soft); }
.ndb__name a { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; color: inherit; text-decoration: none; font-weight: 500; }
.ndb__name a span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ndb__name a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.ndb__avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--hover); }
.ndb__avatar--initial { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.ndb__handle, .ndb__date, .ndb__empty { color: var(--muted); }
.ndb__mono, .ndb__id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.ndb__id { color: var(--muted); font-size: 12px; }
.ndb__verified { display: inline-block; width: 14px; height: 14px; margin-left: 6px; color: var(--ok); vertical-align: -2px; }
.ndb__provs { line-height: 0; }
.ndb__prov { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--fg); font-size: 10px; line-height: 1; vertical-align: middle; }
.ndb__prov + .ndb__prov { margin-left: 4px; }
.ndb__prov svg { width: 14px; height: 14px; }   /* ロゴの固有の大きさ (16〜26px) を揃える */
.ndb__role { display: flex; align-items: center; gap: 6px; margin: 0; }
.ndb__foot { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 8px 10px; font-size: 12px; color: var(--muted); }
.ndb__foot b { color: var(--fg); font-weight: 600; }
.ndb__foot-note { flex: 1 1 320px; }
/* タグ（Notion のセレクトの色: 灰 / 赤 / 緑。ダークは同系の暗い地） */
.ntag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background-color: light-dark(#e3e2e0, #373737); color: light-dark(#32302c, #d5d5d5); font-size: 13px; line-height: 20px; white-space: nowrap; }
.ntag + .ntag { margin-left: 4px; }
.ntag--admin { background-color: light-dark(#ffe2dd, #522e2a); color: light-dark(#93000a, #ffb5ab); }
.ntag--contributor { background-color: light-dark(#dbeddb, #2b593f); color: light-dark(#1c3829, #b5e2c8); }
.ntag--standard { background-color: light-dark(#e3e2e0, #373737); color: light-dark(#32302c, #d5d5d5); }
.ntag--super { background-color: light-dark(#e8deee, #4a3560); color: light-dark(#492f64, #e2d3f2); }   /* 最高管理者 (config で固定。鍵付き) は紫 */
.ntag--warn { background-color: light-dark(#fdecc8, #5c4a1f); color: light-dark(#402c1b, #f5dfa6); }   /* 期限切れ・上限 (Notion の黄) */
.ntag--ok { background-color: light-dark(#dbeddb, #2b593f); color: light-dark(#1c3829, #b5e2c8); }   /* 問題なし (管理ページ「サイト」の twikit が最新、など。contributor と同じ緑) */
.ntag code { font: inherit; background: none; padding: 0; }   /* タグの中のハッシュは等幅にせず、タグの文字のまま */
a.ntag { text-decoration: none; }
a.ntag:hover { text-decoration: underline; }
.ndb__table--api td.ndb__narrow > .ntag { display: flex; justify-content: center; }   /* 「プロバイダ」の列のタグは全部、いちばん長いタグで決まる列の幅に揃え、中身は中央に */
.ndb__calls { display: flex; align-items: center; justify-content: space-between; gap: 12px; white-space: nowrap; }   /* 「呼び出し · 単位」の列: ピルは左、単位は右 */
.ndb__units { font-variant-numeric: tabular-nums; }
.ndb__badges { display: inline-flex; align-items: stretch; height: 20px; border-radius: 10px; overflow: hidden; vertical-align: middle; }   /* 呼び出しの成功 / 失敗を 1 つのピルに（Material のトーナル配色。左が成功、右が失敗。管理ページ「API」タブ） */
.ndb__badge { display: inline-flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ndb__badge--ok { background-color: light-dark(#c8e6c9, #2e4d33); color: light-dark(#1b4d20, #b9e2bb); }   /* 成功 (2xx): Material の緑のトーナル */
.ndb__badge--ng { background-color: light-dark(#ffdad6, #5c2f2a); color: light-dark(#93000a, #ffb4ab); }   /* 失敗: Material の error container */
/* 緑と赤の境目は「／」の向きの斜め: 赤を緑の右端に 5px 重ね、赤の左端を上が右・下が左の斜線で切る（clip-path）。重なる分だけ赤の左の余白を足す */
.ndb__badge--ok + .ndb__badge--ng { margin-left: -5px; padding-left: 10px; clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%); }
.ntag--logo { gap: 4px; }   /* 管理ページ「API」タブの「プロバイダ」の列。X / DeepL は文字の代わりに公式ロゴ（塗りは文字色） */
.ntag--logo svg, .ntag__avatar { display: block; flex: none; }   /* flex の縮みで幅を持たない SVG が 0 になるので縮めない */
.ntag--logo svg { height: 13px; width: auto; }
.ntag--logo-x svg { width: 11px; height: 10px; }   /* X のマークは正方形に近いので少し小さく */
.ntag--logo-x-web svg { width: 12px; height: 12px; }   /* GitHub のマーク + 持ち主の GitHub のアイコン + 「amanetoki7 / twikit」 */
.ntag__avatar { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }
.ntag__bar { flex: none; width: 1px; height: 12px; background: currentColor; opacity: .35; }   /* GitHub のマークとアイコンの間の「｜」 */
.ntag__text { margin-left: 2px; }   /* ロゴの後ろの文字。gap (4px) より少し広く空ける */
.ntag__link { color: inherit; text-decoration: none; }   /* GitHub のユーザー / リポジトリへのリンク。ホバーで黒い下線（ダークモードは白） */
.ntag__link:hover { text-decoration: underline; text-decoration-color: light-dark(#000, #fff); text-underline-offset: 2px; }
.ntag__sep { margin-left: 0.13em; }   /* 「amanetoki7 /twikit」の「/」。前は通常の空白 (約 0.26em) の半分、後ろは余白なし */
.ntag--logo-deepl-own .brand-text,
.ntag--logo-deepl .brand-text { height: 11px; }   /* DeepL の文字はマーク (13px) より少し低く。元のロゴの比率 (文字 7px) より大きい */
/* 管理ページのアイコン (admin.php の $icon)。置き場所の規則が無くても 14px に収める (無いと SVG が幅いっぱいに広がる) */
.adm-icon { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.srow__label .adm-icon { margin-right: 4px; color: var(--muted); }
/* 管理ページ「アカウント」の API の列 (今月の X API・DeepL の回数と概算コスト。押すと API タブ) と「API」タブ (数の列は右寄せ、月の送り) */
.ndb__api a { display: inline-flex; gap: 10px; color: inherit; text-decoration: none; }
.ndb__api a:hover .ndb__api-item b { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.ndb__api-item { font-size: 13px; color: var(--muted); }
.ndb__api-item b { font-weight: 600; color: var(--fg); }
.ndb__api-cost { color: var(--fg); font-variant-numeric: tabular-nums; }
.ndb__saved { color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }   /* X の Web 版（twikit）で浮いた額（Saved $n）。緑 */
.ndb__api-quota { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ndb__table th.ndb__num { text-align: right; }
.ndb__table td.ndb__num { text-align: right; font-variant-numeric: tabular-nums; }
.ndb__month { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; }
.ndb__month form { display: inline; margin: 0; }
.ndb__month a, .ndb__month .is-disabled { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); }
.ndb__month a:hover { background: var(--hover-soft); color: var(--fg); }
.ndb__month .is-disabled { opacity: .35; }
.ndb__month select { cursor: pointer; }
/* API タブのユーザーのグループ（Notion のグループ化: 見出し行に合計、矢印で折りたたみ） */
.ndb__group td { background: var(--hover-soft); font-weight: 600; }
.ndb__group-head { display: flex; align-items: center; gap: 8px; }   /* td 自体を flex にするとテーブルセルでなくなり列がずれるので、中の div で並べる */
.ndb__group .ndb__name a { max-width: 320px; }
.ndb__table--api .ndb__group .ndb__name .ndb__author { max-width: 180px; }   /* API タブの見出しはプロバイダ + 呼び出しの 2 列分。名前が長くても列を広げず … に */
/* 名前 / @handle を上下 2 段（つぶやきの投稿者の表示と同じ）。アイコンは 2 段に合わせて 36px */
.ndb__author { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ndb__avatar--lg { width: 36px; height: 36px; font-size: 15px; }
.ndb__author-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ndb__author-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndb__author-handle { font-weight: 400; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ndb__author:hover .ndb__author-name { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.ndb__group td { padding-top: 8px; padding-bottom: 8px; }
/* 見出しの右側: プロバイダーごとの概算コストと節約（数の列ではなく名前の側に置く） */
.ndb__group-sum { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; padding-left: 12px; line-height: 1.25; text-align: right; }   /* セルの右端に金額 / エンドポイント数を上下 2 段 */
.ndb__group-cost { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ndb__group-cost-item b { font-weight: 600; }
.ndb__group .ndb__handle, .ndb__group .ndb__count { font-weight: 500; }
.ndb__group-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.ndb__group-toggle:hover { background: var(--hover); color: var(--fg); }
.ndb__group-toggle svg { transition: transform .15s; }
.ndb__group[aria-expanded="true"] .ndb__group-toggle svg { transform: rotate(90deg); }
.ndb__group .ndb__avatar--initial svg { width: 12px; height: 12px; }
.ndb__in-group td:first-child { padding-left: 38px; }
/* API タブ: ユーザーのグループの中の X アカウントの小グループ（小見出しは背景なし・字下げ、その中のエンドポイントの行はさらに字下げ） */
.ndb__subgroup td { background: none; font-weight: 500; padding-top: 6px; padding-bottom: 6px; }
.ndb__subgroup .ndb__author-name { font-weight: 600; font-size: 13px; }
.ndb__subgroup .ndb__author-handle { font-size: 12px; }
.ndb__subgroup .ndb__avatar--initial svg { width: 11px; height: 11px; }
/* API タブの X アカウントの小見出し: 名前の右に認証済みのチェック（X。青。企業は金、政府は灰）と鍵アカウントの錠（公開ページの投稿の見出しの .tl-marks と同じ印） */
.ndb__marks { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; vertical-align: -2px; }
.ndb__mark { display: inline-flex; }
.ndb__mark svg { width: 14px; height: 14px; }
.ndb__mark--verified { color: #1d9bf0; }
.ndb__mark--verified.is-business { color: #e2b719; }
.ndb__mark--verified.is-government { color: #829aab; }
.ndb__mark--lock { color: var(--muted); }
.ndb__mark--lock svg { width: 13px; height: 13px; }
.ndb__subgroup[aria-expanded="true"] .ndb__sub-toggle svg { transform: rotate(90deg); }
.ndb__in-sub td:first-child { padding-left: 62px; }
.ndb__table .ndb__narrow { width: 1%; }   /* 中身の幅に縮める列（プロバイダーのタグ。余りはエンドポイントの列へ） */
.ndb__table--api th, .ndb__table--api td { padding-left: 8px; padding-right: 8px; }   /* API タブは数の列が多いので詰める。幅の余りはエンドポイントの列に */
.ndb__table--api .ndb__narrow .ndb__handle { font-size: 12px; }
/* スマホ: API タブはプロバイダ・呼び出し · 単位・概算コストの 3 列を画面の幅に収め、エンドポイントの列だけ横スクロールで見る */
@media (max-width: 640px) {
  .ndb__scroll--api { padding: 0; }   /* 表を画面の端まで使う（左右の余白 16px は諦める） */
  .ndb__scroll--api .ndb__table--api { width: calc(100% + 260px); min-width: 0; font-size: 13px; }   /* 画面の幅 + エンドポイントの列。3 列で画面の幅をちょうど埋め、エンドポイントの列は画面の右端の外から */
  .ndb__table--api .ndb__narrow { width: auto; }   /* 余りの幅は 3 列に配る（PC の「中身の幅に縮める」は使わない） */
  .ndb__table--api th, .ndb__table--api td { padding-left: 5px; padding-right: 5px; }
  .ndb__table--api th:first-child, .ndb__table--api td:first-child, .ndb__table--api .ndb__in-group td:first-child { padding-left: 10px; }   /* 画面の端の余白（展開した行の字下げは無し） */
  .ndb__table--api .ndb__in-sub td:first-child { padding-left: 18px; }   /* 小グループの中の行だけ少し字下げ */
  .ndb__table--api th:nth-child(3), .ndb__table--api td:nth-child(3) { padding-right: 10px; }   /* 概算コストは画面の右端に付くので余白を */
  .ndb__table--api th:last-child, .ndb__table--api td:last-child { width: 260px; min-width: 260px; max-width: 260px; }   /* エンドポイントの列はスクロールの先へ */
  .ndb__table--api .ntag { font-size: 11.5px; padding: 0 6px; }
  .ndb__table--api .ndb__calls { flex-wrap: wrap; gap: 2px 8px; }   /* ピルと単位は同じ行で縦の中央に揃え、幅が足りない端末だけ単位を下の段（右寄せ）へ */
  .ndb__table--api .ndb__units { margin-left: auto; font-size: 12px; }
  .ndb__table--api .ndb__group-head { flex-wrap: wrap; row-gap: 4px; }   /* 見出しの金額とピルは名前の下の行へ */
  .ndb__table--api .ndb__group .ndb__name .ndb__author { max-width: 150px; }
}
/* API タブの単価の表（脚注の下。小さめ） */
.ndb__prices { margin-top: 14px; max-width: 560px; }
.ndb__prices-h { display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px; margin-left: -8px; font-size: 13px; font-weight: 600; }
.ndb__prices-h svg { width: 14px; height: 14px; color: var(--muted); }
.ndb__table--prices { font-size: 13px; }
.ndb__warn { color: light-dark(#93000a, #ffb5ab); }   /* 呼び出し (成功) の成功が呼び出しより少ない = 失敗あり */
/* 管理ページ「コード」タブ (プロモーションコード): 一覧の操作 (失効 / 再開) とメモの列、詳細の URL */
.ndb__actions form { display: inline; margin: 0; }
.ndb__note { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ndb__table--narrow { min-width: 0; }
.promo-url { display: inline-block; max-width: 100%; padding: 2px 6px; border-radius: 6px; background: var(--code-bg); font-size: 12.5px; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.settings__h3 .muted { font-weight: 500; font-size: 13px; }
.settings__h3 > svg { width: 16px; height: 16px; color: var(--muted); }
.ntag--super svg { width: 12px; height: 12px; margin-right: 4px; }
select.ntag { -webkit-appearance: none; appearance: none; padding-right: 20px; border: 0; font: inherit; font-size: 13px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 5px center; background-size: 10px; }
select.ntag:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
select.ntag:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* 翻訳ミニアプリ（/translate。assets/js/timeline.js の TranslateApp。timeline.css は公開ページの --f-* を使うので、アプリのページの色に読み替える） */
.translate-page { --f-text: var(--fg); --f-muted: var(--muted); --f-border: var(--border); --f-accent: var(--accent); --f-nav-accent: var(--accent); --f-bg: var(--bg); --f-surface: var(--card); --f-danger: #d03b3b; margin-top: 12px; }