/* mypage-v2.css — マイページ（/mypage）のログイン後の画面の作り直し（[CC] 2026-10-24・Owner 指示）。
   目的: スクロールが長い・文字が多い・キャンペーンが伝わらない・ポイントが使われない、を直す。
   方針（DESIGN.md「銀行のダッシュボード」）:
     1. 上から「あなたの状況（要約）→ 受付中のキャンペーン → ポイント → 使える製品 → EA PASS → その他の製品 → 設定・補助」の順に固定する。
     2. 1 枠 1 用件。説明文は <details>（「詳しく」）に畳み、最初に見えるのは見出し・金額・期限・ボタン 1 つまで。
     3. 色はトークン（--card / --border / --text / --accent …）だけ。濃い色の固定背景は使わない（ライト／ダークの両方で読めるように）。
     4. スマホ: 1 列、44px のタップ領域、画面下に固定の節ジャンプ（状況／キャンペーン／ポイント／製品）。
   HTML 側の id・data-* は変えていない（決済・ライセンスの JS はそのまま動く）。
   このファイルは mypage.html の <style id="sl-subpage-theme"> より後に読み、#portal-screen を付けた規則で上書きする。 */

/* ---- 共通 ------------------------------------------------------------ */
:root {
  --mp-gold: #b7791f;          /* ポイント・キャンペーンの強調（ライトで白地 4.5:1 以上） */
  --mp-gold-bg: rgba(183, 121, 31, .10);
  --mp-gold-border: rgba(183, 121, 31, .45);
  --mp-red: #c2410c;           /* 期限 */
  --mp-blue-bg: rgba(63, 81, 200, .08);
  --mp-green-bg: rgba(31, 122, 82, .10);
  --mp-radius: 14px;
}
:root[data-theme="dark"] {
  --mp-gold: #f2cf80;
  --mp-gold-bg: rgba(242, 207, 128, .10);
  --mp-gold-border: rgba(242, 207, 128, .40);
  --mp-red: #fb923c;
  --mp-blue-bg: rgba(82, 102, 235, .14);
  --mp-green-bg: rgba(55, 184, 124, .14);
}

#portal-screen.mp { display: flex; flex-direction: column; gap: 18px; }
#portal-screen.mp > * + * { margin-top: 0 !important; }
#portal-screen.mp [hidden] { display: none !important; }

/* 子ページ共通テーマ（<style id="sl-subpage-theme">）の section / .glass-card の !important を打ち消す */
#portal-screen.mp section,
#portal-screen.mp .glass-card,
#portal-screen.mp #purchase-code-section,
#portal-screen.mp .mp-box {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--mp-radius) !important;
  padding: 16px !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
@media (min-width: 640px) {
  #portal-screen.mp section, #portal-screen.mp .glass-card, #portal-screen.mp #purchase-code-section, #portal-screen.mp .mp-box { padding: 20px 22px !important; }
}
#portal-screen.mp .mp-plain { background: transparent !important; border: 0 !important; padding: 0 !important; }
#portal-screen.mp section section, #portal-screen.mp section .glass-card { border-radius: 12px !important; }

#portal-screen.mp h2, #portal-screen.mp h3, #portal-screen.mp h4 { margin: 0; color: var(--text) !important; letter-spacing: -0.005em; }
#portal-screen.mp p, #portal-screen.mp li { margin: 0; line-height: 1.65; }
#portal-screen.mp .text-white, #portal-screen.mp .text-slate-100, #portal-screen.mp .text-slate-200 { color: var(--text) !important; }
#portal-screen.mp .text-slate-300, #portal-screen.mp .text-slate-400, #portal-screen.mp .text-slate-500 { color: var(--text-muted) !important; }
#portal-screen.mp .text-amber-200, #portal-screen.mp .text-amber-300, #portal-screen.mp .text-amber-400 { color: var(--mp-gold) !important; }
#portal-screen.mp .text-emerald-200, #portal-screen.mp .text-emerald-300, #portal-screen.mp .text-emerald-400 { color: var(--profit) !important; }
#portal-screen.mp .text-sky-300, #portal-screen.mp .text-sky-400, #portal-screen.mp .text-blue-300, #portal-screen.mp .text-blue-400 { color: var(--accent) !important; }
#portal-screen.mp [class*="bg-slate-9"], #portal-screen.mp [class*="bg-slate-8"] { background: var(--raised) !important; }
#portal-screen.mp [class*="border-slate-"] { border-color: var(--border) !important; }
#portal-screen.mp input[readonly], #portal-screen.mp input[type="text"], #portal-screen.mp textarea {
  background: var(--raised) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 10px !important;
}

