/* ===================================================================
   BATTLEBOX 公式サイト — パステル・ポップ テーマ
   明るく可愛いが過剰でなく、スタイリッシュで端正。
   ライト基調・淡色は塗り／濃色は文字。外部 CDN 不使用・自前 CSS のみ。
   （旧ダーク＆ネオンのグロー・常時パルスは撤去）
   =================================================================== */

:root {
    /* --- 背景・面 --- */
    --bg: #fff8fb;          /* ページ背景: 温かいクリーム寄りの白 */
    --bg2: #fffdf9;         /* 入力欄などの内側 */
    --surface: #ffffff;     /* カード面 */
    --surface-2: #fdf4f8;   /* カード内の淡いブロック */
    --line: #efe4ec;        /* 境界線（低コントラストの淡い線） */

    /* --- 文字 --- */
    --text: #3a3340;        /* 本文（濃いグレー・約 10:1） */
    --muted: #8b8391;       /* 補助テキスト（補助用途のみ） */

    /* --- アクセント（塗り・枠に使う。淡色ゆえ小さな文字色には使わない） --- */
    --pink: #ff9ec4;        /* 桜ピンク（主アクセント） */
    --lavender: #b8a4ff;    /* ラベンダー（副アクセント） */
    --mint: #7fe0c9;        /* ミント（成功・良好） */
    --gold: #ffcf6b;        /* 1位・強調（金） */

    /* --- アクセントの淡色版（背景タイル・ピル用） --- */
    --pink-soft: #ffe7f1;
    --lavender-soft: #efeaff;
    --mint-soft: #dff7f0;
    --gold-soft: #fff2d6;

    /* --- 状態（勝敗・成否のテキスト。白背景で AA を満たす濃色） --- */
    --ok: #2aa587;          /* 勝ち・成功 */
    --danger: #e06a86;      /* 負け・エラー */

    /* --- アクセントを「文字」に使うためのアクセシブルな濃色版 ---
       淡色（pink/lavender/gold）は本文コントラスト不足のため、
       リンク・レート・ピル文字などにはこの濃色版を使う。 */
    --ink-pink: #b23e68;    /* 濃いローズ（LIVE ピル等） */
    --ink-lavender: #6a53c8;/* 濃いラベンダー（リンク・レート・MATCHING ピル） */
    --ink-gold: #8a6a1e;    /* 濃いアンバー（deluxe・ランク名） */

    /* --- 角丸 --- */
    --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-pill: 999px;

    /* --- 影（やわらかく低コントラスト） --- */
    --shadow-sm: 0 2px 8px rgba(58, 51, 64, .06);
    --shadow: 0 8px 24px rgba(184, 164, 255, .16);
    --shadow-lg: 0 14px 40px rgba(255, 158, 196, .18);

    /* --- 余白スケール --- */
    --sp-1: .4rem; --sp-2: .8rem; --sp-3: 1.2rem; --sp-4: 1.8rem; --sp-5: 2.6rem;

    /* --- フォント（v0.5）---
       本文: 丸ゴシック。M PLUS Rounded 1c（CDN サブセット）→ システム丸ゴシックへフォールバック。
       見出し/ブランド: Quicksand（同梱・Latin）。JP グリフは自動で本文フォントへ字単位フォールバックする。 */
    --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Segoe UI", Meiryo, system-ui, sans-serif;
    --font-display: "Quicksand", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    /* 主張しすぎない淡い光のにじみを 2 箇所だけ。網目・ネオンは撤去 */
    background:
        radial-gradient(900px 420px at 82% -8%, var(--pink-soft), transparent 60%),
        radial-gradient(760px 380px at 8% 4%, var(--lavender-soft), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.65;
}

a { color: var(--ink-lavender); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); font-size: .85rem; }

/* 見出し・ブランド・数値表示は Quicksand（丸ゴシック）で統一。 */
.brand, .hero h1, .page-title h1, .section h2, .card h3,
.stat-tile .val, .price, .plan-head h3, .tab, .btn, .profile-hero .name {
    font-family: var(--font-display);
}

