/* ============================================================
   FIGHence Lab Mypage — standalone dark member portal
   本体サイト(css/style.css)のトークン（色/フォント/ボタンの切れ角
   ラインなど）は流用しつつ、ヘッダー/フッター/背景は本体サイトの
   ライトテーマ・オーバーライドを打ち消して独自のダーク構成にする。
   ============================================================ */

/* --- Base: force dark ---
   site.css の LIGHT THEME OVERRIDE 側に body[data-theme="dark"] という
   属性セレクタのルールがあり、単純な `body` セレクタより詳細度が高いため
   読み込み順に関わらず勝ってしまう。同じ詳細度のセレクタで上書きする。 */
body[data-theme="dark"] {
    background-color: var(--deep-black);
    color: var(--text-on-dark);
}
/* 走査線アニメーションを重ねる。
   #ambient-bg自体は本体サイトのデフォルト（暗いradial-gradient）のまま。 */
#ambient-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,242,255,0.05) 50%, transparent 100%);
    background-size: 100% 240px;
    background-repeat: no-repeat;
    animation: hud-scan 7s linear infinite;
}
@keyframes hud-scan {
    0%   { background-position: 0 -240px; }
    100% { background-position: 0 100vh; }
}
@media (prefers-reduced-motion: reduce) {
    #ambient-bg::after { animation: none; display: none; }
}

/* 以前の正方形グリッド背景（公式サイトのヒーロー背景 .hero-slide-grid と
   同じ、線パターン+放射状マスクでフェードさせる手法）に戻す。
   ハニカム（六角形）パターンは使わない。 */
#hex-story-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(0,242,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,242,255,0.08) 1px, transparent 1px);
    background-size: 42px 42px;
    background-color: #05080a;
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
            mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
    pointer-events: none;
}
/* パーティクル網（点と線が繋がるネットワーク）は不要なため非表示に戻す
   （site.cssの #bio-canvas { opacity: 0.55; } を打ち消す。公式サイト側はそのまま） */
#bio-canvas {
    display: none !important;
}

a { text-decoration: none;
    color: #fff;
}

/* --- Header --- */
.mypage-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 40px;
    background: rgba(5, 8, 10, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,242,255,0.12);
}
.mypage-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-on-dark);
}
.mypage-logo-img { height: 32px; filter: brightness(0) invert(1); }
.mypage-logo span { font-size: 0.78rem; letter-spacing: 0.25em; color: var(--neon-blue); margin-top: 16px; }
.mypage-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}
.mypage-nav a { color: rgba(224,247,250,0.88); transition: 0.25s; }
.mypage-nav a:hover { color: var(--neon-blue); }
.mypage-nav-cta {
    padding: 10px 20px;
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue) !important;
}
.mypage-nav-cta:hover { background: var(--neon-blue); color: #000 !important; }

/* --- Layout --- */
.mypage-main { min-height: 100vh; background: rgba(4, 9, 14, 0.3); }
.mypage-section {
    min-height: auto;
    padding: 140px 24px 100px;
    display: block;
}
.mypage-container { max-width: 640px; margin: 0 auto; }
.mypage-container-wide { max-width: 960px; }
.mypage-eyebrow {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--neon-blue);
    margin-bottom: 18px;
}
.mypage-page-title {
    font-size: 2rem;
    text-align: center;
    color: var(--text-on-dark);
    margin-bottom: 16px;
}
.mypage-lead {
    text-align: center;
    color: rgba(224,247,250,0.85);
    font-size: 0.92rem;
    line-height: 1.9;
    margin-bottom: 8px;
}
.mypage-content { margin-top: 40px; }

.mypage-hero .mypage-cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin: 40px auto 0;
    gap: 16px;
}