/* 節の見出し行 */
.mp-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.mp-sec-title { font-size: 17px; font-weight: 800; color: var(--text) !important; }
.mp-sec-sub { font-size: 13px; color: var(--text-muted) !important; }
.mp-count { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--raised); color: var(--text-muted); font-size: 12px; font-weight: 700; }

/* ボタン（.product-card-action も含め、ページ内のボタンを 1 種類の見た目に揃える） */
#portal-screen.mp button, #portal-screen.mp .mp-btn, #portal-screen.mp a.product-card-action { border-radius: 10px !important; box-shadow: none !important; }
.mp-btn, #portal-screen.mp .product-card-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--text) !important; font-size: 14px; font-weight: 700; line-height: 1.3;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.mp-btn:active, #portal-screen.mp .product-card-action:active { transform: scale(.98); }
/* 色の役割は 3 つだけ: 青＝主操作（購入・ダウンロード・申し込み）、金＝ポイント、枠線＝体験版・補助。
   以前は購入・体験・ポイントが金・藍・金で並び、どれが主かが分からなかった。 */
.mp-btn-primary, #portal-screen.mp .btn-gradient-green, #portal-screen.mp .btn-gradient-blue, #portal-screen.mp .btn-gradient-gold, #portal-screen.mp .bg-blue-600, #portal-screen.mp .bg-emerald-600, #portal-screen.mp .bg-sky-600, #portal-screen.mp .bg-emerald-400, #portal-screen.mp .bg-amber-400 {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; background-image: none !important;
}
.mp-btn-gold, #portal-screen.mp .btn-points-checkout {
  background: var(--mp-gold) !important; border-color: var(--mp-gold) !important; color: #fff !important; background-image: none !important;
}
:root[data-theme="dark"] .mp-btn-gold, :root[data-theme="dark"] #portal-screen.mp .btn-points-checkout { color: #1c0a00 !important; }
/* 体験版（bg-indigo-600）は枠線の青。主操作（購入）と並んだときに格が分かるように */
#portal-screen.mp .bg-indigo-600 { background: var(--card) !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; background-image: none !important; }
.mp-btn-ghost, #portal-screen.mp .bg-slate-700, #portal-screen.mp .bg-slate-800 { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; }
.mp-btn-sm { min-height: 36px; padding: 4px 12px; font-size: 13px; }
.mp-link { color: var(--accent) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-actions > * { flex: 1 1 180px; }
@media (max-width: 639px) { .mp-actions > * { flex-basis: 100%; } }

/* 畳める説明（「詳しく」） */
details.mp-more { margin-top: 8px; }
details.mp-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 13px; font-weight: 700; color: var(--accent) !important; }
details.mp-more > summary::-webkit-details-marker { display: none; }
details.mp-more > summary::before { content: "＋"; font-size: 12px; }
details.mp-more[open] > summary::before { content: "－"; }
details.mp-more > :not(summary) { margin-top: 8px; font-size: 13px; color: var(--text-muted) !important; line-height: 1.7; }
details.mp-more ul, details.mp-more ol { padding-left: 1.2em; display: grid; gap: 4px; }

/* ---- 先頭: 見出し行 -------------------------------------------------- */
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mp-head-title { font-size: 22px; font-weight: 800; color: var(--text) !important; }
.mp-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted) !important; min-width: 0; }
.mp-head-meta .mp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--profit); flex: none; }
#portal-screen.mp #portal-user-email { word-break: break-all; }
#portal-screen.mp #portal-logout { min-height: 36px; padding: 4px 12px; font-size: 13px; }