.container { width: min(1100px, 92%); margin: 0 auto; }

/* --- ナビゲーション ------------------------------------------------ */
.nav {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}
.nav-inner {
    width: min(1100px, 92%); margin: 0 auto;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .7rem 0; flex-wrap: wrap;
}
.brand {
    font-size: 1.25rem; font-weight: 800; letter-spacing: .06em;
    color: var(--text);
}
.brand span {
    /* ピンク→ラベンダーのグラデ文字（2 色） */
    background: linear-gradient(90deg, var(--pink), var(--lavender));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand:hover { text-decoration: none; }
.links { display: flex; gap: .25rem; flex-wrap: wrap; }
.links a {
    color: var(--muted); padding: .35rem .8rem; border-radius: var(--r-pill);
    font-size: .9rem; letter-spacing: .01em; transition: background .18s, color .18s;
}
.links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.links a.on { color: var(--text); background: var(--lavender-soft); font-weight: 700; }
.account { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.account .me { color: var(--text); font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.account .me:hover { color: var(--ink-lavender); }
/* ナビリンク内アイコンはやや控えめに（テキストの視認補助）。 */
.links a i { opacity: .75; font-size: .85em; }
.brand i { color: var(--pink); }
.inline { display: inline; }

/* --- ボタン --------------------------------------------------------- */
.btn {
    display: inline-block; border: none; cursor: pointer;
    /* ピンク系グラデ＋濃い文字。グロー禁止・影は柔らか */
    background: linear-gradient(90deg, var(--pink), #ffb6d3);
    color: var(--text); font-weight: 700; font-family: var(--font);
    padding: .55rem 1.3rem; border-radius: var(--r-pill); font-size: .95rem;
    letter-spacing: .01em; box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .12s;
}
.btn:hover { box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(-2px); }
.btn.small { padding: .35rem .9rem; font-size: .85rem; }
.btn.mg { background: linear-gradient(90deg, var(--lavender), #cbbcff); }
.btn.mg:hover { box-shadow: var(--shadow); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.ghost {
    display: inline-block; background: none; border: 1px solid var(--line); color: var(--muted);
    padding: .35rem .9rem; border-radius: var(--r-pill); cursor: pointer;
    font-family: var(--font); font-size: .84rem; transition: border-color .18s, color .18s;
}
.ghost:hover { color: var(--text); border-color: var(--pink); text-decoration: none; }

/* --- ヒーロー -------------------------------------------------------- */
.hero { padding: 4rem 0 2.6rem; text-align: center; }
.hero h1 {
    font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 800;
    letter-spacing: .01em; line-height: 1.18;
}
.hero h1 .grad {
    /* ピンク→ラベンダーのグラデ文字。drop-shadow は撤去 */
    background: linear-gradient(90deg, var(--pink) 15%, var(--lavender) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); margin: 1rem auto 1.8rem; max-width: 620px; }
.hero .actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* --- セクション / カード --------------------------------------------- */
.section { padding: 1.6rem 0; }
.section h2 {
    font-size: 1.1rem; letter-spacing: .01em; font-weight: 700;
    color: var(--text); border-left: 3px solid var(--pink);
    padding-left: .7rem; margin-bottom: 1rem;
}
.grid { display: grid; gap: 1rem; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .12s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }

/* --- テーブル -------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-size: .76rem; letter-spacing: .04em; font-weight: 700; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--pink-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- ランクバッジ ------------------------------------------------------ */
.rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    font-weight: 800; font-size: .85rem;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.rank.r1 { background: var(--gold-soft); border-color: var(--gold); color: var(--ink-gold); }
.rank.r2 { background: var(--lavender-soft); border-color: var(--lavender); color: var(--ink-lavender); }
.rank.r3 { background: var(--pink-soft); border-color: var(--pink); color: var(--ink-pink); }

.rating { font-weight: 800; color: var(--ink-lavender); font-variant-numeric: tabular-nums; }

/* --- ステータスピル ----------------------------------------------------- */
.pill {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    padding: .18rem .65rem; border-radius: var(--r-pill);
}
.pill.live { background: var(--pink-soft); color: var(--ink-pink); border: 1px solid var(--pink); }
.pill.live::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--ink-pink); animation: pulse 2s ease-in-out infinite;
}
.pill.idle { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pill.matching { background: var(--lavender-soft); color: var(--ink-lavender); border: 1px solid var(--lavender); }
/* LIVE ドットの穏やかな明滅のみ（唯一の常時アニメ・控えめ） */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .55rem; border-radius: var(--r-pill); letter-spacing: .02em; }
.badge.ok { background: var(--mint-soft); color: var(--ok); border: 1px solid var(--mint); }
.badge.pending { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge.unregistered { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.win { color: var(--ok); font-weight: 700; }
.loss { color: var(--danger); font-weight: 700; }

/* --- 対戦カード（勝敗予想） ------------------------------------------- */
.vs-card .names { display: flex; align-items: center; gap: .8rem; justify-content: space-between; margin: .5rem 0; }
.vs-card .name { font-size: 1.1rem; font-weight: 800; flex: 1; }
.vs-card .name.right { text-align: right; }
.vs-mark {
    font-weight: 900; font-style: italic; letter-spacing: .04em;
    background: linear-gradient(90deg, var(--pink), var(--lavender));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.votebar { display: flex; height: .6rem; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); margin: .6rem 0 .3rem; }
.votebar .p1 { background: linear-gradient(90deg, var(--mint), #a6ecdb); }   /* P1 = ミント系 */
.votebar .p2 { background: linear-gradient(90deg, var(--pink), #ffb6d3); }   /* P2 = ピンク系 */
.votes { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }
.vote-actions { display: flex; gap: .6rem; margin-top: .8rem; }
.vote-actions form { flex: 1; }
.vote-actions .btn { width: 100%; }
.picked { outline: 2px solid var(--gold); outline-offset: 1px; }

/* --- フォーム ---------------------------------------------------------- */
label { display: block; font-size: .8rem; color: var(--muted); letter-spacing: .02em; margin-bottom: .25rem; }
input, select {
    width: 100%; background: var(--bg2); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: .55rem .8rem; font-family: var(--font); font-size: .95rem;
}
input:focus, select:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px var(--lavender-soft); }
.field { margin-bottom: 1rem; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 180px; }

/* --- フラッシュメッセージ ------------------------------------------------ */
.flash { margin: 1rem auto 0; padding: .7rem 1rem; border-radius: var(--r); font-size: .9rem; }
.flash.ok { background: var(--mint-soft); border: 1px solid var(--mint); color: var(--ok); }
.flash.ng { background: var(--pink-soft); border: 1px solid var(--pink); color: var(--danger); }

/* --- ログイン ----------------------------------------------------------- */
.login-box { max-width: 420px; margin: 4rem auto; text-align: center; }
.login-box .card { padding: 2rem; }
.provider-btn {
    display: block; width: 100%; margin: .6rem 0; padding: .8rem;
    border-radius: var(--r); border: 1px solid var(--line);
    background: var(--bg2); color: var(--text); font-weight: 700; letter-spacing: .01em;
    transition: border-color .18s, box-shadow .18s, transform .12s;
}
.provider-btn:hover { border-color: var(--pink); box-shadow: var(--shadow-sm); transform: translateY(-2px); text-decoration: none; }

/* 利用規約同意ゲート（v0.6）。未同意時はプロバイダボタンを淡色＋クリック不可にする。 */
.agree-check { display: flex; gap: .5rem; align-items: flex-start; text-align: left;
    margin: .4rem 0 1rem; font-size: .92rem; }
.agree-check input { margin-top: .2rem; }
.provider-btn.is-gated { opacity: .45; cursor: not-allowed; pointer-events: none; transform: none; }
.agree-required { color: var(--pink); font-size: .85rem; margin-top: .6rem; }

/* --- 予約フォーム（v0.6・ゲーム設定化） --------------------------------- */
.config-note { padding: .55rem .7rem; border-radius: var(--r);
    background: var(--bg2); border: 1px dashed var(--line); }
.radios { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.radio { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; }
.participant-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: .6rem; margin-bottom: .5rem; }
.participant-row .field { margin: 0; }
/* アコーディオン（詳細項目・初期閉）。 */
details.accordion { border: 1px solid var(--line); border-radius: var(--r);
    padding: .2rem .7rem; margin: .8rem 0; background: var(--bg2); }
details.accordion > summary { cursor: pointer; font-weight: 700; padding: .5rem 0; list-style: revert; }
details.accordion .detail-body { padding: .3rem 0 .7rem; }
.detail-row td { padding-top: 0; }
.badge.role { margin: .15rem .25rem .15rem 0; }
.badge.role em { font-style: normal; opacity: .8; }
.card.terms h2 { margin-top: 1.4rem; }
.card.terms p { line-height: 1.7; }

/* --- フッター ------------------------------------------------------------ */
main { flex: 1; }
.footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.4rem 0; }
.footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--muted); }

/* --- ページタイトル -------------------------------------------------------- */
.page-title { padding: 2.2rem 0 .4rem; }
.page-title h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: .01em; }
.page-title p { color: var(--muted); font-size: .9rem; }

/* --- 言語切替 -------------------------------------------------------- */
.langs { display: inline-flex; gap: .1rem; align-items: center; }
.langs a { color: var(--muted); font-size: .78rem; padding: .15rem .4rem; border-radius: var(--r-sm); }
.langs a:hover { color: var(--ink-lavender); background: var(--surface-2); text-decoration: none; }

/* --- プランバッジ / サイズバッジ --------------------------------------- */
.badge.plan { font-weight: 700; letter-spacing: .02em; }
.badge.plan.free { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge.plan.pro { background: var(--mint-soft); color: var(--ok); border: 1px solid var(--mint); }
.badge.plan.deluxe { background: var(--gold-soft); color: var(--ink-gold); border: 1px solid var(--gold); }
.badge.size { background: var(--lavender-soft); color: var(--ink-lavender); border: 1px solid var(--lavender); }

/* --- プランカード ------------------------------------------------------ */
.plan-card { display: flex; flex-direction: column; }
.plan-card.featured { border-color: var(--gold); box-shadow: var(--shadow-lg); }
.plan-head { border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: .8rem; }
.plan-head h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: .01em; }
.price { font-size: 2rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.price .yen { font-size: 1.1rem; vertical-align: super; }
.price .per { font-size: .85rem; color: var(--muted); font-weight: 400; }
.feat { list-style: none; display: flex; flex-direction: column; gap: .45rem; margin: 0 0 1rem; flex: 1; }
.feat li { font-size: .88rem; padding-left: 1.4rem; position: relative; color: var(--text); }
.feat li::before { content: "✓"; position: absolute; left: 0; color: var(--ink-pink); font-weight: 700; }
.feat li.hi { color: var(--ink-gold); font-weight: 700; }
.feat li.hi::before { content: "★"; color: var(--gold); }
.plan-action { margin-top: auto; }
.plan-action .btn, .plan-action .ghost { width: 100%; }

/* --- モック決済 -------------------------------------------------------- */
.amount-box {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
    padding: .8rem 1rem; margin-bottom: 1rem;
}
.amount-box .amount { font-weight: 700; }
.pay-methods { display: flex; gap: .8rem; margin-bottom: 1rem; }
.pay-method {
    flex: 1; display: flex; align-items: center; gap: .5rem; cursor: pointer;
    background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: .6rem .8rem; color: var(--text); font-size: .9rem;
    transition: border-color .18s;
}
.pay-method:hover { border-color: var(--lavender); }
.pay-method input { width: auto; }

/* ===================================================================
   v0.4 追加コンポーネント（リーダーボード多指標・公開プロフィール）
   =================================================================== */

/* --- 指標切替タブ（ピル状リンク） --- */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.tab {
    display: inline-block; padding: .4rem 1rem; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
    font-size: .86rem; font-weight: 700; letter-spacing: .01em;
    transition: background .18s, color .18s, border-color .18s;
}
.tab:hover { color: var(--text); border-color: var(--lavender); text-decoration: none; }
/* 選択中タブ（設計は .tab.on。念のため .active も同義で受ける） */
.tab.on, .tab.active { background: var(--lavender-soft); color: var(--text); border-color: var(--lavender); }

/* --- 選択中の指標列（th/td）を淡く強調 --- */
.active-metric { background: var(--lavender-soft); }
tbody tr:hover .active-metric { background: var(--lavender-soft); }

/* --- 表内の表示名リンク（→公開プロフィール） --- */
.name-link { color: var(--text); font-weight: 700; }
.name-link:hover { color: var(--ink-lavender); text-decoration: underline; }

/* --- 集計タイル群（ホーム・公開プロフィール） --- */
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-tile {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; text-align: center;
    transition: box-shadow .2s, transform .12s;
}
.stat-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.stat-tile .val {
    display: block; font-size: 1.9rem; font-weight: 800; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.stat-tile .lbl { display: block; margin-top: .3rem; font-size: .78rem; color: var(--muted); letter-spacing: .02em; }

/* --- 公開プロフィール見出し（淡いグラデ帯） --- */
.profile-hero {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
    background: linear-gradient(90deg, var(--pink-soft), var(--lavender-soft));
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.6rem 1.8rem; margin-bottom: 1.4rem;
}
.profile-hero .name { font-size: 1.8rem; font-weight: 800; color: var(--text); letter-spacing: .01em; }

/* --- ランク名バッジ（大） --- */
.rank-name {
    display: inline-block; padding: .3rem 1rem; border-radius: var(--r-pill);
    background: var(--gold-soft); border: 1px solid var(--gold); color: var(--ink-gold);
    font-size: 1rem; font-weight: 700;
}

/* --- 勝者回数の内訳など補助テキスト --- */
.breakdown { color: var(--muted); font-size: .82rem; }

/* --- 空状態メッセージ --- */
.empty {
    text-align: center; color: var(--muted); padding: 2.4rem 1rem;
    border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface);
}

/* ===================================================================
   v0.5 追加コンポーネント（アバター・アイコン）
   =================================================================== */

/* --- 丸アバター（画像 or Font Awesome の既定ユーザーアイコン） --- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden; flex: none; vertical-align: middle;
    background: var(--lavender-soft); color: var(--ink-lavender);
    border: 1px solid var(--line);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.xs { width: 1.5rem; height: 1.5rem; font-size: .72rem; }
.avatar.sm { width: 2rem; height: 2rem; font-size: .9rem; }
.avatar.lg { width: 4.2rem; height: 4.2rem; font-size: 1.8rem; }

/* --- 表示名（アバター＋リンク）を横並びに --- */
.player-name { display: inline-flex; align-items: center; gap: .5rem; }

/* --- 集計タイルのアイコン --- */
.tile-ic { display: block; font-size: 1.5rem; color: var(--lavender); margin-bottom: .35rem; }
.tile-ic.gold { color: var(--gold); }

/* --- マイページのアバター編集（プレビュー＋アップロード） --- */
.avatar-edit { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.avatar-edit form { flex: 1; min-width: 220px; }
.avatar-edit input[type="file"] { font-size: .85rem; }

/* --- レスポンシブ --- */
@media (max-width: 640px) {
    .nav-inner { gap: .8rem; }
    .links { order: 3; width: 100%; justify-content: center; }
    .account { width: 100%; justify-content: center; margin-left: 0; }
    .hero { padding: 3rem 0 2rem; }
    .stat-tile .val { font-size: 1.6rem; }
    .profile-hero .name { font-size: 1.5rem; }
}