/* --- Buttons (cta-hero/cta-ghost と同じ切れ角ライン手法) --- */
.mypage-btn {
    position: relative;
    display: inline-block;
    padding: 16px 42px;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    transition: 0.3s;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.mypage-btn::before, .mypage-btn::after {
    content: '';
    position: absolute;
    width: 14.2px;
    height: 1px;
    transform-origin: 0 0;
    pointer-events: none;
}
.mypage-btn::before { left: -1px; top: 9px; transform: rotate(-45deg); }
.mypage-btn::after { left: calc(100% - 9px); top: calc(100% + 1px); transform: rotate(-45deg); }

.mypage-btn-primary {
    background: var(--deep-black);
    color: var(--neon-blue);
    border: 1px solid var(--neon-blue);
    box-shadow: 0 0 20px rgba(0,242,255,0.18);
}
.mypage-btn-primary::before, .mypage-btn-primary::after { background: var(--neon-blue); }
.mypage-btn-primary:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 28px rgba(0,242,255,0.5); transform: translateY(-2px); }
.mypage-btn-primary:hover::before, .mypage-btn-primary:hover::after { background: #000; }

.mypage-btn-ghost {
    color: rgba(224,247,250,0.8);
    border: 1px solid rgba(224,247,250,0.25);
}
.mypage-btn-ghost::before, .mypage-btn-ghost::after { background: rgba(224,247,250,0.25); }
.mypage-btn-ghost:hover { border-color: var(--neon-blue); color: var(--neon-blue); background: rgba(0,242,255,0.06); }
.mypage-btn-ghost:hover::before, .mypage-btn-ghost:hover::after { background: var(--neon-blue); }

.mypage-btn-danger-outline {
    background: var(--deep-black);
    color: var(--neon-red);
    border: 1px solid var(--neon-red);
    box-shadow: 0 0 20px rgba(255,42,42,0.18);
}
.mypage-btn-danger-outline::before, .mypage-btn-danger-outline::after { background: var(--neon-red); }
.mypage-btn-danger-outline:hover { background: var(--neon-red); color: #fff; box-shadow: 0 0 28px rgba(255,42,42,0.5); transform: translateY(-2px); }
.mypage-btn-danger-outline:hover::before, .mypage-btn-danger-outline:hover::after { background: #fff; }

.mypage-btn-danger {
    background: var(--neon-red);
    color: #fff;
    border: 1px solid var(--neon-red);
    box-shadow: 0 0 20px rgba(255,42,42,0.25);
}
.mypage-btn-danger::before, .mypage-btn-danger::after { background: #fff; }
.mypage-btn-danger:hover { background: #d61f1f; border-color: #d61f1f; box-shadow: 0 0 28px rgba(255,42,42,0.5); transform: translateY(-2px); }

.withdrawal-body { display: none; margin-top: 16px; }
.withdrawal-body.is-active { display: block; }

/* --- Footer --- */
.mypage-footer {
    padding: 30px 40px;
    border-top: 1px solid rgba(0,242,255,0.1);
    background: rgba(255,255,255,0.02);
}
.mypage-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 0.78rem;
    color: rgba(224,247,250,0.65);
}
.mypage-footer-links { display: flex; gap: 22px; }
.mypage-footer-links a { color: rgba(224,247,250,0.65); transition: 0.25s; }
.mypage-footer-links a:hover { color: var(--neon-blue); }

@media (max-width: 640px) {
    .mypage-header { padding: 18px 20px; }
    .mypage-nav { gap: 16px; font-size: 0.72rem; }
    .mypage-nav-cta { padding: 8px 14px; }
    .mypage-section { padding: 110px 18px 70px; }
    .mypage-page-title { font-size: 1.5rem; }
    .mypage-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Paid Member Subscriptions — dark skin
   ============================================================ */
.pms-form { max-width: 560px; margin: 0 auto; }
.pms-form-fields-wrapper {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.pms-field { display: flex; flex-direction: column; gap: 8px; }
.fighence-card-name-field { margin-bottom: 22px; }
.pms-field label {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.05em;
    font-weight: 600;
    font-family: var(--font-jp);
}
.pms-field input[type="text"],
.pms-field input[type="email"],
.pms-field input[type="password"],
.pms-field input[type="tel"],
.pms-field select {
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(0,242,255,0.3);
    color: #fff;
    height: 40px;
    padding: 0 18px;
    font-size: 0.95rem;
    font-family: var(--font-jp);
    border-radius: 3px;
    transition: 0.3s;
    width: 100%;
}
.pms-field input[type="text"]:focus,
.pms-field input[type="email"]:focus,
.pms-field input[type="password"]:focus,
.pms-field input[type="tel"]:focus,
.pms-field select:focus {
    outline: none;
    border-color: var(--neon-blue);
    box-shadow: 0 0 12px rgba(0,242,255,0.15);
}
.pms-field.pms-field-error input { border-color: var(--neon-red); }

/* --- 会員規約 同意チェックボックス（登録フォーム） --- */
.pms-gdpr-field label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(224,247,250,0.8);
    cursor: pointer;
}
.pms-gdpr-field input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--neon-blue);
}
.pms-gdpr-field-text a { color: var(--neon-blue); text-decoration: underline; }
.pms-gdpr-field.pms-field-error label { color: #ff6b6b; }

.pms_field-errors-wrapper,
.pms-form-errors-wrapper {
    background: rgba(255,42,42,0.08);
    border: 1px solid rgba(255,42,42,0.3);
    padding: 10px 14px;
    margin-top: 2px;
}
.pms_field-errors-wrapper p,
.pms-form-errors-wrapper p {
    color: #ff6b6b;
    font-size: 0.82rem;
    margin: 0;
}
.pms_success-messages-wrapper {
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.25);
    padding: 14px 18px;
    margin-bottom: 24px;
}
.pms_success-messages-wrapper p { color: var(--text-on-dark); margin: 0; font-size: 0.9rem; }
.pms-notice-title { color: var(--neon-blue); font-weight: 700; font-family: var(--font-en); letter-spacing: 0.05em; }

.pms-form input[type="submit"],
.pms-form-submit {
    display: block;
    width: 100%;
    padding: 16px 40px;
    background: var(--neon-blue);
    color: #000;
    border: none;
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    margin-top: 12px;
    font-family: var(--font-en);
    font-weight: 700;
    transition: 0.3s;
}
.pms-form input[type="submit"]:hover,
.pms-form-submit:hover { box-shadow: 0 0 24px rgba(0,242,255,0.5); transform: translateY(-2px); }

.pms-alert {
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.25);
    padding: 14px 18px;
    color: var(--text-on-dark);
    font-size: 0.9rem;
}
.pms-alert a { color: var(--neon-blue); }

/* --- Subscription plan picker (register form) --- */
.pms-field-subscriptions .pms-subscription-plan {
    display: block;
    border: 1px solid rgba(0,242,255,0.15);
    background: rgba(0,242,255,0.03);
    padding: 18px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: 0.3s;
}
.pms-field-subscriptions .pms-subscription-plan:hover { border-color: var(--neon-blue); }
.pms-field-subscriptions .pms-subscription-plan label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; cursor: pointer; }
.pms-field-subscriptions .pms-subscription-plan input[type="radio"] { accent-color: var(--neon-blue); margin-right: 8px; }
.pms-subscription-plan-name { font-family: var(--font-en); font-weight: 700; color: var(--text-on-dark); letter-spacing: 0.03em; }
.pms-subscription-plan-price { font-family: var(--font-en); color: var(--neon-blue); font-weight: 700; }
.pms-subscription-plan-price-value { font-size: 1.15rem; }
.pms-subscription-plan-sign-up-fee { color: rgba(224,247,250,0.8); font-size: 0.82rem; font-family: var(--font-jp); }
.pms-subscription-plan-description { color: rgba(224,247,250,0.78); font-size: 0.85rem; margin-top: 8px; width: 100%; }
.pms-divider { color: rgba(224,247,250,0.4); margin: 0 4px; }

/* --- ログインフォーム（[pms-login]）
   実際の出力は wp_login_form() 標準の #loginform ではなく、PMSが独自に
   #pms_login というIDで出力する（p.login-username / p.login-password 等、
   .pms-field ではなく素の<p>で囲まれている）。会員登録フォーム
   （.pms-form / .pms-field）と同じ見た目に揃える。 --- */
#pms_login p.login-username,
#pms_login p.login-password {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 22px;
}
#pms_login label {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.05em;
    font-weight: 600;
    font-family: var(--font-jp);
}
#pms_login input.input {
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(0,242,255,0.3);
    color: #fff;
    height: 40px;
    padding: 0 18px;
    font-size: 0.95rem;
    font-family: var(--font-jp);
    border-radius: 3px;
    transition: 0.3s;
    width: 100%;
}
#pms_login input.input:focus {
    outline: none;
    border-color: var(--neon-blue);
    box-shadow: 0 0 12px rgba(0,242,255,0.15);
}
#pms_login p.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(224,247,250,0.85);
    margin: 0 0 22px;
}
#pms_login input#rememberme { width: 16px; height: 16px; accent-color: var(--neon-blue); }
#pms_login p.login-submit { margin: 0; }
#pms_login p.login-extra {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(224,247,250,0.8);
}
#pms_login p.login-extra a { color: var(--neon-blue); text-decoration: underline; }
#pms_login p.login-extra .separator { margin: 0 8px; color: rgba(224,247,250,0.4); }
p.pms-login-error {
    background: rgba(255,42,42,0.08);
    border: 1px solid rgba(255,42,42,0.3);
    padding: 12px 16px;
    color: #ff6b6b;
    font-size: 0.85rem;
    max-width: 560px;
    margin: 0 auto 20px;
}