/* ---- 節ジャンプ（PC: 見出し下の帯／スマホ: 画面下の固定バー） --------- */
.mp-jump { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0; }
.mp-jump::-webkit-scrollbar { display: none; }
.mp-jump a { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text) !important; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mp-jump a:hover { border-color: var(--accent); color: var(--accent) !important; }
.mp-jump a .mp-jump-n { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--mp-gold); color: #fff; font-size: 11px; line-height: 18px; }
.mp-jump a .mp-jump-n:empty { display: none; }
@media (max-width: 767px) {
  .mp-jump { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 4px; background: var(--header-bg, rgba(255,255,255,.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); overflow: visible; }
  .mp-jump a { position: relative; flex: 1 1 0; min-width: 0; padding: 0 2px; min-height: 44px; font-size: 11.5px; letter-spacing: -0.01em; border-radius: 10px; }
  .mp-jump a .mp-jump-n { position: absolute; top: 2px; right: 2px; margin: 0; padding: 0 5px; font-size: 10px; line-height: 16px; }
  body.mp-has-jump main { padding-bottom: 88px !important; }
  #portal-screen.mp [id] { scroll-margin-top: 72px; }
  /* スマホのカードは詰める。持っている EA の 1 行説明（「EA PASS で利用中・最新版 v2.0」）は状態札と重なるので出さない */
  #portal-screen.mp .mp-grid > article.glass-card { padding: 12px !important; gap: 8px; }
  #portal-screen.mp .mp-grid > article[data-access-state="OWNED"] p.pc-clamp-2 { display: none; }
  #portal-screen.mp .mp-head-title { font-size: 20px; }
}
@media (min-width: 768px) { #portal-screen.mp [id] { scroll-margin-top: 80px; } }

/* ---- あなたの状況（要約） ------------------------------------------- */
#portal-screen.mp #my-status.my-status { padding: 14px 16px !important; }
#portal-screen.mp .my-status-title { font-size: 15px; font-weight: 800; margin: 0 0 10px; }
#portal-screen.mp .my-status-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { #portal-screen.mp .my-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#portal-screen.mp .my-status-item { padding: 10px 12px; border-radius: 12px; background: var(--raised); border: 1px solid transparent; min-width: 0; }
#portal-screen.mp .my-status-label { font-size: 12px; font-weight: 700; color: var(--text-faint) !important; margin: 0 0 2px; }
#portal-screen.mp .my-status-value { font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--text) !important; overflow-wrap: anywhere; }
#portal-screen.mp .my-status-sub { font-size: 12.5px; line-height: 1.5; margin-top: 3px; color: var(--text-muted) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#portal-screen.mp .my-status-link { font-size: 13px; min-height: 36px; }
#portal-screen.mp #my-status-points { background: var(--mp-gold-bg); border-color: var(--mp-gold-border); }
#portal-screen.mp #my-status-points .my-status-value { color: var(--mp-gold) !important; }
#portal-screen.mp .my-suggest { margin-top: 12px; padding-top: 10px; }
#portal-screen.mp .my-suggest-title { font-size: 14px; }
#portal-screen.mp .my-suggest-list { grid-template-columns: 1fr; }
@media (min-width: 768px) { #portal-screen.mp .my-suggest-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#portal-screen.mp .my-suggest-item { padding: 10px 12px; }
#portal-screen.mp .my-suggest-name { font-size: 14px; }
#portal-screen.mp .my-suggest-sub { font-size: 12.5px; }
#portal-screen.mp .my-suggest-btn { min-height: 38px; font-size: 13px; padding: 4px 12px; }
#portal-screen.mp .my-changes-list li { font-size: 13.5px; padding: 8px 10px; }

/* ---- 受付中のキャンペーン（1 枠 1 用件） ------------------------------ */
#portal-screen.mp #mp-offers { padding: 14px 14px !important; background: var(--mp-blue-bg) !important; border-color: transparent !important; }
#portal-screen.mp #mp-offers[hidden] { display: none !important; }
#portal-screen.mp #mp-offers .mp-sec-head { margin-bottom: 10px; }
#mp-offers .mp-offer-list { display: grid; gap: 10px; }
@media (min-width: 900px) { #mp-offers .mp-offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } #mp-offers .mp-offer-list > .mp-offer-wide { grid-column: 1 / -1; } }
#portal-screen.mp .mp-offer { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px !important; border-left: 4px solid var(--accent) !important; }
#portal-screen.mp .mp-offer.is-gold { border-left-color: var(--mp-gold) !important; }
#portal-screen.mp .mp-offer.is-green { border-left-color: var(--profit) !important; }
.mp-offer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mp-kicker { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; background: var(--raised); color: var(--text-muted) !important; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.mp-kicker.is-gold { background: var(--mp-gold-bg); color: var(--mp-gold) !important; }
.mp-kicker.is-green { background: var(--mp-green-bg); color: var(--profit) !important; }
.mp-deadline { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; font-size: 12px; font-weight: 800; color: var(--mp-red) !important; white-space: nowrap; }
.mp-deadline::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mp-red); }
#portal-screen.mp .mp-offer-title { font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--text) !important; }
#portal-screen.mp .mp-offer-title .mp-price { color: var(--mp-gold) !important; font-size: 1.15em; }
#portal-screen.mp .mp-offer-lede { font-size: 13.5px; color: var(--text-muted) !important; }
#portal-screen.mp .mp-offer .mp-actions { margin-top: 2px; }
#portal-screen.mp .mp-offer .mp-actions > * { flex: 1 1 160px; }
#portal-screen.mp .mp-offer .mp-actions > .mp-btn-ghost, #portal-screen.mp .mp-offer .mp-actions > a[class*="bg-slate"] { flex: 0 1 auto; }
#portal-screen.mp .mp-offer .mp-offer-note { font-size: 12px; color: var(--text-faint) !important; }
/* 既存の枠の中身（JS が作る行）を詰める */
#portal-screen.mp #existing-offer-list { display: grid; gap: 8px; }
#portal-screen.mp #existing-offer-list li { padding: 10px 12px; border-radius: 10px; background: var(--raised); border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#portal-screen.mp #existing-offer-list li > div { flex: 1 1 220px; min-width: 0; }
#portal-screen.mp #existing-offer-list li p { font-size: 13.5px; }
#portal-screen.mp #existing-offer-list li strong { color: var(--mp-gold) !important; font-weight: 800; }
#portal-screen.mp #existing-offer-list li button { flex: 1 1 140px; min-height: 42px; }
#portal-screen.mp #existing-offer-countdown { color: var(--text-muted) !important; font-size: 13px; font-weight: 600; }
#portal-screen.mp #mypage-source-block-row-a, #portal-screen.mp #mypage-source-block-row-b { padding: 10px 12px; border-radius: 10px; background: var(--raised) !important; border: 0 !important; }
#portal-screen.mp #mypage-source-block-row-a h4 { font-size: 15px; }
#portal-screen.mp #mypage-source-block-ladder-price, #portal-screen.mp #mypage-source-block-row-b p { font-size: 13.5px; }
#portal-screen.mp #mypage-source-block-row-c a { font-size: 13px; }
/* ソースコードの購入欄（JS が差し込む #source-single-offer）: 固定色のままだが、角と枠線だけ揃える */
#portal-screen.mp #source-single-offer { border-radius: var(--mp-radius) !important; }
/* 選択フォーム（購入特典）の候補カード */
#portal-screen.mp #sc-selection-list { gap: 8px; }
#portal-screen.mp .sc-choice-card { background: var(--raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
#portal-screen.mp .sc-choice-card.is-selected { background: var(--mp-green-bg) !important; border-color: var(--profit) !important; }
/* MEMBER SECRET SALE */
#portal-screen.mp #member-sale-discount, #portal-screen.mp #sale-landing-discount { font-size: 30px; font-weight: 900; color: var(--mp-gold) !important; }
#portal-screen.mp .member-sale-countdown-target { font-variant-numeric: tabular-nums; }

/* ---- ポイント ------------------------------------------------------- */
#portal-screen.mp #points-section { background: var(--mp-gold-bg) !important; border: 1px solid var(--mp-gold-border) !important; }
#portal-screen.mp #points-section > div { background: transparent !important; border: 0 !important; padding: 0 !important; }
.mp-points-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.mp-points-balance { font-size: 34px; font-weight: 900; line-height: 1; color: var(--mp-gold) !important; font-variant-numeric: tabular-nums; }
.mp-points-balance small { font-size: 14px; font-weight: 700; margin-left: 3px; color: var(--text-muted) !important; }
.mp-points-lede { font-size: 14px; font-weight: 700; color: var(--text) !important; }
#portal-screen.mp #points-expiry { font-size: 13px; font-weight: 700; color: var(--mp-red) !important; }
.mp-points-use { font-size: 13.5px; color: var(--text) !important; }
.mp-points-use strong { color: var(--mp-gold) !important; font-weight: 800; }
#portal-screen.mp #mp-points-targets { display: grid; gap: 6px; margin-top: 6px; }
#portal-screen.mp #mp-points-targets[hidden] { display: none !important; }
#portal-screen.mp .mp-pt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); }
#portal-screen.mp .mp-pt-row-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#portal-screen.mp .mp-pt-row-price { flex: none; font-size: 13px; color: var(--text-muted) !important; white-space: nowrap; }
#portal-screen.mp .mp-pt-row-price strong { color: var(--mp-gold) !important; font-size: 14.5px; }
#portal-screen.mp .mp-pt-row button { flex: none; min-height: 36px; padding: 4px 12px; font-size: 13px; }
@media (max-width: 480px) { #portal-screen.mp .mp-pt-row { flex-wrap: wrap; } #portal-screen.mp .mp-pt-row button { flex: 1 1 100%; } }

/* ---- 製品カード（JS の createProductCard が作る .glass-card） ------------ */
#portal-screen.mp .mp-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { #portal-screen.mp .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #portal-screen.mp .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#portal-screen.mp .mp-grid > article.glass-card { padding: 14px !important; gap: 10px; border-radius: 12px !important; }
#portal-screen.mp .mp-grid > article.product-card-active { border-color: var(--profit) !important; background: var(--card) !important; box-shadow: inset 3px 0 0 var(--profit) !important; }
#portal-screen.mp .mp-grid > article.product-card-pending { border-color: var(--mp-gold-border) !important; }
#portal-screen.mp .mp-grid > article.product-card-catalog { transform: none !important; }
#portal-screen.mp .mp-grid > article .glow-active::after, #portal-screen.mp .mp-grid > article.glow-active::after { content: none !important; }
#portal-screen.mp .mp-grid > article h4 { font-size: 15px; line-height: 1.35; }
#portal-screen.mp .mp-grid > article .text-xl { font-size: 19px; font-weight: 800; }
#portal-screen.mp .mp-grid > article .line-through { font-size: 12px; }
#portal-screen.mp .mp-grid > article .product-card-action { min-height: 42px; font-size: 13.5px; padding: 6px 12px; }
#portal-screen.mp .mp-grid > article [class*="rounded-full"] { border-radius: 6px !important; font-size: 11px; padding: 2px 7px; background: var(--raised) !important; border-color: transparent !important; }
#portal-screen.mp .mp-grid > article .lic-key-box { padding: 8px 10px; border-radius: 10px; }
#portal-screen.mp .mp-grid > article .lic-key-box input { font-size: 12.5px; padding: 6px 8px; }
#portal-screen.mp .mp-grid > article .lic-key-box button { min-height: 32px; padding: 2px 10px; font-size: 12px; }
/* 目安の実質価格（ポイント利用） */
#portal-screen.mp .mp-pt-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted) !important; }
#portal-screen.mp .mp-pt-hint strong { color: var(--mp-gold) !important; font-size: 15px; font-weight: 800; }
/* 二次操作（製品詳細・マニュアル・申請）は文字リンクの行にする */
#portal-screen.mp .mp-card-links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 2px; }
#portal-screen.mp .mp-card-links a, #portal-screen.mp .mp-card-links button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0 !important; background: transparent !important; color: var(--accent) !important; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; width: auto; flex: none; }
/* 会員で使えている EA の「買い切りで持つ」は畳む */
#portal-screen.mp details.mp-upsell { border-top: 1px dashed var(--border); padding-top: 6px; }
#portal-screen.mp details.mp-upsell > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; font-size: 13px; font-weight: 700; color: var(--text) !important; }
#portal-screen.mp details.mp-upsell > summary::-webkit-details-marker { display: none; }
#portal-screen.mp details.mp-upsell > summary::after { content: "＋"; color: var(--text-faint); }
#portal-screen.mp details.mp-upsell[open] > summary::after { content: "－"; }
#portal-screen.mp details.mp-upsell > div { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }

/* 使える製品の節 */
#portal-screen.mp #product-hub-active-section { display: flex; flex-direction: column; gap: 16px; }
#portal-screen.mp #product-hub-active-section > div { display: flex; flex-direction: column; gap: 10px; }
#portal-screen.mp #product-hub-active-section > div > .mp-sec-head { margin: 0; }
#portal-screen.mp #membership-license-card { padding: 12px 14px; border-radius: 12px; background: var(--mp-gold-bg) !important; border: 1px solid var(--mp-gold-border) !important; display: flex; flex-direction: column; gap: 8px; }
#portal-screen.mp #membership-license-card .mp-lic-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#portal-screen.mp #membership-license-key-input { flex: 1 1 220px; min-width: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 700; padding: 9px 12px; }
#portal-screen.mp #membership-license-key-copy { flex: none; min-height: 42px; }
#portal-screen.mp #membership-license-max-accounts { font-size: 12.5px; color: var(--text-muted) !important; }

/* ---- EA PASS（メンバーシップ）の枠 ----------------------------------- */
#portal-screen.mp #membership-card-section { background: var(--card) !important; }
#portal-screen.mp #membership-card-section > * + * { margin-top: 10px; }
#portal-screen.mp #mypage-ms-title { font-size: 17px; }
#portal-screen.mp #mypage-ms-desc { font-size: 13.5px; }
#portal-screen.mp #mypage-ms-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
#portal-screen.mp #mypage-ms-actions > * { flex: 1 1 200px; }
#portal-screen.mp #mypage-ms-actions > a { flex: 0 1 auto; }
#portal-screen.mp #mypage-ms-active-info { padding: 12px 14px; border-radius: 12px; background: var(--mp-green-bg) !important; border: 1px solid transparent !important; display: flex; flex-direction: column; gap: 8px; }
#portal-screen.mp #mypage-ms-active-info [class*="rounded-full"] { background: var(--card) !important; border-color: var(--border) !important; }
#portal-screen.mp #mypage-ms-points-promo { padding: 10px 12px; border-radius: 10px; background: var(--mp-green-bg) !important; border: 0 !important; }
#portal-screen.mp #mypage-ms-pick3-panel, #portal-screen.mp #mypage-ms-plan-panel, #portal-screen.mp #mypage-ms-switch-panel, #portal-screen.mp #mypage-ms-cancel-panel { background: var(--card) !important; border-radius: 10px; }

/* ---- 設定・補助（畳む） ---------------------------------------------- */
#portal-screen.mp .mp-acc { display: grid; gap: 8px; }
#portal-screen.mp .mp-acc > details { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
#portal-screen.mp .mp-acc > details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 16px; font-size: 15px; font-weight: 700; color: var(--text) !important; }
#portal-screen.mp .mp-acc > details > summary::-webkit-details-marker { display: none; }
#portal-screen.mp .mp-acc > details > summary::after { content: "＋"; color: var(--text-faint); font-weight: 400; flex: none; }
#portal-screen.mp .mp-acc > details[open] > summary::after { content: "－"; }
#portal-screen.mp .mp-acc > details > summary .mp-acc-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-muted) !important; margin-top: 2px; }
#portal-screen.mp .mp-acc > details > summary .mp-acc-tag { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--mp-gold) !important; background: var(--mp-gold-bg); padding: 2px 8px; border-radius: 999px; }
#portal-screen.mp .mp-acc > details > :not(summary) { padding: 0 16px 16px; }
#portal-screen.mp .mp-acc section, #portal-screen.mp .mp-acc .glass-card, #portal-screen.mp .mp-acc #purchase-code-section { border: 0 !important; padding: 0 !important; background: transparent !important; }
#portal-screen.mp .mp-acc #account-links > div { display: flex; flex-direction: column; gap: 6px; }
#portal-screen.mp .mp-acc #account-link-line, #portal-screen.mp .mp-acc #account-link-discord { padding: 10px 12px; border-radius: 10px; background: var(--raised) !important; border: 0 !important; margin-top: 8px; }
#portal-screen.mp .mp-acc #account-links button.sl-button { min-height: 42px; border-radius: 10px !important; }
#portal-screen.mp .mp-acc #purchase-code-form { display: flex; gap: 8px; margin-top: 8px; }
#portal-screen.mp .mp-acc #purchase-code-input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); }
#portal-screen.mp .mp-acc #purchase-code-submit { flex: none; min-height: 44px; }
@media (max-width: 480px) { #portal-screen.mp .mp-acc #purchase-code-form { flex-wrap: wrap; } #portal-screen.mp .mp-acc #purchase-code-submit { flex: 1 1 100%; } }
#portal-screen.mp .mp-acc #referral-accordion { margin: 0; }
#portal-screen.mp .mp-acc #referral-accordion > summary { display: none; }
#portal-screen.mp .mp-acc #referral-section > div { border: 0 !important; padding: 0 !important; background: transparent !important; }
#portal-screen.mp .mp-acc table th, #portal-screen.mp .mp-acc table td { padding: 6px 8px !important; font-size: 12.5px; }
#portal-screen.mp .mp-help { font-size: 12.5px; color: var(--text-faint) !important; }

/* ---- その他の製品 ---------------------------------------------------- */
#portal-screen.mp #mp-catalog-section > .mp-sec-head { margin-bottom: 10px; }

/* ---- 見出し下の余白など、細かい整え ---------------------------------- */
#portal-screen.mp #product-hub-error { border-color: var(--loss) !important; }
#portal-screen.mp .sl-nb { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { #portal-screen.mp * { transition: none !important; } }