/* ==========================================================================
   OSAISEN 共通テーマ（home.html と同じデザイントークン／コンポーネント）
   全画面をこのファイル＋各ページの個別スタイルで統一する。
   ========================================================================== */
:root{
  --bg:#120E0C; --bg-soft:#17120F; --surface:#1D1713; --surface-2:#241C17; --surface-3:#2A2018;
  --hairline:#33281F; --hairline-soft:#241C17;
  --ink:#F3ECE2; --ink-dim:#B8A99A; --ink-faint:#7C6D60;
  --shu:#C8442C; --shu-bright:#E85B3E; --gold:#D6AD5C;

  --tier-blue:#4C8DFF; --tier-purple:#A970F0; --tier-emerald:#22C58B;
  --tier-orange:#F5883D; --tier-yellow:#F3C23D; --tier-red:#EF4B4B;

  --display:'Shippori Mincho', serif; --sans:'Zen Kaku Gothic New', sans-serif; --mono:'Roboto Mono', monospace;
  --r-l:20px; --r-m:13px; --r-s:9px;
  --header-h:60px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
/* スマホで画面の両端が切れて表示される不具合対策。
   以前はhtml{zoom:1.2}で画面全体を拡大していたが、zoomはブラウザ/機種によって
   ビューポート幅の計算が崩れ、横スクロールや左右が切れる原因になっていた。
   zoomでの全体拡大はやめ、各要素（フォント・アイコン・ユーザーアイコン等）の
   サイズを個別に大きくする方式に変更した。あわせて、どの機種でも横方向に
   はみ出さないよう、html/bodyの横スクロールを抑止し、幅100%の要素は必ず
   ビューポート幅に収まるようにしておく。 */
html{ width:100%; overflow-x:hidden; }
body{
  margin:0; width:100%; max-width:100%; overflow-x:hidden;
  font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(46% 38% at 14% -6%, #241A12 0%, transparent 60%),
    radial-gradient(50% 40% at 100% 0%, #1A120F 0%, transparent 55%),
    var(--bg);
  min-height:100vh;
}
img, svg, video{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:rgba(214,173,92,.3); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:4px; }

/* ---- ページ共通シェル ---- */
.shell{ max-width:640px; margin:0 auto; min-height:100vh; border-left:1px solid var(--hairline-soft); border-right:1px solid var(--hairline-soft); }
.shell.wide{ max-width:900px; }
.topbar{
  position:sticky; top:0; z-index:20; height:var(--header-h); background:rgba(23,18,15,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline-soft); display:flex; align-items:center; gap:12px; padding:0 16px;
}
.topbar .back{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--hairline); color:var(--ink-dim); flex:0 0 auto;
}
.topbar .back svg{ width:19px; height:19px; }
.topbar h1{ font-family:var(--display); font-weight:700; font-size:20px; margin:0; }
.topbar .sub{ font-size:13px; color:var(--ink-faint); }
.topbar .spacer{ margin-left:auto; }
.content{ padding:20px 20px 60px; }
.content.narrow{ max-width:440px; margin:0 auto; }

/* ---- ブランド ---- */
.brand-mark{ display:flex; align-items:center; gap:9px; }
.brand-mark svg{ width:31px; height:31px; }
.brand-word{
  font-family:var(--display); font-weight:800; font-size:21.5px; letter-spacing:.02em;
  background:linear-gradient(180deg,#F3ECE2,#C7B7A6); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- アバター ---- */
.avatar{
  border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,#3A2E22,#221B15); border:1px solid var(--hairline);
  font-family:var(--display); font-weight:700; color:var(--gold); overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ---- カード ---- */
.panel-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-l); padding:16px; margin-bottom:16px; }
.panel-title{ font-size:17px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.panel-title svg{ width:18px; height:18px; color:var(--gold); }
.section-eyebrow{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin:22px 0 10px; }

/* ---- リスト項目（ユーザー行など） ---- */
.list-item{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--hairline-soft); }
.list-item:last-child{ border-bottom:none; }
.list-item .avatar{ width:50.5px; height:50.5px; font-size:17.5px; }
.list-item .body{ flex:1; min-width:0; }
.list-item .name{ font-weight:700; font-size:16px; }
.list-item .sub{ font-size:14.5px; color:var(--ink-faint); margin-top:1px; }

/* ---- ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:none; border-radius:100px; padding:10px 20px; font-weight:700; font-size:16px; cursor:pointer;
  background:linear-gradient(180deg,var(--shu-bright),var(--shu)); color:#fff; box-shadow:0 8px 18px -9px rgba(200,68,44,.75);
  transition:.15s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.btn.ghost{ background:none; border:1px solid var(--hairline); color:var(--ink-dim); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn.gold{ background:linear-gradient(180deg,#E7C077,var(--gold)); color:#231705; box-shadow:0 8px 18px -9px rgba(214,173,92,.6); }
.btn.danger{ background:linear-gradient(180deg,#E2555C,#B4323A); }
.btn.block{ width:100%; }
.btn.sm{ padding:7px 14px; font-size:14.5px; }

/* ---- フォーム ---- */
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-size:15px; color:var(--ink-dim); margin-bottom:6px; font-weight:600; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row input[type="password"],
.form-row input[type="date"],
.form-row select,
.form-row textarea{
  width:100%; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-m);
  color:var(--ink); font-family:var(--sans); font-size:17px; padding:11px 13px; outline:none; transition:.15s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--gold); }
.form-row input::placeholder, .form-row textarea::placeholder{ color:var(--ink-faint); }
.form-row .hint{ font-size:13px; color:var(--ink-faint); margin-top:6px; line-height:1.6; }
.form-error{ font-size:14.5px; color:var(--tier-red); margin:-6px 0 14px; }

/* Stripeカード情報入力モーダル（myapp/static/js/stripe_payment.js）。 */
.stripe-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px; }
.stripe-modal{ background:var(--bg-card, #1c1c22); border-radius:var(--r-l, 16px); padding:22px; width:100%; max-width:420px; box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.stripe-modal-title{ font-weight:700; font-size:16px; margin-bottom:14px; }
.stripe-card-element{ background:#fff; border-radius:var(--r-m, 10px); padding:12px 14px; margin-bottom:10px; }
.stripe-modal .btn.secondary{ background:transparent; border:1px solid var(--border, #444); color:inherit; margin-top:8px; }
/* 投稿フォームと同じ見た目の文字数カウンター（DMチャット入力欄等でも使用） */
.char-count{ margin-left:auto; font-family:var(--mono); font-size:13.5px; color:var(--ink-faint); }
.char-count.warn{ color:var(--tier-red); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--hairline-soft); font-size:16px; }
.toggle-row:last-child{ border-bottom:none; }
.toggle-row select{ background:var(--surface); border:1px solid var(--hairline); color:var(--ink); border-radius:9px; padding:6px 9px; font-size:15px; }
/* 「アカウントの公開設定」「表示言語」「タイムゾーン」等のselectを含む行は、選択肢の
   文言が長い（例：「日本標準時 (Asia/Tokyo)」）ため、ラベルと横並びのままだと
   幅の狭い画面でラベル（日本語）が1文字ずつ縦に折り返されてしまっていた。
   ラベルとselectを上下2段に分け、selectは常に幅いっぱいに表示する。 */
.toggle-row.select-row{ flex-direction:column; align-items:stretch; gap:8px; }
.toggle-row.select-row select{ width:100%; padding:10px 12px; font-size:15.5px; }
input[type="checkbox"]{ accent-color:var(--shu); width:18px; height:18px; }

/* ---- タブ ---- */
.tabs{ display:flex; border-bottom:1px solid var(--hairline-soft); }
.tab{ flex:1; text-align:center; padding:13px 0 11px; font-size:16px; font-weight:700; color:var(--ink-faint); cursor:pointer; position:relative; }
.tab.active{ color:var(--ink); }
.tab.active::after{ content:""; position:absolute; left:34%; right:34%; bottom:0; height:3px; border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--shu),var(--gold)); }

/* ---- 空表示 / ローディング ---- */
.empty-note{ font-size:15px; color:var(--ink-faint); padding:22px 4px; text-align:center; }

/* ---- テーブル ---- */
.table-simple{ width:100%; border-collapse:collapse; font-size:15px; }
.table-simple th, .table-simple td{ text-align:left; padding:9px 6px; border-bottom:1px solid var(--hairline-soft); color:var(--ink-dim); }
.table-simple th{ color:var(--ink-faint); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }

/* ---- 投げ銭ティア（コメント／DM共通） ---- */
.tier-blue{ color:var(--tier-blue); } .tier-purple{ color:var(--tier-purple); } .tier-emerald{ color:var(--tier-emerald); }
.tier-orange{ color:var(--tier-orange); } .tier-yellow{ color:var(--tier-yellow); } .tier-red{ color:var(--tier-red); }
.legend-chip{ font-family:var(--mono); font-size:12px; font-weight:700; padding:3px 8px; border-radius:100px; color:#1a1310; display:inline-block; }

/* ---- カードグリッド（プラン一覧など） ---- */
.plan-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-l); padding:18px; margin-bottom:14px; }
.plan-card .price{ font-family:var(--mono); font-size:26.5px; font-weight:700; color:var(--gold); margin:6px 0 10px; }
.plan-card p{ font-size:15.5px; color:var(--ink-dim); line-height:1.7; margin:0 0 14px; }
.plan-card.plan-current{ border-color:var(--gold); }
.plan-current-tag{
  display:inline-block; font-size:11.5px; font-weight:700; color:#1A1611; background:var(--gold);
  border-radius:100px; padding:2px 9px; margin-left:6px; vertical-align:middle;
}

/* ---- 承認アカウント認定ダイヤ（要件定義書 3-2）----
   プラン名や投稿者名の横に表示するファセット付きダイヤモンドSVGバッジ。
   色：グリーン=スタンダード／ピンク=プレミアム／ブルー=プロ／レッド=法人／
   レインボー=admin（公式）アカウント。 */
.badge-dia{ display:inline-block; width:0.72em; height:0.72em; margin-left:0.25em; vertical-align:-0.03em; }
.badge-dia svg{ width:100%; height:100%; display:block; overflow:visible; }
.badge-dia.dia-red{ color:#EF4B4B; animation:dia-glow-red 2.4s ease-in-out infinite; }
.badge-dia.dia-blue{ color:#4C8DFF; animation:dia-glow-blue 2.4s ease-in-out infinite; }
.badge-dia.dia-pink{ color:#F0399B; animation:dia-glow-pink 2.4s ease-in-out infinite; }
.badge-dia.dia-green{ color:#22C58B; animation:dia-glow-green 2.4s ease-in-out infinite; }
.badge-dia.dia-rainbow{ animation:dia-glow-rainbow 2.4s ease-in-out infinite; }
.badge-dia.dia-rainbow svg{ transform-box:fill-box; transform-origin:50% 55%; }
/* .panel-title svg{ color:var(--gold); width:18px; height:18px; } という汎用ルールが、
   .panel-title の中に置いたダイヤバッジのsvgにも直接適用されてしまい、本来の
   グリーン/ピンク/ブルー/レッドではなく金色に見えてしまっていた（会員プラン一覧の
   プラン名など）。ダイヤバッジのsvgだけはこちらを優先させ、色・サイズを元に戻す。 */
.panel-title .badge-dia svg{ width:100%; height:100%; color:inherit; }
@keyframes dia-glow-red{ 0%,100%{ filter:drop-shadow(0 0 1.5px rgba(239,75,75,.6)); } 50%{ filter:drop-shadow(0 0 4.5px rgba(239,75,75,1)); } }
@keyframes dia-glow-blue{ 0%,100%{ filter:drop-shadow(0 0 1.5px rgba(76,141,255,.6)); } 50%{ filter:drop-shadow(0 0 4.5px rgba(76,141,255,1)); } }
@keyframes dia-glow-pink{ 0%,100%{ filter:drop-shadow(0 0 1.5px rgba(240,57,155,.6)); } 50%{ filter:drop-shadow(0 0 4.5px rgba(240,57,155,1)); } }
@keyframes dia-glow-green{ 0%,100%{ filter:drop-shadow(0 0 1.5px rgba(34,197,139,.6)); } 50%{ filter:drop-shadow(0 0 4.5px rgba(34,197,139,1)); } }
@keyframes dia-glow-rainbow{ 0%,100%{ filter:drop-shadow(0 0 2px rgba(214,173,92,.65)); } 50%{ filter:drop-shadow(0 0 6px rgba(214,173,92,1)); } }

@media (max-width:480px){
  .content{ padding:16px 14px 50px; }
}

/* ==========================================================================
   投稿カード（検索結果／ハッシュタグ画面など、タイムライン以外の画面で
   home.html と同じ見た目・挙動の投稿カードを表示するための共通スタイル）
   ========================================================================== */
.post{ padding:16px 0; border-bottom:1px solid var(--hairline-soft); display:flex; flex-direction:column; cursor:default; }
.post:last-child{ border-bottom:none; }
.post.clickable{ cursor:pointer; }
.post.clickable:hover{ background:rgba(255,255,255,.015); }
.post-main-row{ display:flex; gap:12px; }
.post .avatar{ width:53px; height:53px; font-size:18px; }
.post-body{ flex:1 1 auto; min-width:0; }
.post.pinned{ background:rgba(214,173,92,.05); }
.pinned-badge{
  display:inline-flex; align-items:center; gap:4px; order:-1; width:100%;
  font-size:11.5px; font-weight:700; color:var(--gold); margin-bottom:2px;
}
.pinned-badge svg{ width:12px; height:12px; }
.post-meta{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.post-meta .name{ font-weight:700; font-size:17.5px; }
.post-meta .handle,.post-meta .dot,.post-meta .time{ font-size:15.5px; color:var(--ink-faint); }
.post-meta .name:hover, .post-meta .handle:hover, a.avatar:hover{ text-decoration:underline; }
.post-text{ margin:4px 0 10px; font-size:17.5px; line-height:1.65; color:#EAE1D5; white-space:pre-line; overflow-wrap:anywhere; word-break:break-all; }
.post-text a.hashtag-link, .post-text a.mention-link, .post-text a.content-link{ font-weight:600; }
.hashtag-link{ color:var(--gold); }
.mention-link{ color:var(--tier-blue); }
.content-link{ color:var(--tier-blue); word-break:break-all; }
a.hashtag-link:hover, a.mention-link:hover, a.content-link:hover{ text-decoration:underline; }
.repost-banner{
  display:flex; align-items:center; gap:7px; font-size:14.5px; font-weight:700; color:var(--ink-faint);
  margin:0 0 8px 56px;
}
.repost-banner svg{ width:17px; height:17px; }
.quoted-post{
  display:flex; gap:9px; border:1px solid var(--hairline); border-radius:14px; padding:10px 12px;
  margin:2px 0 12px; cursor:pointer;
}
.quoted-post:hover{ background:rgba(255,255,255,.02); }
.quoted-post .avatar{ width:31px; height:31px; font-size:13px; }
.quoted-post .post-meta{ margin-bottom:1px; }
.quoted-post .post-meta .name{ font-size:15.5px; }
.quoted-post .post-meta .handle, .quoted-post .post-meta .time{ font-size:14.5px; }
.quoted-post .quoted-text{ font-size:15.5px; line-height:1.55; color:#D8CEC1; white-space:pre-line; overflow-wrap:anywhere; word-break:break-all; }
.reply-to-indicator{ font-size:15px; color:var(--ink-faint); margin:1px 0 4px; }
.reply-to-indicator a{ color:var(--tier-blue); }
.post-media{
  margin:2px 0 12px; border-radius:16px; overflow:hidden; border:1px solid var(--hairline);
  display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:1fr; gap:2px;
}
.post-media.count-1{ grid-template-columns:1fr; }
.post-media .media-item{ position:relative; cursor:pointer; overflow:hidden; background:#000; }
.post-media .media-item img, .post-media .media-item video{
  width:100%; height:100%; max-height:340px; object-fit:cover; display:block; background:#000;
}
.post-media.count-1 .media-item img, .post-media.count-1 .media-item video{ max-height:420px; }
.post-media .media-play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.post-media .media-play-badge svg{ width:24px; height:24px; color:#fff; margin-left:2px; }
.media-lightbox-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:99999;
  align-items:center; justify-content:center; flex-direction:column;
}
.media-lightbox-backdrop.open{ display:flex; }
.media-lightbox-content{ max-width:92vw; max-height:82vh; display:flex; align-items:center; justify-content:center; }
.media-lightbox-content img, .media-lightbox-content video{ max-width:92vw; max-height:82vh; object-fit:contain; border-radius:8px; }
.media-lightbox-close{
  position:absolute; top:18px; right:22px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:26.5px; line-height:1;
}
.media-lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
}
.media-lightbox-prev{ left:18px; }
.media-lightbox-next{ right:18px; }
.media-lightbox-nav svg{ width:26.5px; height:26.5px; }
.media-lightbox-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; font-size:15px;
  background:rgba(255,255,255,.12); padding:4px 12px; border-radius:100px;
}
.post-stats{ display:flex; align-items:center; gap:2px; color:var(--ink-faint); max-width:460px; }
.stat{
  display:flex; align-items:center; gap:6px; background:none; border:none; color:inherit; cursor:pointer;
  padding:7px 10px; border-radius:100px; font-size:15px; font-family:var(--mono); flex:1; white-space:nowrap;
}
.stat svg{ width:19px; height:19px; flex-shrink:0; }
.stat:hover{ background:var(--surface); color:var(--ink-dim); }
.stat.comment-trigger:hover{ color:var(--tier-blue); }
.stat.liked{ color:var(--shu-bright); }
.stat.reposted{ color:#2FBF71; }
.stat.bookmark-btn{ flex:0 0 auto; }
.stat.bookmark-btn.bookmarked{ color:#E6B800; }
.stat.impression-stat{ cursor:default; flex:1; }
/* トークン受取額の表示（タイムライン・投稿詳細・マイページ・ブックマーク共通）。
   home.htmlには同じ定義がインラインstyleとして既にあるが、post_card.js（プロフィール・
   ブックマーク・検索・通知等）で描画する投稿カードにも同じ見た目を適用するため、
   全画面で読み込まれるtheme.css側にも定義する。 */
.stat.tip-total{ color:var(--gold); font-weight:700; flex:1.3; cursor:default; }

/* 残高不足時の確認・購入モーダル（投稿詳細のコメント欄で使っていたものと同じ見た目）。
   以前はDMチャット画面（dm_chat.html）だけ window.confirm()/alert() を使っており、
   投稿のコメントで投げ銭する時と体験が異なっていた不具合の対応として、
   dm_chat.html でもこの共通スタイルを使ってモーダル表示するようにする。 */
.mini-modal-backdrop{
  position:fixed; inset:0; background:rgba(9,7,5,.7); z-index:110; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .18s ease; padding:16px;
}
.mini-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.mini-modal{
  width:320px; max-width:100%; background:var(--bg-soft); border:1px solid var(--hairline); border-radius:var(--r-l); padding:18px;
  transform:scale(.96); transition:transform .18s cubic-bezier(.2,.8,.2,1); box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
}
.mini-modal-backdrop.open .mini-modal{ transform:scale(1); }
.mini-modal-title{ font-family:var(--display); font-weight:700; font-size:18.5px; margin-bottom:4px; }
.mini-modal-sub{ font-size:14px; color:var(--ink-faint); margin-bottom:14px; line-height:1.6; }
.mini-modal-actions{ display:flex; gap:8px; }
.mini-cancel{ background:none; border:1px solid var(--hairline); color:var(--ink-faint); border-radius:100px; padding:9px 16px; font-size:15px; cursor:pointer; }
.mini-go{ flex:1; border:none; border-radius:100px; padding:9px 0; font-weight:700; font-size:15px; cursor:pointer; background:linear-gradient(180deg,var(--shu-bright),var(--shu)); color:#fff; display:flex; align-items:center; justify-content:center; gap:6px; }
.mini-go svg{ width:15.5px; height:15.5px; }
.mini-error{ font-size:13px; color:var(--tier-red); margin:-6px 0 10px; display:none; }
.mini-error.show{ display:block; }

/* 投げ銭額に応じた色分けティア（要件定義 3-1）のバッジ・強調表示。
   home.htmlの投稿詳細コメント（.c-bubble.tier-*）と同じ配色をここでも共通定義し、
   通知一覧（notifications.html）の「トークンを受け取りました」通知でも、
   受け取った金額がひと目で分かるように同じ色付けを使えるようにする
   （以前は他の通知と見分けがつかない、ただの投稿カードにしか見えなかった不具合の対応）。*/
.tip-tier-label{ font-size:12px; padding:2px 7px; border-radius:100px; font-weight:700; }
.tip-tier-label.tier-blue{ color:#0B1B3A; background:var(--tier-blue); }
.tip-tier-label.tier-purple{ color:#241436; background:var(--tier-purple); }
.tip-tier-label.tier-emerald{ color:#062E20; background:var(--tier-emerald); }
.tip-tier-label.tier-orange{ color:#3A1D06; background:var(--tier-orange); }
.tip-tier-label.tier-yellow{ color:#3A2C04; background:var(--tier-yellow); }
.tip-tier-label.tier-red{ color:#3A0808; background:var(--tier-red); }
.tip-tier-label.tier-rainbow{ color:#1a1310; background:linear-gradient(90deg,#4C8DFF,#A970F0,#22C58B,#F5883D,#F3C23D,#EF4B4B); background-size:220% 100%; animation:tip-hue-shift 3.5s linear infinite; }
@keyframes tip-hue-shift{ to{ background-position:220% 0; } }

/* 通知一覧でトークン受取通知の投稿カード全体を包む枠線・背景の色分け
   （home.htmlの.c-bubble.tier-*と同じ配色。ただし通知カードは投稿カード全体を
   包むラッパーのため、クラス名は分けている）。*/
.tip-received-card{ border-radius:var(--r-m); padding:2px; margin-top:6px; }
/* 【不具合修正】メッセージ（DM）でトークンを受け取った通知は左端に寄りすぎて見づらかったため、
   ほんの少しだけ右にずらす。投稿への投げ銭通知（.tip-received-card単体）は元のままにする。 */
.tip-received-card.msg-tip-notif{ margin-left:10px; }
.tip-received-card.tier-blue{ background:rgba(76,141,255,.13); box-shadow:inset 0 0 0 1.5px rgba(76,141,255,.55); }
.tip-received-card.tier-purple{ background:rgba(169,112,240,.14); box-shadow:inset 0 0 0 1.5px rgba(169,112,240,.55); }
.tip-received-card.tier-emerald{ background:rgba(34,197,139,.14); box-shadow:inset 0 0 0 1.5px rgba(34,197,139,.55); }
.tip-received-card.tier-orange{ background:rgba(245,136,61,.15); box-shadow:inset 0 0 0 1.5px rgba(245,136,61,.6); }
.tip-received-card.tier-yellow{ background:rgba(243,194,61,.16); box-shadow:inset 0 0 0 1.5px rgba(243,194,61,.65); }
.tip-received-card.tier-red{ background:rgba(239,75,75,.16); box-shadow:inset 0 0 0 1.5px rgba(239,75,75,.65); }
.tip-received-card.tier-rainbow{ background:linear-gradient(100deg, rgba(76,141,255,.18), rgba(169,112,240,.18), rgba(34,197,139,.18), rgba(245,136,61,.18), rgba(243,194,61,.18), rgba(239,75,75,.18)); }
.tip-received-badge{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:14px; font-weight:700; padding:8px 10px 0; color:var(--gold); }
.tip-received-badge.tier-blue{ color:var(--tier-blue); } .tip-received-badge.tier-purple{ color:var(--tier-purple); } .tip-received-badge.tier-emerald{ color:var(--tier-emerald); }
.tip-received-badge.tier-orange{ color:var(--tier-orange); } .tip-received-badge.tier-yellow{ color:var(--tier-yellow); } .tip-received-badge.tier-red{ color:var(--tier-red); } .tip-received-badge.tier-rainbow{ color:var(--gold); }
/* DMのトークン送金メッセージ本文（dm_chat.html・notifications.html共通）。 */
.msg-tip-text{ font-size:15px; }
/* 【不具合修正】メッセージでトークンを受け取った通知で、金額バッジ（.tip-received-badge、
   左パディング10px）に対してメッセージ本文（.msg-tip-text）だけ左パディングが無く、
   本文だけ見た目上さらに左に寄って見えてしまっていた。バッジと横位置を揃える。
   dm_chat.htmlのチャット吹き出し内の.msg-tip-textは吹き出し自体に余白があるため、
   通知カード（.tip-received-card）配下に限定して適用する。 */
.tip-received-card .msg-tip-text{ padding:6px 10px 8px; }
.stat.post-menu-btn{ flex:0 0 auto; padding:7px 9px; }

/* 広告枠（投稿一覧・タイムライン共通。何ポストごとに挟むかはプランに応じてサーバー側で決定し、
   body[data-ad-interval] としてテンプレートへ渡している） */
.feed-ad-card{
  position:relative; padding:16px 0; border-bottom:1px solid var(--hairline-soft); min-height:80px;
}
.feed-ad-card .ad-slot-label{
  position:absolute; top:14px; right:0; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-faint); background:var(--surface-2); border:1px solid var(--hairline); border-radius:100px;
  padding:2px 9px; z-index:1;
}
.feed-ad-card .ad-slot-inner{ margin-top:4px; }

.post-popover-wrap{ position:relative; flex:1; display:flex; }
.post-popover-wrap.menu-wrap{ flex:0 0 auto; }
.post-popover{
  position:absolute; bottom:calc(100% + 6px); left:0; z-index:40; min-width:168px;
  background:#1A1611; border:1px solid var(--hairline); border-radius:12px; padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.45); display:none; flex-direction:column; gap:2px;
}
.post-popover.open{ display:flex; }
.post-popover-wrap.menu-wrap .post-popover{ left:auto; right:0; }
.post-popover button{
  display:flex; align-items:center; gap:9px; text-align:left; padding:9px 11px; border-radius:8px;
  border:none; background:none; color:var(--ink); font-size:16px; font-family:var(--sans); cursor:pointer;
}
.post-popover button:hover{ background:var(--surface); }
.post-popover button svg{ width:19px; height:19px; flex:0 0 auto; color:var(--ink-faint); }
.post-popover button.danger{ color:var(--shu-bright); }
.post-popover button.danger svg{ color:var(--shu-bright); }

/* ------------------------------------------------------------------
   投稿詳細モーダル（iframeオーバーレイ）
   screens.js の openPostDetailModal() が生成する要素に対応するスタイル。
   ------------------------------------------------------------------ */
.post-modal-overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(8,6,4,.72);
  display:none; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(2px);
}
.post-modal-overlay.open{ display:flex; }
.post-modal-overlay-inner{
  position:relative; width:min(600px, 100%); height:min(88vh, 900px);
  background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r-l);
  overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.post-modal-overlay-inner iframe{ width:100%; height:100%; border:none; display:block; }
.post-modal-overlay-close{
  position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--hairline); background:var(--surface-2); color:var(--ink); font-size:24px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.post-modal-overlay-close:hover{ background:var(--surface-3); }
@media (max-width:640px){
  .post-modal-overlay{ padding:0; }
  .post-modal-overlay-inner{ width:100%; height:100%; border-radius:0; }
}