/* --- Account dashboard ([pms-account]) ---
   マイページ上部にPMS標準の契約情報リストが出るが、代わりにHUD側で
   独自に「契約情報」パネルを表示するため、こちらは非表示にする */
.pms-account-subscriptions-header,
.pms-account-subscription {
    display: none !important;
}
.pms-account-subscriptions-header {
    font-family: var(--font-en);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: rgba(224,247,250,0.65);
    text-transform: uppercase;
    border-bottom: 2px solid rgba(0,242,255,0.2);
}
.pms-account-subscription .pms-subscription-plan-name { font-family: var(--font-jp); font-weight: 700; color: var(--text-on-dark); }
.pms-account-subscription .pms-subscription-status { color: var(--neon-blue); font-size: 0.85rem; }
.pms-account-subscription .pms-subscription-plan-expiration { color: rgba(224,247,250,0.8); font-size: 0.85rem; }
.pms-account-subscription .pms-subscription-details a { color: rgba(224,247,250,0.75); font-size: 0.82rem; text-decoration: underline; }
.pms-account-subscription .pms-subscription-details a:hover { color: var(--neon-blue); }
.pms-account-section-wrapper + .pms-account-section-wrapper { margin-top: 40px; }

/* --- アカウントメニュー（契約プラン/プロフィール編集/お支払い/ログアウト）
       のハンバーガー化。 元のマークアップは .pms-account-navigation > ul > li > a ---
   本文側のどこに出力されても、JS（mypage.js）が#mypageHeaderAccountSlotへ
   移動させ、常にヘッダー内に表示する */
.mypage-header-account-slot { display: flex; align-items: center; }
.mypage-header-account-slot .pms-account-navigation { margin-bottom: 0; }
.pms-account-navigation { position: relative; display: flex; justify-content: flex-end; margin-bottom: 28px; }
.hud-account-menu-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,242,255,0.05);
    border: 1px solid rgba(0,242,255,0.3);
    color: var(--neon-blue);
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.25s;
}
.hud-account-menu-toggle:hover { background: rgba(0,242,255,0.12); }
.pms-account-navigation ul {
    list-style: none;
    margin: 0;
    padding: 8px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: rgba(5, 8, 10, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,242,255,0.25);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    z-index: 60;
    display: none !important;
    flex-direction: column;
    gap: 2px;
}
/* PMSプラグイン本体のstyle-front-end.cssが .pms-account-navigation ul { display:flex }
   を無条件に指定しており、詳細度が同じで読み込み順によって競り勝ってしまうため、
   開閉トグルの状態を確実に反映させるには !important が必要 */
.pms-account-navigation.is-open ul { display: flex !important; }
.pms-account-navigation ul li { width: 100%; }
.pms-account-navigation ul a {
    display: block;
    padding: 11px 16px;
    font-size: 0.85rem;
    color: rgba(224,247,250,0.8);
    transition: 0.2s;
}
.pms-account-navigation ul a:hover { background: rgba(0,242,255,0.08); color: var(--neon-blue); }
.pms-account-navigation ul a.pms-account-navigation-link--active { color: var(--neon-blue); background: rgba(0,242,255,0.06); }
.pms-account-navigation-link--logout { margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 2px; }
/* 上の .pms-account-navigation ul a （詳細度: クラス1+要素2）より詳細度を高くしないと
   ログアウトの文字色が上書きされてしまうため、ul を含めたセレクタにしている */
.pms-account-navigation ul .pms-account-navigation-link--logout a { color: var(--neon-red); }
.pms-account-navigation ul .pms-account-navigation-link--logout a:hover { background: rgba(255,42,42,0.1); color: var(--neon-red); }


/* ============================================================
   HUD DASHBOARD — Iron Man 風ステータス画面
   （背景のハニカムパターンは #hex-story-bg 側で全ページ共通に処理）
   ============================================================ */

.hud-dashboard { margin-top: 50px; display: flex; flex-direction: column; gap: 24px; }
.hud-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hud-row-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* --- Panel base: 切れ角 + コーナーブラケット --- */
.hud-panel {
    position: relative;
    background: rgb(12 12 12 / 80%);
    border: 1px solid rgba(0,242,255,0.25);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    padding: 24px 26px;
}
.hud-panel::before, .hud-panel::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
}
.hud-panel::before { top: -1px; left: -1px; border-top: 2px solid var(--neon-blue); border-left: 2px solid var(--neon-blue); }
.hud-panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon-blue); border-right: 2px solid var(--neon-blue); }
.hud-panel-wide { width: 100%; }

.hud-panel-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,242,255,0.15); }
.hud-panel-tag { font-size: 0.68rem; letter-spacing: 0.2em; color: rgba(0,242,255,0.6); }
.hud-panel-title { font-size: 1rem; color: var(--text-on-dark); letter-spacing: 0.08em; }
.reserve-panel-subtitle { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.05em; color: rgba(224,247,250,0.5); margin-left: 4px; }

/* --- ステータス読み出し --- */
.hud-readouts { display: flex; flex-wrap: wrap; gap: 32px; row-gap: 16px; margin-bottom: 4px; }
.hud-readout { display: flex; flex-direction: column; gap: 2px; }
.hud-readout-label { font-size: 0.68rem; letter-spacing: 0.15em; color: rgba(224,247,250,0.5); }
.hud-readout-value { font-size: 2.1rem; font-weight: 700; color: var(--neon-blue); text-shadow: 0 0 16px rgba(0,242,255,0.4); line-height: 1.2; }
.hud-readout-value small { font-size: 0.9rem; font-weight: 400; color: rgba(224,247,250,0.6); margin-left: 4px; }
.hud-readout-sub { font-size: 0.68rem; color: rgba(224,247,250,0.4); }

/* --- 記録フォーム（details/summary） --- */
.hud-edit-toggle { margin-top: 18px; }
.hud-edit-toggle summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--neon-blue);
    border: 1px solid rgba(0,242,255,0.3);
    display: inline-block;
    padding: 8px 16px;
}
.hud-edit-toggle summary::-webkit-details-marker { display: none; }
.hud-edit-toggle summary:hover { background: rgba(0,242,255,0.08); }
.hud-status-form { margin-top: 16px; display: flex; flex-direction: column; gap: 25px; }
.hud-form-row { display: flex; align-items: center; gap: 12px; }
.hud-form-row label { flex: 0 0 90px; font-size: 0.72rem; color: rgba(224,247,250,0.7); }
.hud-form-row input {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(0,242,255,0.3);
    color: #fff;
    font-family: var(--font-jp);
    font-size: 0.9rem;
    border-radius: 3px;
}
.hud-form-row input:focus { outline: none; border-color: var(--neon-blue); box-shadow: 0 0 12px rgba(0,242,255,0.15); }
.hud-form-row textarea {
    flex: 1;
    min-height: 100px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(0,242,255,0.3);
    color: #fff;
    font-family: var(--font-jp);
    font-size: 0.9rem;
    border-radius: 3px;
    resize: vertical;
}
.hud-form-row textarea:focus { outline: none; border-color: var(--neon-blue); box-shadow: 0 0 12px rgba(0,242,255,0.15); }
.hud-form-submit { margin-top: 4px; width: 100%; padding: 12px; font-size: 0.8rem; }

.hud-form-row-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.hud-form-row-stack > label { flex: none; }
.hud-form-row-stack textarea { margin-top: 4px; }
.hud-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hud-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-jp);
    font-size: 0.85rem;
    color: #fff;
    cursor: pointer;
}
.hud-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--neon-blue);
    flex: none;
}

/* --- 会員証 --- */
.hud-card-info { display: flex; flex-direction: column; gap: 6px; }
.hud-card-name { font-size: 1.3rem; font-weight: 700; color: var(--text-on-dark); }
.hud-card-plan { font-size: 0.78rem; color: var(--neon-blue); letter-spacing: 0.05em; }
.hud-card-no { font-size: 0.72rem; color: rgba(224,247,250,0.5); letter-spacing: 0.1em; }

/* --- 体重推移グラフ --- */
.hud-chart { width: 100%; height: 160px; display: block; }
.hud-chart-grid { stroke: rgba(0,242,255,0.12); stroke-width: 1; }
.hud-chart-line { fill: none; stroke: var(--neon-blue); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(0,242,255,0.6)); }
.hud-chart-dot { fill: var(--neon-blue); }
.hud-chart-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.68rem; color: rgba(224,247,250,0.45); }
.hud-empty { color: rgba(224,247,250,0.5); font-size: 0.85rem; padding: 12px 0; }

/* --- テーブル（レッスン予約 / 入館記録） --- */
.hud-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hud-table th {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: rgba(224,247,250,0.5);
    padding: 10px 12px;
    border-bottom: 2px solid rgba(0,242,255,0.2);
}
.hud-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(224,247,250,0.85); }
.hud-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    border: 1px solid currentColor;
}
.hud-badge-booked { color: var(--neon-blue); }
.hud-badge-completed { color: #7cffb2; }
.hud-badge-canceled { color: #ff6b6b; }

@media (max-width: 768px) {
    .hud-row-2col { grid-template-columns: 1fr; }
    .hud-row-3col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .hud-panel { padding: 18px 16px; }
    .hud-readouts { gap: 20px; }
    .hud-readout-value { font-size: 1.6rem; }
    .hud-table { font-size: 0.78rem; }
    .hud-table th, .hud-table td { padding: 8px 6px; }
    .hud-form-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .hud-form-row label { flex: none; }
}

/* ============================================================
   HUD タブナビ（アプリ風・画面最下部固定）
   ============================================================ */
.hud-dashboard-tabbed { margin-bottom: 110px; }
.hud-tab-panel { display: none; }
.hud-tab-panel.is-active { display: flex; flex-direction: column; gap: 24px; }

.hud-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 500;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: rgba(5, 8, 10, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,242,255,0.2);
    box-shadow: 0 -4px 24px rgba(0,242,255,0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.hud-tab {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 4px 10px;
    background: none;
    border: none;
    border-top: 2px solid transparent;
    color: rgba(224,247,250,0.45);
    cursor: pointer;
    transition: 0.25s;
}
.hud-tab i { font-size: 1.05rem; }
.hud-tab-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ff4d4d;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.hud-tab span { font-size: 0.62rem; letter-spacing: 0.05em; }
.hud-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 8px;
    background: #ff4d4d;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
.hud-tab:hover { color: rgba(224,247,250,0.75); }
.hud-tab.is-active {
    color: var(--neon-blue);
    border-top-color: var(--neon-blue);
    text-shadow: 0 0 10px rgba(0,242,255,0.5);
}

@media (max-width: 400px) {
    .hud-tab span { font-size: 0.56rem; }
    .hud-tab i { font-size: 0.95rem; }
}

/* --- ログアウト確認モーダル --- */
.hud-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(2, 4, 6, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.hud-modal-overlay.is-open { display: flex; }
.hud-modal { width: 100%; max-width: 360px; background: rgba(5, 8, 10, 0.97); }
.hud-modal-text { color: rgba(224,247,250,0.85); font-size: 0.9rem; margin-bottom: 24px; }
.hud-modal-actions { display: flex; gap: 12px; }
.hud-modal-actions .mypage-btn { flex: 1; padding: 12px; font-size: 0.78rem; text-align: center; }
#hud-logout-cancel {
    background: transparent;
    color: #999;
    border-color: #999;
}
#hud-logout-cancel::before, #hud-logout-cancel::after { background: #999; }
#hud-logout-cancel:hover {
    background: rgba(153,153,153,0.1);
    color: #ccc;
    border-color: #ccc;
}
#hud-logout-cancel:hover::before, #hud-logout-cancel:hover::after { background: #ccc; }
#reserve-confirm-modal-cancel {
    background: transparent;
    color: var(--neon-red);
    border-color: var(--neon-red);
}
#reserve-confirm-modal-cancel::before, #reserve-confirm-modal-cancel::after { background: var(--neon-red); }
#reserve-confirm-modal-cancel:hover {
    background: rgba(255,42,42,0.1);
    color: var(--neon-red);
    border-color: var(--neon-red);
}

/* マイページはh1/リード文を視覚的に隠している（sr-only）ため、その分の余白を詰める。
   ファイル末尾に置くことで、レスポンシブ用の .mypage-section 上書き（メディアクエリ内）
   より確実に後勝ちさせる */
.mypage-section-tight { padding-top: 60px !important; }
.mypage-content-flush { margin-top: 0 !important; }
/* マイページのダッシュボード表示時、PMS標準の生の契約情報（テーブル等）は
   独自のHUDダッシュボードに完全に置き換えられるため非表示にする。
   ただし中に含まれる .pms-account-navigation（ハンバーガーメニューの元要素）は
   mypage.js が読み取って#mypageHeaderAccountSlotへ移動させるため、
   要素自体は削除せずCSSで隠すだけにする。 */
.mypage-content-dashboard-hidden { display: none; }
@media (max-width: 640px) {
    /* スマホ版はヘッダーが2段になったり、「おかえりなさい」の右側の会員種別バッジが
       折り返して2行になったりするため、ヘッダーと被らないよう余白を広めに取る */
    .mypage-section-tight { padding-top: 100px !important; }
}

/* プロフィール編集/お支払いなど、契約プラン以外のタブに表示する「マイページに戻る」 */
.mypage-back-row { margin-top: 50px; text-align: center; }

/* 会員登録フォーム：姓・名欄は「氏名」欄（旧ユーザー名欄）に統合したため非表示 */
.pms-first-name-field, .pms-last-name-field { display: none; }

/* クレジットカード入力欄（Stripe Elements）を中央寄せにする */
#pms-stripe-connect { max-width: 480px; margin: 0 auto; text-align: center; }
#pms-stripe-connect .pms-field-type-heading { text-align: center; }
#pms-stripe-payment-elements { margin: 0 auto; text-align: left; }

/* お支払いタブ：現在のカード情報表示（.glass-panel.darkは静的サイト側の
   ライトテーマ上書きと競合し白背景になってしまうため、専用のスタイルを定義する） */
.mypage-card-info {
    margin-bottom: 30px;
    padding: 24px 28px;
    background: rgba(0,242,255,0.05);
    border: 1px solid rgba(0,242,255,0.25);
}
.mypage-card-info h3 { margin-bottom: 16px; font-size: 1rem; color: var(--neon-blue); }
.mypage-card-info p { margin-bottom: 20px; line-height: 1.8; color: rgba(224,247,250,0.88); }

/* --- ウェルカムストリップ（HUDダッシュボード上部・全タブ共通） --- */
.hud-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,242,255,0.12);
}
.hud-welcome-left { display: flex; align-items: center; gap: 14px; }
.hud-welcome-text { font-size: 0.9rem; color: rgba(224,247,250,0.8); }
.hud-welcome-text strong { color: var(--text-on-dark); font-weight: 700; }
@media (max-width: 640px) {
    /* 会員種別バッジが折り返して2行目になった際、右端に孤立させず
       アバター横のテキストの下にきれいに揃える */
    .hud-welcome { justify-content: flex-start; }
    .hud-welcome-plan { margin-left: 66px; }
}

/* --- 左上のアバター --- */
.hud-avatar-trigger {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(0,242,255,0.4);
    padding: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transition: 0.25s;
}
.hud-avatar-trigger:hover { border-color: var(--neon-blue); box-shadow: 0 0 16px rgba(0,242,255,0.3); }
.hud-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.hud-welcome-plan {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--neon-blue);
    border: 1px solid rgba(0,242,255,0.3);
    padding: 4px 10px;
}

/* --- 体重の増減インジケーター --- */
.hud-readout-delta { font-size: 0.85rem; font-weight: 700; margin-left: 6px; }
.hud-readout-delta.is-up { color: #ff8c7c; }
.hud-readout-delta.is-down { color: #7cffb2; }
.hud-readout-delta i { font-size: 0.7rem; margin-right: 2px; }

/* --- 目標体重・今月の利用回数 進捗バー --- */
.hud-goal-block { margin: 18px 0 4px; }
.hud-goal-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.hud-goal-label { font-size: 0.75rem; color: rgba(224,247,250,0.7); letter-spacing: 0.04em; }
.hud-goal-diff { font-size: 0.75rem; color: var(--neon-blue); }
.hud-goal-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.hud-goal-bar-fill { height: 100%; background: var(--neon-blue); border-radius: 3px; transition: width 0.3s ease; }
.hud-goal-bar-fill.is-full { background: #ff8c7c; }

/* --- 予約なし時のCTA --- */
.hud-empty-cta { margin-top: 16px; }
.hud-empty-cta .mypage-btn { padding: 12px 28px; font-size: 0.78rem; }

/* --- プロフィール画像・編集ポップアップ --- */
.hud-avatar-modal-panel { max-width: 340px; text-align: center; }
.hud-avatar-modal-preview { display: flex; justify-content: center; margin-bottom: 20px; }
.hud-avatar-modal-preview .hud-avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(0,242,255,0.4);
}
.hud-avatar-modal-actions { flex-direction: column; }
.hud-avatar-modal-actions .mypage-btn { width: 100%; }
#hud-avatar-upload-btn {
    background: transparent;
    color: #ff4d4d;
    border-color: #ff4d4d;
}
#hud-avatar-upload-btn::before, #hud-avatar-upload-btn::after { background: #ff4d4d; }
#hud-avatar-upload-btn:hover {
    background: rgba(255,77,77,0.08);
    color: #ff7373;
    border-color: #ff7373;
}
#hud-avatar-upload-btn:hover::before, #hud-avatar-upload-btn:hover::after { background: #ff7373; }
.hud-modal-close-text {
    display: block;
    margin: 16px auto 0;
    background: none;
    border: none;
    color: rgba(224,247,250,0.5);
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
}
.hud-modal-close-text:hover { color: rgba(224,247,250,0.8); }

/* --- お知らせ一覧 --- */
.hud-notice-list { display: flex; flex-direction: column; gap: 2px; }
.hud-notice { border-bottom: 1px solid rgba(255,255,255,0.06); }
.hud-notice summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 4px;
}
.hud-notice summary::-webkit-details-marker { display: none; }
.hud-notice summary::before {
    content: '+';
    order: 2;
    margin-left: auto;
    color: rgba(224,247,250,0.4);
    font-size: 1rem;
}
.hud-notice[open] summary::before { content: '−'; }
.hud-notice-date { font-size: 0.72rem; color: rgba(224,247,250,0.45); flex-shrink: 0; }
.hud-notice-title { color: var(--text-on-dark); font-size: 0.9rem; }
.hud-notice-body { padding: 0 4px 18px; color: rgba(224,247,250,0.7); font-size: 0.85rem; line-height: 1.8; }
.hud-notice-body p { margin-bottom: 1em; }
.hud-notice-more {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(224,247,250,0.7);
    transition: 0.2s;
}
.hud-notice-more:hover { color: var(--neon-blue); }

/* --- 契約情報パネル --- */
.hud-contract-info { display: flex; flex-wrap: wrap; gap: 24px; }
.hud-contract-row { display: flex; flex-direction: column; gap: 4px; }
.hud-contract-label { font-size: 0.68rem; letter-spacing: 0.15em; color: rgba(224,247,250,0.5); }
.hud-contract-value { font-size: 1.05rem; color: var(--text-on-dark); font-weight: 700; }
.hud-contract-actions { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(0,242,255,0.12); }
.hud-contract-actions .mypage-btn { width: 100%; padding: 14px; font-size: 0.82rem; }

/* ============================================================
   ご予約ページ（/reserve/）
   ============================================================ */
.reserve-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 40px 0;
    /* JSのscrollIntoView()でここへスクロールした際、固定ヘッダーに
       隠れないよう余白を確保する */
    scroll-margin-top: 90px;
}
.reserve-type-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 22px 14px;
    background: rgba(0,242,255,0.03);
    border: 1px solid rgba(0,242,255,0.2);
    color: rgba(224,247,250,0.8);
    cursor: pointer;
    transition: 0.25s;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.reserve-type-card:hover { border-color: var(--neon-blue); background: rgba(0,242,255,0.07); }
.reserve-type-card.is-active {
    border-color: var(--neon-blue);
    background: rgba(0,242,255,0.1);
    box-shadow: 0 0 20px rgba(0,242,255,0.15);
}
.reserve-type-card.is-active .reserve-type-name { color: var(--neon-blue); }
.reserve-type-name { font-size: 0.9rem; letter-spacing: 0.05em; color: var(--text-on-dark); }
.reserve-quorum-badge, .reserve-login-badge {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 10px;
    color: rgba(224,247,250,0.6);
    background: rgba(255,255,255,0.06);
}
.reserve-quorum-badge i, .reserve-login-badge i { margin-right: 4px; }

.reserve-form-panel { display: none; scroll-margin-top: 90px; }
.reserve-form-panel.is-active { display: block; margin-top: 24px; }

.reserve-quorum-notice {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(0,242,255,0.05);
    border: 1px solid rgba(0,242,255,0.2);
    padding: 16px 20px;
    margin-bottom: 24px;
}
.reserve-quorum-icons { font-size: 1.4rem; color: var(--neon-blue); flex-shrink: 0; }
.reserve-quorum-icons i:last-child { margin-left: -6px; opacity: 0.6; }
.reserve-quorum-notice p { font-size: 0.85rem; color: rgba(224,247,250,0.8); line-height: 1.7; margin: 0; }
.reserve-quorum-notice strong { color: var(--text-on-dark); }

.reserve-partner-note {
    font-size: 0.8rem;
    color: rgba(224,247,250,0.7);
    background: rgba(0,242,255,0.05);
    border: 1px solid rgba(0,242,255,0.2);
    padding: 12px 16px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.reserve-addon-notice {
    font-size: 0.85rem;
    color: rgba(224,247,250,0.85);
    background: rgba(255,158,64,0.06);
    border: 1px solid rgba(255,158,64,0.3);
    padding: 14px 16px;
    margin-bottom: 16px;
    line-height: 1.7;
}
.reserve-addon-notice strong { color: #ff9e40; }

.reserve-form .hud-form-submit { margin-top: 8px; }

/* --- 週間スケジュール（hacomono風カレンダー） --- */
.reserve-calendar-panel { margin-bottom: 32px; }
.reserve-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,242,255,0.12);
}
.reserve-week-nav-btn {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(224,247,250,0.7);
    padding: 6px 10px;
    transition: 0.2s;
}
.reserve-week-nav-btn:hover { color: var(--neon-blue); }
.reserve-week-label { font-size: 1rem; font-family: var(--font-en); font-weight: 600; color: var(--text-on-dark); }
.reserve-copy-week-form { text-align: center; margin-bottom: 20px; }
.reserve-copy-day-form { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.reserve-copy-day-form input[type="date"] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(224,247,250,0.3);
    color: rgba(224,247,250,0.9);
    padding: 7px 10px;
    font-size: 0.78rem;
    font-family: var(--font-en);
}
.reserve-copy-week-btn {
    background: transparent;
    border: 1px solid rgba(224,247,250,0.3);
    color: rgba(224,247,250,0.7);
    padding: 8px 16px;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: 0.2s;
}
.reserve-copy-week-btn:hover { border-color: var(--neon-blue); color: var(--neon-blue); }
.reserve-copy-week-btn i { margin-right: 6px; }

/* 月曜始まりの固定7列グリッドではなく、本日から6日先までを横スクロールで
   見せる。列幅は内容量（1日最大11枠程度）に関わらず一定の見やすい幅を保ち、
   縦方向はスクロールさせず全ての枠がそのまま伸びて見える高さにする。 */
.reserve-week-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 190px;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 10px;
    scrollbar-width: thin;
}
.reserve-day-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100px;
}
.reserve-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.reserve-day-col.is-today .reserve-day-head { border-bottom-color: var(--neon-blue); }
.reserve-day-name { font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(224,247,250,0.5); }
.reserve-day-col.is-today .reserve-day-name { color: var(--neon-blue); }
.reserve-day-date { font-size: 1.05rem; font-family: var(--font-en); font-weight: 700; color: var(--text-on-dark); }
.reserve-day-cards { display: flex; flex-direction: column; gap: 6px; }
.reserve-day-empty { text-align: center; font-size: 0.72rem; color: rgba(224,247,250,0.25); margin-top: 12px; }

.reserve-slot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 16px 10px;
    background: rgba(0,242,255,0.04);
    border: 1px solid rgba(0,242,255,0.18);
}
.reserve-slot-card.is-full { opacity: 0.5; border-color: rgba(255,255,255,0.1); }
.reserve-slot-time { font-size: 1.4rem; font-family: var(--font-en); color: var(--neon-blue); font-weight: 700; }

/* フィットネスクラス枠：ネオンブルーの代わりにネオンオレンジで区別する */
.reserve-slot-card.is-class { background: rgba(255,158,64,0.06); border-color: rgba(255,158,64,0.3); }
.reserve-slot-card.is-class .reserve-slot-time { color: #ff9e40; }
.reserve-slot-card.is-class .reserve-slot-book-btn { background: rgba(255,158,64,0.12); border-color: rgba(255,158,64,0.45); color: #ff9e40; }
.reserve-slot-card.is-class .reserve-slot-book-btn:hover { background: #ff9e40; color: #000; }

/* フィットネスクラスの確認パネル（予約するを押すと展開する枠）もオレンジで統一する */
.reserve-form-panel[data-panel="class"] .hud-panel { border-color: rgba(255,158,64,0.3); }
.reserve-form-panel[data-panel="class"] .hud-panel::before,
.reserve-form-panel[data-panel="class"] .hud-panel::after { border-color: #ff9e40; }
.reserve-form-panel[data-panel="class"] .hud-panel-head { border-bottom-color: rgba(255,158,64,0.2); }
.reserve-form-panel[data-panel="class"] .hud-panel-tag { color: rgba(255,158,64,0.7); }
.reserve-form-panel[data-panel="class"] .reserve-confirm-datetime { color: #ff9e40; }
.reserve-form-panel[data-panel="class"] .mypage-btn-primary {
    color: #ff9e40;
    border-color: #ff9e40;
    box-shadow: 0 0 20px rgba(255,158,64,0.18);
}
.reserve-form-panel[data-panel="class"] .mypage-btn-primary::before,
.reserve-form-panel[data-panel="class"] .mypage-btn-primary::after { background: #ff9e40; }
.reserve-form-panel[data-panel="class"] .mypage-btn-primary:hover {
    background: #ff9e40;
    box-shadow: 0 0 28px rgba(255,158,64,0.5);
}
.reserve-slot-title { font-size: 0.85rem; color: rgba(224,247,250,0.9); line-height: 1.4; font-weight: 600; }
.reserve-slot-desc { font-size: 0.66rem; color: rgba(224,247,250,0.5); letter-spacing: 0.02em; }
.reserve-slot-capacity { font-size: 0.85rem; font-family: var(--font-en); font-weight: 600; color: rgba(224,247,250,0.7); }
.reserve-slot-vacancy {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: #7cffb2;
    border: 1px solid rgba(124,255,178,0.4);
    padding: 2px 10px;
}
.reserve-slot-card.is-class .reserve-slot-vacancy { color: #ff9e40; border-color: rgba(255,158,64,0.4); }
.reserve-slot-card .reserve-quorum-badge { font-size: 0.62rem; padding: 3px 8px; }
.reserve-slot-book-btn {
    margin-top: 4px;
    width: 100%;
    padding: 9px 6px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    background: rgba(0,242,255,0.08);
    border: 1px solid rgba(0,242,255,0.3);
    color: var(--neon-blue);
    cursor: pointer;
    transition: 0.2s;
}
.reserve-slot-book-btn:hover { background: var(--neon-blue); color: #000; }
.reserve-slot-full-label {
    margin-top: 4px;
    font-size: 0.7rem;
    color: rgba(224,247,250,0.4);
    letter-spacing: 0.05em;
}
.reserve-slot-full-label.is-alert {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--neon-red);
    border: 1px solid rgba(255,42,42,0.4);
    padding: 2px 10px;
}
.reserve-calendar-note { margin-top: 18px; font-size: 0.72rem; color: rgba(224,247,250,0.4); text-align: center; }
.reserve-same-day-notice { margin-top: 10px; font-size: 0.8rem; font-weight: 600; color: var(--neon-red); }

@media (max-width: 900px) {
    .reserve-week-grid { grid-auto-columns: 150px; }
}
@media (max-width: 640px) {
    .reserve-type-grid { grid-template-columns: repeat(2, 1fr); }
    .reserve-quorum-notice { flex-direction: column; text-align: center; gap: 10px; }
    .reserve-week-label { font-size: 0.68rem; }
    .reserve-week-nav-btn { font-size: 0.62rem; }
}

/* --- 会員種別の確認フォーム（入力不要・会員情報表示のみ） --- */
.reserve-confirm-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: rgba(0,242,255,0.04);
    border: 1px solid rgba(0,242,255,0.15);
}
.reserve-confirm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reserve-confirm-label { font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(224,247,250,0.5); flex-shrink: 0; }
.reserve-confirm-value { font-size: 0.9rem; color: var(--text-on-dark); text-align: right; }
.reserve-confirm-datetime { color: var(--neon-blue); font-weight: 700; }

/* --- あなたの予約状況 --- */
.reserve-mine-panel { margin-top: 32px; }
.reserve-cancel-form { display: inline; }
.reserve-cancel-btn {
    background: transparent;
    border: 1px solid rgba(255,77,77,0.4);
    color: #ff6b6b;
    padding: 6px 12px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: 0.2s;
}
.reserve-cancel-btn:hover { background: rgba(255,77,77,0.1); border-color: #ff6b6b; }