/* ══════════════════════════════════════════════════════════════════════════
   mv-theme.css — MotionVox ダークテーマ(app.css の後段に読み込む上書きレイヤ)
   ──────────────────────────────────────────────────────────────────────────
   方針(tk 2026-07-13「Runway 等と同じ黒基調に・editor 編集画面と親和・死ぬ気でかっこよく」):
     ・近黒のシネマティック基調。編集画面(static/js/utils/theme-manager.js)と同血統の
       グレー階調(#1a1a1a〜#2e2e2e)を土台に、marketing/onboarding 面は深みと発光を足す。
     ・署名 = 「声が動きに変わる」スペクトル(イコライザ)の発光モチーフ。
     ・アクセント = 編集画面のスチールブルー(#5a7a9a)を生かした azure→violet グラデ。
     ・フォント = Space Grotesk(表示/数字)+ Inter(本文ラテン)+ Noto Sans JP(和文)。
   vendored(src_sunset_*)は一切変更しない(③-29)。ここは public 配下の純 CSS 上書きのみ。
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* 背景の階調(近黒→カード) */
    --mv-bg:            #07080b;
    --mv-bg-2:          #0b0d12;
    --mv-surface:       #0f1218;
    --mv-surface-2:     #141821;
    --mv-elev:          #191e29;
    --mv-elev-2:        #1f2530;
    /* 罫線 */
    --mv-border:        #262c38;
    --mv-border-2:      #333a48;
    --mv-border-soft:   rgba(255, 255, 255, .07);
    /* 文字 */
    --mv-text:          #eef1f7;
    --mv-text-2:        #c2cad8;
    --mv-muted:         #8b93a4;
    --mv-faint:         #5b6373;
    /* アクセント(azure→violet・cyan は署名の発光) */
    --mv-accent:        #4ea8ff;
    --mv-accent-2:      #8a6bff;
    --mv-accent-cyan:   #45e6d5;
    --mv-accent-grad:   linear-gradient(122deg, #4ea8ff 0%, #7c68ff 100%);
    --mv-accent-soft:   rgba(78, 168, 255, .14);
    --mv-danger:        #ff6b6b;
    --mv-success:       #34d3a6;
    --mv-warning:       #ffce5c;
    /* 形状・影 */
    --mv-radius:        14px;
    --mv-radius-lg:     22px;
    --mv-radius-sm:     10px;
    --mv-shadow:        0 24px 70px -18px rgba(0, 0, 0, .75);
    --mv-shadow-sm:     0 8px 30px -12px rgba(0, 0, 0, .6);
    --mv-ring:          0 0 0 3px rgba(78, 168, 255, .22);
    /* フォント */
    --mv-font-display:  "Manrope", "Noto Sans JP", "Inter", system-ui, sans-serif;
    --mv-font-body:     "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★トークン層の一括ダーク化(最重要)= app.css / Bootstrap の :root 変数を上書き。
   これで body class を問わず(dashboard-shell / billing-default / error-body /
   auth-shell / auth-body)全ページ・全コンポーネントが自動的にダークになる。
   個別クラス潰しの取りこぼし(白い場所)を構造的に無くす。
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* app.css デザイントークン(白→ダーク) */
    --text:               #eef1f7;
    --text-sub:           #b6bece;
    --text-faint:         #6b7382;
    --bg:                 #07080b;
    --surface:            #141821;
    --border:             #262c38;
    --border-strong:      #333a48;
    --brand-primary:      #4ea8ff;
    --brand-primary-hover:#7cc0ff;
    --brand-primary-soft: rgba(78, 168, 255, .14);
    --accent:             #8a6bff;
    --success:            #34d3a6;
    --warning:            #ffce5c;
    --danger:             #ff6b6b;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .5);
    --shadow-md: 0 8px 26px rgba(0, 0, 0, .55);
    --shadow-lg: 0 22px 56px rgba(0, 0, 0, .6);
    /* Bootstrap(app トークンを経由しない白系)も上書き */
    --bs-body-bg:         #07080b;
    --bs-body-color:      #eef1f7;
    --bs-emphasis-color:  #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #b6bece;
    --bs-secondary-bg:    #1c2029;
    --bs-tertiary-color:  #8b93a4;
    --bs-tertiary-bg:     #141821;
    --bs-heading-color:   #eef1f7;
    --bs-card-bg:         #141821;
    --bs-card-cap-bg:     #191e29;
    --bs-modal-bg:        #16191f;
    --bs-modal-header-border-color: #262c38;
    --bs-modal-footer-border-color: #262c38;
    --bs-dropdown-bg:     #191e29;
    --bs-dropdown-link-color: #c2cad8;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .06);
    --bs-list-group-bg:   #141821;
    --bs-list-group-color:#c2cad8;
    --bs-border-color:    #262c38;
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --bs-light:           #1c2029;
    --bs-light-rgb:       28, 32, 41;
    --bs-dark:            #eef1f7;
    --bs-secondary:       #333a48;
}

/* ── グローバル地色(frontend の全ページ。editor は別オリジンで無影響) ── */
html, body {
    background-color: var(--mv-bg);
    color: var(--mv-text);
    font-family: var(--mv-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }
/* body class を問わずダーク地(billing-default / error-body / auth-shell 等の取りこぼし対策) */
body.billing-default, body.error-body, body.auth-shell {
    background-color: var(--mv-bg);
    color: var(--mv-text);
}
/* 白背景のユーティリティ(bg-white/bg-light)をダークへ */
.bg-white, .bg-light { background-color: var(--mv-surface-2) !important; color: var(--mv-text); }
/* パンくず(暗字×黒地=不可視 を防ぐ・全ページ共通で明色に) */
.breadcrumb, .breadcrumb a, .bc-item, .bc-item.bc-link { color: var(--mv-muted); }
.breadcrumb a:hover, .bc-item.bc-link:hover { color: var(--mv-text); }
.breadcrumb .active, .bc-item.is-current { color: var(--mv-text); font-weight: 600; }

::selection { background: rgba(78, 168, 255, .30); color: #fff; }

/* スクロールバー(WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--mv-bg-2); }
::-webkit-scrollbar-thumb { background: #2a313e; border-radius: 6px; border: 2px solid var(--mv-bg-2); }
::-webkit-scrollbar-thumb:hover { background: #38414f; }

/* ══════════════════════════════════════════════════════════════════════════
   1. 認証(ログイン / サインアップ)= 第一印象の主役
   ══════════════════════════════════════════════════════════════════════════ */
body.auth-body {
    display: flex;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(1150px 720px at 8% -12%, rgba(78, 168, 255, .16), transparent 58%),
        radial-gradient(950px 640px at 104% 112%, rgba(138, 107, 255, .15), transparent 55%),
        var(--mv-bg);
    overflow-x: hidden;
}

/* ---- 左:ブランド歓迎パネル ---- */
.auth-hero {
    position: relative;
    flex: 1 1 56%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    padding: 64px min(7vw, 88px);
    overflow: hidden;
    isolation: isolate;
    background: transparent;   /* app.css の青グラデを打ち消し body のシネマ地を透かす */
    color: var(--mv-text);
}
/* 微細なグリッド(放送機材の格子)を地に敷く */
.auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(80% 80% at 30% 40%, #000 40%, transparent 100%);
            mask-image: radial-gradient(80% 80% at 30% 40%, #000 40%, transparent 100%);
}
/* app.css の白い円(::after)を意図的なアクセント発光に転用(平面な白円を消す) */
.auth-hero::after {
    right: -180px !important;
    bottom: -200px !important;
    width: 560px !important;
    height: 560px !important;
    background: radial-gradient(circle, rgba(124, 104, 255, .18), transparent 68%) !important;
    filter: blur(20px);
}
.auth-hero-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mv-font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .04em;
    color: #fff;
}
.auth-hero-brand svg {
    width: 28px; height: 28px;
    padding: 5px;
    border-radius: 8px;
    color: #fff;
    background: var(--mv-accent-grad);
    box-shadow: 0 8px 24px -6px rgba(78, 168, 255, .6);
}
.auth-hero h1 {
    font-family: var(--mv-font-display);
    font-weight: 600;
    font-size: clamp(25px, 2.7vw, 37px);
    line-height: 1.24;
    letter-spacing: -.015em;
    color: var(--mv-text);
    margin: 0;
}
.auth-hero h1 .mv-grad {
    background: linear-gradient(100deg, #6fb6ff, #a58bff 70%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-hero > p {
    max-width: 42ch;
    font-size: 14px;
    line-height: 1.8;
    color: var(--mv-muted);
    margin: 0;
}
.auth-hero-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 2px;
}
.auth-hero-points span {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13.5px;
    color: var(--mv-text-2);
}
.auth-hero-points svg {
    flex: none;
    width: 20px; height: 20px;
    padding: 3px;
    border-radius: 7px;
    color: var(--mv-accent-cyan);
    background: rgba(69, 230, 213, .12);
    box-shadow: inset 0 0 0 1px rgba(69, 230, 213, .25);
}

/* 署名モチーフ:声が動きに変わるスペクトル(イコライザ)。login.ejs が .mv-eq を挿入 */
.mv-eq {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 46px;
    margin-top: 18px;
    opacity: .9;
}
.mv-eq i {
    display: block;
    width: 4px;
    height: 10%;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--mv-accent-cyan), var(--mv-accent) 60%, rgba(124, 104, 255, .55));
    box-shadow: 0 0 10px rgba(78, 168, 255, .5);
    animation: mv-eq-bounce 1.25s ease-in-out infinite;
    animation-delay: calc(var(--d, 0) * -0.083s);
}
@keyframes mv-eq-bounce {
    0%, 100% { height: 14%; opacity: .55; }
    50%      { height: 92%; opacity: 1; }
}

/* ---- 右:フォーム面(グラス) ---- */
.auth-main {
    flex: 1 1 44%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 5vw;
}
.auth-card {
    position: relative;
    width: 100%;
    max-width: 428px;
    padding: 40px 38px 34px;
    border-radius: var(--mv-radius-lg);
    background:
        linear-gradient(180deg, rgba(31, 37, 48, .74), rgba(15, 18, 24, .78));
    border: 1px solid var(--mv-border-soft);
    box-shadow: var(--mv-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
            backdrop-filter: blur(20px) saturate(1.25);
    overflow: hidden;
}
/* カード上端のアクセント・ヘアライン発光 */
.auth-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(78, 168, 255, .8), rgba(138, 107, 255, .6), transparent);
}
.auth-brand-sm {
    display: none;   /* デスクトップは hero にブランドがあるため隠す(モバイルで表示) */
    align-items: center;
    gap: 9px;
    font-family: var(--mv-font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .04em;
    color: #fff;
    margin-bottom: 22px;
}
.auth-brand-sm svg {
    width: 26px; height: 26px; padding: 4px;
    border-radius: 8px; color: #fff;
    background: var(--mv-accent-grad);
}
.auth-title {
    font-family: var(--mv-font-display);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--mv-text);
    margin: 0 0 5px;
}
.auth-sub {
    font-size: 13px;
    color: var(--mv-muted);
    margin: 0 0 24px;
}
.auth-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--mv-text-2);
    margin: 0 0 8px;
}
.auth-field {
    position: relative;
    margin-bottom: 18px;
}
.auth-ico {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--mv-faint);
    pointer-events: none;
    transition: color .18s ease;
}
.auth-field .form-control {
    height: 46px;
    padding: 0 16px 0 42px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius);
    color: var(--mv-text);
    font-size: 14px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.auth-field .form-control::placeholder { color: var(--mv-faint); }
.auth-field .form-control:hover { border-color: var(--mv-border-2); }
.auth-field .form-control:focus {
    outline: none;
    background: rgba(255, 255, 255, .06);
    border-color: var(--mv-accent);
    box-shadow: var(--mv-ring);
}
.auth-field:focus-within .auth-ico { color: var(--mv-accent); }
.auth-field--icoright .form-control { padding-right: 46px; }
.auth-eye {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    padding: 8px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--mv-faint);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.auth-eye:hover { color: var(--mv-text-2); background: rgba(255, 255, 255, .06); }
.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -6px 0 22px;
}
.auth-link {
    color: var(--mv-accent);
    text-decoration: none;
    font-size: 13px;
    transition: color .15s;
}
.auth-link:hover { color: #7cc0ff; text-decoration: underline; }
.auth-error {
    background: rgba(255, 107, 107, .1);
    border: 1px solid rgba(255, 107, 107, .3);
    color: #ff9d9d;
    border-radius: var(--mv-radius-sm);
    padding: 10px 13px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* 送信ボタン(.btn-primary)= アクセント・グラデ + 発光 */
.auth-submit { margin-top: 4px; }
.auth-submit .btn-primary,
.auth-submit input[type="submit"] {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: var(--mv-radius);
    background: var(--mv-accent-grad);
    color: #fff;
    font-family: var(--mv-font-body);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .01em;
    box-shadow: 0 12px 30px -10px rgba(78, 168, 255, .55);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.auth-submit .btn-primary:hover,
.auth-submit input[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 16px 38px -10px rgba(124, 104, 255, .6);
}
.auth-submit .btn-primary:active,
.auth-submit input[type="submit"]:active { transform: translateY(0); filter: brightness(.98); }

/* 区切り「または」 */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    color: var(--mv-faint);
    font-size: 12.5px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mv-border-2), transparent);
}

/* ★s86(tk 指示 2026-09-04): ログイン方法のタブ(メールアドレス／Google アカウント)= 同時表示をやめて切り替える */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--mv-border);
}
.auth-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 4px 11px;
    color: var(--mv-text-2, #a8a8b4);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: color .16s, border-color .16s;
}
.auth-tab:hover { color: var(--mv-text); }
.auth-tab.active {
    color: var(--mv-text);
    border-bottom-color: var(--mv-accent);
    font-weight: 600;
}
.auth-pane[hidden] { display: none !important; }
/* ★s172(tk 2026-11-09): 前回の方法の案内(タブ帯の直下・薄く・左寄せ= タブの文言と同じ左端) */
.auth-method-hint {
    margin: -8px 0 14px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--mv-text-2, #a8a8b4);
    text-align: left;
}
.auth-method-hint[hidden] { display: none !important; }
.mv-signup-methods .auth-method-hint { margin: 0 0 12px; }
.mv-signup-methods--google-first .auth-sns { margin-bottom: 4px; }
.auth-pane-lead {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--mv-text-2, #a8a8b4);
    text-align: left;
}

/* ソーシャル(Google 等) */
.auth-sns .btn {
    width: 100%;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius);
    color: var(--mv-text);
    font-weight: 500;
    font-size: 14px;
    transition: background .16s, border-color .16s, transform .12s;
}
.auth-sns .btn:hover {
    background: rgba(255, 255, 255, .09);
    border-color: var(--mv-border-2);
    transform: translateY(-1px);
    color: var(--mv-text);
}
/* ★s86(tk 指示 2026-09-04「Googleアカウントをホバーすると黒くなるのなおせ」): vendored scss 由来の
   `.auth-sns .btn-social:hover{background:var(--bg) !important}` がダークテーマでは黒背景になる。
   Google ボタンは白地のまま(Google のブランドガイドどおり)= 同じ詳細度+!important で後勝ちに上書き。 */
.auth-sns .btn-social,
.auth-sns .btn-social:hover,
.auth-sns .btn-social:focus,
.auth-sns .btn-social:active {
    background: #ffffff !important;
    color: #1f1f1f !important;
    border-color: rgba(255, 255, 255, .35) !important;
}
.auth-sns .btn-social:hover {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12) !important;
    transform: translateY(-1px);
    text-decoration: none !important;   /* a 要素の hover 下線を出さない */
}
.auth-sns .btn-google > span { color: #1f1f1f !important; }
.auth-foot {
    text-align: center;
    margin: 22px 0 0;
    font-size: 14px;
}
.auth-foot a { color: var(--mv-accent); text-decoration: none; font-weight: 500; }
.auth-foot a:hover { text-decoration: underline; }

/* アラート(認証面) */
body.auth-body .alert {
    border-radius: var(--mv-radius-sm);
    border: 1px solid var(--mv-border);
    background: var(--mv-elev);
    color: var(--mv-text-2);
    font-size: 13px;
}
body.auth-body .alert-success { background: rgba(52, 211, 166, .1); border-color: rgba(52, 211, 166, .3); color: #7ee7c8; }
body.auth-body .alert-warning { background: rgba(255, 206, 92, .1); border-color: rgba(255, 206, 92, .3); color: #ffdd8f; }
body.auth-body .alert-danger  { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .3); color: #ff9d9d; }
body.auth-body .alert-link { color: var(--mv-accent); }

/* 認証/汎用フッタ(include-html-footer の .footer) */
.footer {
    padding: 18px 24px;
    background: transparent;
    border-top: 1px solid var(--mv-border);
    color: var(--mv-faint);
    font-size: 12.5px;
}
.footer .text-muted, .footer a.text-muted { color: var(--mv-muted) !important; text-decoration: none; }
.footer a.text-muted:hover { color: var(--mv-text-2) !important; }

/* モバイル:hero を畳んでカード内ブランドを出す */
@media (max-width: 900px) {
    body.auth-body { flex-direction: column; }
    .auth-hero {
        flex: none;
        padding: 40px 26px 8px;
        gap: 16px;
    }
    .auth-hero h1 { font-size: clamp(28px, 8vw, 40px); }
    .auth-hero > p, .auth-hero-points, .mv-eq { display: none; }
    .auth-main { padding: 20px 20px 44px; }
}
@media (max-width: 560px) {
    .auth-hero { display: none; }
    .auth-brand-sm { display: inline-flex; }
    .auth-card { padding: 32px 24px 28px; border-radius: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. アプリシェル(ダッシュボード / アカウント / 課金ページ 共通)
   ══════════════════════════════════════════════════════════════════════════ */
body.dashboard-shell {
    display: flex;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(78, 168, 255, .07), transparent 60%),
        var(--mv-bg);
    color: var(--mv-text);
}

/* 左アイコンレール */
.app-rail {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    width: 76px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 0;
    background: linear-gradient(180deg, var(--mv-bg-2), var(--mv-bg));
    border-right: 1px solid var(--mv-border);
    z-index: 20;
}
.rail-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    color: #fff;
    background: var(--mv-accent-grad);
    box-shadow: 0 10px 26px -8px rgba(78, 168, 255, .6);
    transition: transform .15s;
}
.rail-brand:hover { transform: translateY(-2px); }
.rail-nav, .rail-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.rail-bottom { margin-top: auto; }
.rail-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 60px;
    padding: 9px 0;
    border: 0;
    background: transparent;
    border-radius: 12px;
    color: var(--mv-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.rail-item i { font-size: 21px; line-height: 1; }
.rail-label { font-size: 10px; letter-spacing: .01em; }
.rail-item:hover { color: var(--mv-text); background: rgba(255, 255, 255, .045); }
.rail-item.is-active { color: #fff; }
.rail-item.is-active::before {
    content: "";
    position: absolute;
    left: -0px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 26px;
    border-radius: 3px;
    background: var(--mv-accent-grad);
    box-shadow: 0 0 12px rgba(78, 168, 255, .7);
}
.rail-item.is-active i { color: var(--mv-accent); }
/* 「新規作成」だけは目立たせる(主行動) */
.rail-item.rail-cta {
    color: #fff;
    background: rgba(78, 168, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(78, 168, 255, .3);
}
.rail-item.rail-cta i { color: var(--mv-accent); }
.rail-item.rail-cta:hover { background: rgba(78, 168, 255, .2); }

.rail-avatar-btn {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.app-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a3444, #3a4a5f);
    color: #fff;
    font-weight: 600;
    font-family: var(--mv-font-display);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.app-avatar.lg { width: 48px; height: 48px; font-size: 20px; }

/* アバターメニュー(ポップ) */
.app-menu {
    position: absolute;
    left: 74px; bottom: 16px;
    width: 268px;
    padding: 8px;
    background: var(--mv-elev);
    border: 1px solid var(--mv-border);
    border-radius: 16px;
    box-shadow: var(--mv-shadow);
    z-index: 40;
}
.app-menu[hidden] { display: none; }
.app-menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.app-menu-name { font-weight: 600; color: var(--mv-text); font-size: 14px; }
.app-menu-mail { font-size: 12px; color: var(--mv-muted); }
.app-menu-sep { height: 1px; background: var(--mv-border); margin: 6px 4px; }
.app-menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--mv-text-2);
    text-decoration: none;
    font-size: 14px;
    transition: background .14s, color .14s;
}
.app-menu-item i { font-size: 18px; color: var(--mv-muted); }
.app-menu-item:hover { background: rgba(255, 255, 255, .05); color: var(--mv-text); }
.app-menu-item.danger { color: #ff9d9d; }
.app-menu-item.danger i { color: #ff8080; }
.app-menu-item.danger:hover { background: rgba(255, 107, 107, .12); }

/* メイン領域 */
.app-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.app-header {
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 30px;
    border-bottom: 1px solid var(--mv-border);
    background: rgba(11, 13, 18, .6);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 10;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 14px;
}
.bc-item { color: var(--mv-muted); text-decoration: none; }
.bc-item.bc-link:hover { color: var(--mv-text); }
.bc-item.is-current { color: var(--mv-text); font-weight: 600; }
.bc-sep { color: var(--mv-faint); display: inline-flex; }
.bc-sep i { font-size: 15px; }

.app-content {
    flex: 1 1 auto;
    padding: 34px min(6vw, 54px);
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}

/* フッタ */
.app-footer, .include-app-footer, footer.app-footer {
    padding: 18px 30px;
    border-top: 1px solid var(--mv-border);
    color: var(--mv-faint);
    font-size: 12.5px;
    text-align: center;
}
.app-footer a { color: var(--mv-muted); text-decoration: none; }
.app-footer a:hover { color: var(--mv-text-2); }

/* ══════════════════════════════════════════════════════════════════════════
   3. 汎用コンポーネント(Bootstrap の上書き・課金/アカウント面で使用)
   ══════════════════════════════════════════════════════════════════════════ */
.dashboard-shell .card,
.app-content .card {
    background: var(--mv-surface-2);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius);
    color: var(--mv-text);
    box-shadow: var(--mv-shadow-sm);
}
.dashboard-shell .card-header,
.app-content .card-header {
    background: var(--mv-elev);
    border-bottom: 1px solid var(--mv-border);
    color: var(--mv-text);
}
.dashboard-shell .text-muted,
.app-content .text-muted,
.dashboard-shell .form-text { color: var(--mv-muted) !important; }

.page-title {
    font-family: var(--mv-font-display);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--mv-text);
}

/* ボタン(汎用) */
.dashboard-shell .btn-primary,
.app-content .btn-primary {
    background: var(--mv-accent-grad);
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 26px -10px rgba(78, 168, 255, .5);
    transition: transform .14s, filter .14s, box-shadow .14s;
}
.dashboard-shell .btn-primary:hover,
.app-content .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.07); color: #fff; }
.dashboard-shell .btn-outline-secondary,
.app-content .btn-outline-secondary,
body.error-body .btn-outline-secondary {   /* ★s42: error-body(ログイン中警告等)は白ボタン×白文字で不可視だった */
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--mv-border-2);
    color: var(--mv-text-2);
}
.dashboard-shell .btn-outline-secondary:hover,
.app-content .btn-outline-secondary:hover,
body.error-body .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--mv-text);
    border-color: var(--mv-border-2);
}
.dashboard-shell .btn-outline-primary,
.app-content .btn-outline-primary {
    background: transparent;
    border: 1px solid rgba(78, 168, 255, .5);
    color: var(--mv-accent);
}
.dashboard-shell .btn-outline-primary:hover,
.app-content .btn-outline-primary:hover { background: var(--mv-accent-soft); color: #7cc0ff; }
.dashboard-shell .btn-danger,
.app-content .btn-danger { background: #c0433f; border: 0; }

/* フォーム(汎用) */
.dashboard-shell .form-control,
.dashboard-shell .form-select,
.app-content .form-control,
.app-content .form-select {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--mv-border);
    color: var(--mv-text);
    border-radius: var(--mv-radius-sm);
}
.dashboard-shell .form-control:focus,
.app-content .form-control:focus,
.dashboard-shell .form-select:focus,
.app-content .form-select:focus {
    background: rgba(255, 255, 255, .06);
    border-color: var(--mv-accent);
    box-shadow: var(--mv-ring);
    color: var(--mv-text);
}

/* アラート(汎用) */
.dashboard-shell .alert,
.app-content .alert {
    border-radius: var(--mv-radius);
    border: 1px solid var(--mv-border);
    background: var(--mv-elev);
    color: var(--mv-text-2);
}
.dashboard-shell .alert-info,
.app-content .alert-info { background: rgba(78, 168, 255, .1); border-color: rgba(78, 168, 255, .28); color: #a9d3ff; }
.dashboard-shell .alert-success,
.app-content .alert-success { background: rgba(52, 211, 166, .1); border-color: rgba(52, 211, 166, .3); color: #7ee7c8; }
.dashboard-shell .alert-warning,
.app-content .alert-warning { background: rgba(255, 206, 92, .1); border-color: rgba(255, 206, 92, .3); color: #ffdd8f; }
.dashboard-shell .alert-danger,
.app-content .alert-danger { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .3); color: #ff9d9d; }

/* リスト / テーブル */
.dashboard-shell .list-group-item,
.app-content .list-group-item {
    background: var(--mv-surface-2);
    border-color: var(--mv-border);
    color: var(--mv-text);
}
.dashboard-shell .table,
.app-content .table { color: var(--mv-text-2); }
.dashboard-shell .table > :not(caption) > * > *,
.app-content .table > :not(caption) > * > * {
    background: transparent;
    border-color: var(--mv-border);
    color: var(--mv-text-2);
}

/* 結果ページの共通ラッパ(カード登録完了 等) */
.result-wrap {
    max-width: 620px;
    margin: 8px auto;
    padding: 34px 32px;
    background: var(--mv-surface-2);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-shadow-sm);
}
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.result-actions .btn { min-width: 160px; }

/* ══════════════════════════════════════════════════════════════════════════
   4. プランカード(契約・プラン / プラン一覧と変更)
   ══════════════════════════════════════════════════════════════════════════ */
.mv-price {
    font-family: var(--mv-font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--mv-text);
}

/* ── 契約・プラン / アカウント面(.account-page / .acc-*)= 白テーマ語彙をダークへ ── */
.account-title {
    font-family: var(--mv-font-display);
    color: var(--mv-text);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -.01em;
}
.acc-card {
    background: var(--mv-surface-2);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius);
    box-shadow: var(--mv-shadow-sm);
    color: var(--mv-text);
}
.acc-card-title {
    font-family: var(--mv-font-display);
    color: var(--mv-text);
    font-weight: 600;
}
.plan-badge {
    background: var(--mv-accent-soft);
    color: #8fc4ff;
    box-shadow: inset 0 0 0 1px rgba(78, 168, 255, .3);
    font-family: var(--mv-font-display);
}
.acc-row { border-top-color: var(--mv-border); }
.acc-row dt { color: var(--mv-muted); }
.acc-row dd { color: var(--mv-text); }
.acc-note { color: var(--mv-muted); }
.acc-warn-text { color: var(--mv-warning); }
.acc-hint { color: var(--mv-muted); }
.acc-hint a { color: var(--mv-accent); }

/* チップ(状態) */
.acc-chip.ok   { background: rgba(52, 211, 166, .14); color: #6fe3c1; }
.acc-chip.warn { background: rgba(255, 206, 92, .14); color: #ffdd8f; }
.acc-chip.info { background: var(--mv-accent-soft); color: #8fc4ff; }

/* バナー(各種) */
.acc-banner { border-radius: var(--mv-radius); border: 1px solid var(--mv-border); }
.acc-banner-title { color: var(--mv-text); font-weight: 600; }
.acc-banner p { color: var(--mv-text-2); }
.acc-banner.info { background: rgba(78, 168, 255, .1); border-color: rgba(78, 168, 255, .28); color: var(--mv-text-2); }
.acc-banner.info .ti { color: var(--mv-accent); }
.acc-banner.ok { background: rgba(52, 211, 166, .1); border-color: rgba(52, 211, 166, .28); color: var(--mv-text-2); }
.acc-banner.ok .ti { color: var(--mv-success); }
.acc-banner.warn { background: rgba(255, 206, 92, .1); border-color: rgba(255, 206, 92, .3); color: var(--mv-text-2); }
.acc-banner.warn .ti { color: var(--mv-warning); }
.acc-banner.muted-banner { background: var(--mv-elev); border-color: var(--mv-border); color: var(--mv-muted); }
.acc-banner.muted-banner .ti { color: var(--mv-faint); }

/* アップセル(上位プラン誘導) */
.acc-upsell {
    background: linear-gradient(135deg, rgba(78, 168, 255, .12), rgba(138, 107, 255, .1));
    border: 1px solid rgba(78, 168, 255, .28);
    border-radius: var(--mv-radius-lg);
    color: var(--mv-text);
}
.acc-upsell-title { font-family: var(--mv-font-display); color: var(--mv-text); font-weight: 600; }
.acc-upsell-sub { color: var(--mv-text-2); }

/* 退会(Danger Zone) */
.acc-card.acc-danger { border-color: rgba(255, 107, 107, .3); }
.acc-danger .acc-card-title { color: #ff9d9d; }
.btn-outline-danger {
    background: transparent;
    border: 1px solid rgba(255, 107, 107, .5);
    color: #ff9d9d;
}
.btn-outline-danger:hover { background: rgba(255, 107, 107, .12); color: #ffb3b3; }
.btn-outline-warning {
    background: transparent;
    border: 1px solid rgba(255, 206, 92, .5);
    color: #ffdd8f;
}
.btn-outline-warning:hover { background: rgba(255, 206, 92, .12); color: #ffe6a8; }

/* 「このプランに含まれる内容」機能リスト(.acc-feats / .plan-feats) */
.acc-feats li { color: var(--mv-text-2); }
.acc-feats li .ti { color: var(--mv-accent); }
.acc-feats li.off, .acc-feats li.off .ti { color: var(--mv-faint); }
.plan-feats li { color: var(--mv-text-2); }
.plan-feats .ti { color: var(--mv-accent); }
.plan-feats li.is-off, .plan-feats li.is-off .ti { color: var(--mv-faint); }

.acc-reserve {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    color: var(--mv-text-2);
}

/* ── プランカード(/subscriptions/change)= 白テーマの .plan-card 群をダークへ ── */
.plan-grid { gap: 20px; }
.plan-card {
    background: var(--mv-surface-2);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-shadow-sm);
    color: var(--mv-text);
}
.plan-card.is-recommended {
    border-color: rgba(78, 168, 255, .45);
    box-shadow: 0 0 0 1px rgba(78, 168, 255, .32), 0 22px 54px -20px rgba(78, 168, 255, .32);
    background: linear-gradient(180deg, rgba(78, 168, 255, .06), var(--mv-surface-2) 62%);
}
.plan-card.is-current {
    border-color: rgba(78, 168, 255, .5);
    box-shadow: 0 0 0 1px rgba(78, 168, 255, .4);
    background: linear-gradient(180deg, rgba(78, 168, 255, .09), var(--mv-surface-2) 64%);
}
.plan-card .plan-ribbon {
    background: var(--mv-accent-grad);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(78, 168, 255, .6);
}
.plan-card .plan-ribbon.current { background: #333a48; box-shadow: none; }
.plan-card .plan-name {
    color: var(--mv-text);
    font-family: var(--mv-font-display);
    font-weight: 600;
    font-size: 1rem;
}
.plan-card .plan-tagline { color: var(--mv-muted); }
.plan-card .plan-price {
    color: var(--mv-text);
    font-family: var(--mv-font-display);
    font-weight: 600;
    font-size: 1.6rem;
}
.plan-card .plan-price .unit, .plan-card .plan-permonth { color: var(--mv-muted); }
.plan-card .plan-price .free { color: var(--mv-text); font-size: 1.6rem; }
.plan-card .plan-feats li { color: var(--mv-text-2); }
.plan-card .plan-feats .ti { color: var(--mv-accent); }
.plan-card .plan-feats li.is-off, .plan-card .plan-feats li.is-off .ti { color: var(--mv-faint); }
.plan-card .plan-trial { background: rgba(52, 211, 166, .12); color: #7ee7c8; }
.plan-card .plan-note { color: var(--mv-faint); }
.plan-card .plan-cta .btn { width: 100%; }
/* enterprise カードの「お問い合わせ」CTA(#4) */
.plan-card .plan-cta .btn-enterprise {
    background: transparent;
    border: 1px solid rgba(78, 168, 255, .5);
    color: var(--mv-accent);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; border-radius: var(--mv-radius);
}
.plan-card .plan-cta .btn-enterprise:hover { background: var(--mv-accent-soft); color: #7cc0ff; }

/* 月/年トグル */
.plan-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--mv-surface-2);
    border: 1px solid var(--mv-border);
}
.plan-toggle .btn { border-radius: 999px !important; border: 0; padding: 8px 20px; font-size: 13.5px; box-shadow: none; }
.plan-toggle .btn-primary { background: var(--mv-accent-grad); color: #fff; }
.plan-toggle .btn-outline-primary { background: transparent; color: var(--mv-muted); }
.plan-toggle .btn-outline-primary:hover { background: rgba(255, 255, 255, .05); color: var(--mv-text); }

/* ══════════════════════════════════════════════════════════════════════════
   5. アクセシビリティ / モーション
   ══════════════════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .mv-eq i { animation: none; height: 42%; }
    * { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. ★s59 tk FB(2026-07-29): プラン/クレジットページの幅拡大+エンタープライズ別枠
   ══════════════════════════════════════════════════════════════════════════ */
/* 幅拡大: プラン一覧= 5 カード横並び(enterprise は別枠バナー化でグリッドから外れた) */
.account-page.plan-change-page { max-width: 1560px; }
.plan-change-page .plan-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1400px) { .plan-change-page .plan-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px)  { .plan-change-page .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .plan-change-page .plan-grid { grid-template-columns: 1fr; } }
/* 幅拡大: クレジットページ(バラ売り8種= pack-grid は auto-fit で自動段組み) */
.account-page.credits-page { max-width: 1160px; }

/* エンタープライズ別枠(横長バナー・商談ベース)。整列は grid 構造で保証(③-30) */
.enterprise-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    margin-top: 28px;
    padding: 24px 28px;
    border-radius: var(--mv-radius-lg);
    background: linear-gradient(135deg, rgba(155, 108, 255, .10), var(--mv-surface-2) 55%);
    border: 1px solid rgba(155, 108, 255, .35);
    box-shadow: var(--mv-shadow-sm);
    color: var(--mv-text);
}
.enterprise-banner.is-current { border-color: rgba(78, 168, 255, .5); box-shadow: 0 0 0 1px rgba(78, 168, 255, .4); }
.enterprise-banner .eb-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(155, 108, 255, .16);
    color: #b48cff;
}
.enterprise-banner .eb-icon .ti { font-size: 30px; }
.enterprise-banner .eb-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.enterprise-banner .eb-current-chip {
    display: inline-flex; align-items: center; margin-left: 10px; padding: 2px 10px;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: rgba(78, 168, 255, .16); color: var(--mv-accent);
    vertical-align: 2px;
}
.enterprise-banner .eb-tagline { margin-top: 3px; font-size: .82rem; color: var(--mv-muted); }
.enterprise-banner .eb-feats {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 22px;
}
.enterprise-banner .eb-feats li {
    display: flex; align-items: center; gap: 7px;
    font-size: .84rem; color: var(--mv-text-2, var(--mv-muted));
}
.enterprise-banner .eb-feats .ti { color: #b48cff; font-size: 15px; flex-shrink: 0; }
.enterprise-banner .eb-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.enterprise-banner .eb-price { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.enterprise-banner .eb-price-unit { font-size: .82rem; font-weight: 600; color: var(--mv-muted); letter-spacing: 0; }
.enterprise-banner .btn-enterprise {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    background: transparent; color: #b48cff;
    border: 1px solid rgba(155, 108, 255, .5); border-radius: var(--mv-radius-md, 10px);
    font-weight: 700; padding: 9px 18px;
}
.enterprise-banner .btn-enterprise:hover { background: rgba(155, 108, 255, .12); color: #c9a8ff; text-decoration: none; }
@media (max-width: 992px) {
    .enterprise-banner { grid-template-columns: auto 1fr; }
    .enterprise-banner .eb-cta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ★s59 tk FB: ヘッダー右上の相互ジャンプボタン(クレジット⇔プラン)。右寄せは構造(margin-left:auto) */
.app-header .app-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app-header .header-jump-btn {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    color: var(--mv-text-2, var(--mv-muted));
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--mv-border);
    font-weight: 600;
}
.app-header .header-jump-btn:hover { color: var(--mv-text); border-color: var(--mv-accent); background: rgba(78, 168, 255, .08); text-decoration: none; }
.app-header .header-jump-btn .ti { font-size: 15px; }

/* ★s59 tk FB: ダークテーマ宣言= ネイティブコントロール(select ドロップダウン/スクロールバー等)も
   ダークで描画させる(白地ドロップダウン対策の根本) */
:root { color-scheme: dark; }

/* ════════════════════════════════════════════════════════════════════════
   1b. 登録まわり共通シェルの部品(★s115 tk 2026-09-25「Bestllam に届くリッチ体験」)
   include-auth-shell-top/bottom.ejs のカード内で使う。ログイン画面と同じトークンで組む。
   ════════════════════════════════════════════════════════════════════════ */
.auth-card--wide { max-width: 560px; }
.auth-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--mv-accent-cyan);
    margin: 0 0 10px;
}
.auth-eyebrow svg { width: 16px; height: 16px; }
.auth-lead { font-size: 14px; line-height: 1.8; color: var(--mv-text-2); margin: 0 0 18px; }
.auth-lead strong { color: var(--mv-text); }
.auth-notice {
    border-radius: var(--mv-radius-sm);
    border: 1px solid var(--mv-border);
    background: var(--mv-elev);
    padding: 12px 14px;
    font-size: 13px; line-height: 1.7;
    color: var(--mv-text-2);
    margin: 0 0 18px;
}
.auth-notice.info    { border-color: rgba(78, 168, 255, .35);  background: rgba(78, 168, 255, .08);  color: #bfe0ff; }
.auth-notice.success { border-color: rgba(52, 211, 166, .35);  background: rgba(52, 211, 166, .08);  color: #9fefd6; }
.auth-notice.warning { border-color: rgba(255, 206, 92, .35);  background: rgba(255, 206, 92, .08);  color: #ffdd8f; }
.auth-notice strong { color: inherit; }
/* 用意できたものの一覧(会社名・役割・試用 …)= 同一 grid で整列 */
.auth-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px 18px;
    padding: 16px 18px;
    border-radius: var(--mv-radius-sm);
    background: rgba(78, 168, 255, .06);
    border: 1px solid rgba(78, 168, 255, .25);
    margin: 0 0 20px;
}
.auth-summary div { min-width: 0; }
.auth-summary dt { font-size: 11.5px; font-weight: 500; color: var(--mv-muted); margin: 0 0 4px; }
.auth-summary dd { font-size: 14.5px; font-weight: 600; color: var(--mv-text); margin: 0; overflow-wrap: anywhere; }
/* 縦の 3 ステップ(次にやること) */
.auth-steps { counter-reset: mvstep; list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 11px; }
.auth-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.65; color: var(--mv-text-2); }
.auth-steps li::before {
    counter-increment: mvstep; content: counter(mvstep);
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: #fff;
    background: var(--mv-accent-grad);
    box-shadow: 0 6px 16px -6px rgba(78, 168, 255, .7);
}
.auth-steps li > div { flex: 1 1 auto; min-width: 0; }
.auth-steps li strong { color: var(--mv-text); font-size: 14px; }
.auth-steps li.done::before { content: "✓"; background: linear-gradient(122deg, #34d3a6, #45e6d5); }
/* 横の進捗(1 › 2 › 3)= 招待コード確認・招待制ゲート */
.auth-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; list-style: none; padding: 0; margin: 0 0 18px; font-size: 12.5px; color: var(--mv-muted); }
.auth-progress li { display: inline-flex; align-items: center; gap: 7px; }
.auth-progress li + li::before { content: "›"; color: var(--mv-faint); margin-right: 4px; }
.auth-progress .n {
    width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--mv-border-2);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}
.auth-progress li.cur { color: var(--mv-text); font-weight: 600; }
.auth-progress li.cur .n { border-color: var(--mv-accent); color: var(--mv-accent); box-shadow: 0 0 0 3px rgba(78, 168, 255, .16); }
.auth-progress li.done .n { border-color: rgba(52, 211, 166, .6); color: #7ee7c8; }
/* ボタン(主/副) */
.auth-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.auth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 18px;
    border-radius: 12px; border: 1px solid transparent;
    font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.auth-btn.primary { color: #fff; background: var(--mv-accent-grad); box-shadow: 0 10px 26px -10px rgba(78, 168, 255, .75); }
.auth-btn.primary:hover, .auth-btn.primary:focus { color: #fff; transform: translateY(-1px); filter: brightness(1.06); text-decoration: none; }
.auth-btn.secondary { color: var(--mv-text); background: var(--mv-elev); border-color: var(--mv-border-2); }
.auth-btn.secondary:hover, .auth-btn.secondary:focus { color: #fff; background: var(--mv-surface-2); text-decoration: none; }
.auth-btn svg { width: 18px; height: 18px; }
.auth-note { font-size: 12.5px; line-height: 1.7; color: var(--mv-muted); margin: 16px 0 0; }
.auth-note a { color: var(--mv-accent); }
/* 招待コード入力(等幅・大きめ) */
.auth-code-input .form-control {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .14em; font-size: 18px; text-transform: uppercase; text-align: center;
}
/* ---- ★s172(tk 2026-11-09「signup-gate がうつくしくない・右ペインもっと幅・招待コード入力の改行」): 招待制ゲート(/signup-gate) ----
   器は共通(include-auth-shell)のまま、body.auth-body--gate のときだけ 2 カラムを 50/50 にして右カードを広くする(他の登録ページは不変)。
   進捗(1›2›3)は 1 段に収め、各段の文言は途中で折らない。説明文と注記は行末の 1 文字落ち(「〜ていま/す。」)を避ける。 */
body.auth-body--gate .auth-hero { flex: 1 1 50%; }
body.auth-body--gate .auth-main { flex: 1 1 50%; padding: 40px 4vw; }
body.auth-body--gate .auth-card--wide { max-width: 600px; padding: 40px 44px 36px; }
body.auth-body--gate .auth-progress { gap: 6px 12px; margin: 0 0 20px; }
body.auth-body--gate .auth-progress li { white-space: nowrap; }
body.auth-body--gate .auth-lead,
body.auth-body--gate .auth-note { text-wrap: pretty; line-break: strict; }
body.auth-body--gate .auth-code-input .form-control { height: 52px; font-size: 20px; letter-spacing: .18em; }
body.auth-body--gate .auth-actions { flex-direction: row; gap: 12px; margin-top: 10px; }
body.auth-body--gate .auth-actions .auth-btn { flex: 1 1 0; white-space: nowrap; }
@media (max-width: 1100px) {
    /* 1024 幅= カードの中が 340px 前後: 進捗を詰めて 1 段に・ボタンは縦積み(横並びだと文言の長さで幅が揃わない) */
    body.auth-body--gate .auth-progress { font-size: 11.5px; gap: 6px 6px; }
    body.auth-body--gate .auth-progress li { gap: 5px; }
    body.auth-body--gate .auth-progress li + li::before { margin-right: 2px; }
    body.auth-body--gate .auth-progress .n { width: 18px; height: 18px; font-size: 10.5px; }
    body.auth-body--gate .auth-actions { flex-direction: column; gap: 10px; }
}
@media (max-width: 560px) {
    body.auth-body--gate .auth-card--wide { padding: 32px 24px 28px; }
    body.auth-body--gate .auth-actions { flex-direction: column; gap: 10px; }
}

/* 規約同意(agree-eula)の文 */
.auth-consent { font-size: 13px; line-height: 1.7; color: var(--mv-text-2); margin: 6px 0 14px; }
.auth-consent a { color: var(--mv-accent); }
/* ようこそページのヒーロー(数字強調) */
.auth-hero .mv-big { font-size: clamp(30px, 3.2vw, 44px); }

/* ---- ★s118(tk 2026-09-26「左の画面いらない・右の画面を中央に」): 左ヒーロー無しでカードを画面中央に置く(/welcome・/invitation) ---- */
body.auth-body--center { justify-content: center; align-items: stretch; }
body.auth-body--center .auth-main { flex: 0 1 auto; width: 100%; max-width: 720px; padding: 48px 24px; }
body.auth-body--center .auth-card--wide { max-width: 600px; }
body.auth-body--center .auth-brand-sm { display: inline-flex; }
@media (max-width: 900px) {
    body.auth-body--center { flex-direction: row; }
    body.auth-body--center .auth-main { padding: 24px 16px 44px; }
}

/* ---- ★s118(tk 2026-09-26「契約状況が貧弱」): 契約とお支払いの見出し・カードの格を上げる ---- */
.app-content .account-title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.app-content .account-page > .acc-card, .app-content .account-page > section.acc-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.app-content .acc-card-title { font-size: 16px; }
.app-content .plan-badge { font-size: 15px; padding: 6px 14px; border-radius: 999px; }
.app-content .acc-banner.info { background: linear-gradient(122deg, rgba(78, 168, 255, .16), rgba(124, 104, 255, .16)); border-color: rgba(140, 170, 255, .35); border-radius: 18px; }

/* ---- ★s118 (2): 契約とお支払いの「会社」カード ---- */
.app-content .account-page > .mvco-card { background: linear-gradient(135deg, rgba(78, 168, 255, .18), rgba(124, 104, 255, .16) 60%, rgba(255, 122, 217, .08)); border-color: rgba(140, 170, 255, .4); }
.mvco-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mvco-eyebrow { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9fb9dc; font-weight: 600; margin-bottom: 6px; }
.mvco-name { font-family: var(--mv-font-display); font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: #fff; margin-bottom: 10px; }
.mvco-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mvco-chip { font-size: 12.5px; font-weight: 600; color: #d8e6ff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 4px 12px; }
.mvco-chip.role { color: #c9b8ff; background: rgba(124, 104, 255, .18); border-color: rgba(124, 104, 255, .35); }
.mvco-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.mvco-stat { min-width: 96px; padding: 12px 14px; border-radius: 14px; background: rgba(10, 12, 20, .45); border: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 2px; }
.mvco-stat .n { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; }
.mvco-stat .n small { font-size: 12px; font-weight: 600; margin-left: 2px; color: #cfe3ff; }
.mvco-stat .l { font-size: 11.5px; color: #a9b4c6; }
.mvco-stat.trial { border-color: rgba(78, 168, 255, .4); }
.mvco-trial { margin: 14px 0 0; color: #c9d6ea; }
.mvco-actions { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   1c. 招待からの登録導線(★s169 fork I・tk 2026-11-06「Bestllam/wirecanal 級・MotionVox テイストで美麗に」)
   include-invite-context.ejs(段階+招待の内容のカード)・include-signup-form.ejs(入力欄の補助)。トークンは 1. と同じ。
   ═══════════════════════════════════════════════════════════════════════ */
.auth-progress--invite { margin: 0 0 20px; }
.auth-progress--invite li.done { color: var(--mv-text-2); }
.auth-progress--invite li.todo { opacity: .75; }
.auth-invite-card {
    border-radius: var(--mv-radius);
    border: 1px solid rgba(78, 168, 255, .32);
    background: linear-gradient(135deg, rgba(78, 168, 255, .12) 0%, rgba(124, 104, 255, .10) 100%);
    box-shadow: var(--mv-shadow-sm);
    padding: 16px 18px 14px;
    margin: 0 0 22px;
}
.auth-invite-card--gate { background: rgba(78, 168, 255, .06); }
.auth-invite-card__head { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; margin: 0 0 12px; }
.auth-invite-card__icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--mv-accent-grad);
    box-shadow: 0 10px 24px -10px rgba(78, 168, 255, .8);
}
.auth-invite-card__icon svg { width: 20px; height: 20px; }
.auth-invite-card__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-accent-cyan); margin: 0 0 2px; }
.auth-invite-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--mv-text); }
.auth-invite-card__title strong { color: #fff; }
.auth-invite-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px 16px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin: 0;
}
.auth-invite-card__grid div { min-width: 0; }
.auth-invite-card__grid dt { font-size: 11px; font-weight: 500; color: var(--mv-muted); margin: 0 0 3px; }
.auth-invite-card__grid dd { font-size: 13.5px; font-weight: 600; color: var(--mv-text); margin: 0; overflow-wrap: anywhere; }
.auth-invite-card__email { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; }
/* 招待で用意されている物(3 点) */
.auth-points { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.auth-points li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.6; color: var(--mv-text-2); }
.auth-points li::before {
    content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--mv-accent-grad) ;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 12px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.auth-lead--tight { margin-bottom: 10px; }
/* 登録フォームの補助(汎用/招待で共通) */
.auth-field--readonly .form-control { color: var(--mv-text-2); background: rgba(255, 255, 255, .03); cursor: default; }
.auth-help { font-size: 12.5px; line-height: 1.6; color: var(--mv-muted); margin: -6px 0 12px; }
.auth-row-between { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -6px 0 12px; }
.auth-row-between .auth-help { margin: 0; flex: 1 1 auto; }
.auth-row-between .auth-check { margin: 0; flex: none; white-space: nowrap; }
.auth-opt { font-size: 11.5px; font-weight: 500; color: var(--mv-muted); margin-left: 8px; }
.auth-check--tos { align-items: flex-start; margin: 4px 0 12px; }
.auth-error-list { margin: 4px 0 0; padding-left: 18px; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--mv-text-2); cursor: pointer; }
.auth-check input[type="checkbox"] { margin: 0; flex: none; width: 16px; height: 16px; accent-color: var(--mv-accent); }
.auth-check a { color: var(--mv-accent); }

/* ★s172 #561: 採用ロゴ(角丸カラーアイコン= 地は画像側なので箱のグラデは外す・横長マークは比率 1903:826 を保つ) */
.auth-hero-brand .mv-brand-icon { width: 28px; height: 28px; display: block; }   /* ★#561 追補: 透過アイコン= 地・影・角丸を付けない */
.auth-brand-sm .mv-brand-icon { width: 26px; height: 26px; display: block; }
.rail-brand { background: none; box-shadow: none; }
.rail-brand .mv-brand-icon { width: 44px; height: 44px; display: block; }
.app-brand .mv-brand-mark, .contact-head .brand .mv-brand-mark { height: 22px; width: auto; display: block; }
.app-brand .mv-brand-mark { height: 24px; }
.mv-logo.is-brand { background: none !important; box-shadow: none !important; }
.mv-logo.is-brand img { display: block; width: 28px; height: 28px; }

/* ★s172 #561 追補(LP 担当 2026-11-09・採用の文字ロゴ): Motion は前景色のまま・Vox だけ青→紫。font/字間/太さは親を継ぐ(段差・字間を作らない)。
   参考= motionvox.com/style/motionvox-wordmark-20261109.css(小型表示・強制配色時の扱いも同じ) */
.mv-wordmark, .mv-wordmark .mv-wordmark-vox { display: inline; font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; vertical-align: baseline; white-space: nowrap; }
.mv-wordmark .mv-wordmark-vox { color: #8d5cf8; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .mv-wordmark .mv-wordmark-vox { background: linear-gradient(115deg, #3d81ff, #c747f1); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
@media (forced-colors: active) { .mv-wordmark .mv-wordmark-vox { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }

/* ═══════════════════════════════════════════════════════════════════════
   1d. 登録オンボーディングの 2 面カード(★s172 fork・tk 2026-11-09「チープ。wirecanal の登録みたいにリッチに」「ステップでわかりやすく」
       「画面をすごく縦スクロールさせる登録 UI はがっかり体験」)
   include-onboarding-shell-top/bottom.ejs(.onb-wrap > .onb-bar / .onb-main > .onb-card(左 .onb-side+右 .onb-pane) / .onb-foot)。
   トークンは 1. と同じ(色は既存の変数だけ)。1 画面の保証= カードの中身は段ごとに 1 目的・長い説明は左面の details へ。
   幅= 1440 で 920px・1280 で 860px・1024 で 760px(左面 260px)・≤900 で 1 列(左面= 横 1 行のステッパ)。
   設計= history/20261108_session172_exp_rigid_and_rerender/design_invitation_onboarding.md §2.1/§3.4
   ═══════════════════════════════════════════════════════════════════════ */
body.onb-body { display: block; min-height: 100vh; }
body.onb-body .footer, body.onb-body footer.footer.d-flex { display: none !important; }   /* 共通フッタ(script の読み込みだけ使う)は .onb-foot で置き換え(.d-flex の !important に勝つ) */
.onb-wrap { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.onb-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px 0; }
.onb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--mv-text); text-decoration: none; font-family: var(--mv-font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.onb-brand:hover { color: var(--mv-text); text-decoration: none; }
.onb-brand .mv-brand-icon { width: 28px; height: 28px; display: block; }
.onb-main { display: grid; place-items: center; padding: 20px 24px 24px; }
.onb-card {
    display: grid; grid-template-columns: 300px minmax(0, 1fr);
    width: min(920px, 100%);
    border-radius: var(--mv-radius-lg);
    background: linear-gradient(180deg, rgba(31, 37, 48, .74), rgba(15, 18, 24, .80));
    border: 1px solid var(--mv-border-soft);
    box-shadow: var(--mv-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
    overflow: hidden; position: relative;
}
.onb-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(78, 168, 255, .8), rgba(138, 107, 255, .6), transparent); }
.onb-card--single { grid-template-columns: minmax(0, 1fr); width: min(560px, 100%); }
/* ---- 左面(ジャーニー) ---- */
.onb-side {
    display: flex; flex-direction: column; gap: 18px;
    padding: 30px 26px 26px;
    background: linear-gradient(160deg, rgba(78, 168, 255, .10) 0%, rgba(124, 104, 255, .08) 60%, transparent 100%);
    border-right: 1px solid var(--mv-border-soft);
    min-width: 0;
}
.onb-side-head { display: grid; gap: 6px; }
/* ★s172 本番の発見 2: 左面の 2 行(招待の文脈)は語の途中で折らない= 見出しは語単位(keep-all・はみ出すときだけ anywhere)・副題は句(.onb-nw)ごと */
.onb-side-title { font-family: var(--mv-font-display); font-weight: 700; font-size: 15.5px; line-height: 1.45; color: var(--mv-text); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; line-break: strict; }
.onb-side-sub { font-size: 12.5px; line-height: 1.6; color: var(--mv-text-2); overflow-wrap: anywhere; }
.onb-side-sub .onb-nw { white-space: nowrap; }
.onb-side-to { font-size: 12px; color: var(--mv-muted); overflow-wrap: anywhere; }
.onb-side-details { margin-top: 2px; font-size: 12.5px; }
.onb-side-details > summary { cursor: pointer; color: var(--mv-accent); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.onb-side-details > summary::-webkit-details-marker { display: none; }
.onb-side-details > summary::after { content: "›"; display: inline-block; transition: transform .18s ease; color: var(--mv-faint); }
.onb-side-details[open] > summary::after { transform: rotate(90deg); }
.onb-side-dl { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--mv-border-soft); }
.onb-side-dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.onb-side-dl dt { font-size: 11px; font-weight: 500; color: var(--mv-muted); margin: 0; }
.onb-side-dl dd { font-size: 12.5px; font-weight: 600; color: var(--mv-text); margin: 0; overflow-wrap: anywhere; }
.onb-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .95em; }
.onb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.onb-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 40px; color: var(--mv-muted); font-size: 13.5px; position: relative; }
.onb-steps li + li::before { content: ""; position: absolute; left: 12.5px; top: -14px; height: 14px; width: 1px; background: var(--mv-border-2); }
.onb-steps li.done + li::before { background: rgba(52, 211, 166, .55); }
.onb-step-n {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; border: 1.5px solid var(--mv-border-2); color: var(--mv-muted); background: rgba(255, 255, 255, .02);
}
.onb-step-n svg { width: 13px; height: 13px; }
.onb-steps li.cur { color: var(--mv-text); font-weight: 600; }
.onb-steps li.cur .onb-step-n { border-color: var(--mv-accent); color: #fff; background: var(--mv-accent-grad); box-shadow: 0 0 0 4px rgba(78, 168, 255, .16); }
.onb-steps li.done { color: var(--mv-text-2); }
.onb-steps li.done .onb-step-n { border-color: rgba(52, 211, 166, .6); color: #7ee7c8; background: rgba(52, 211, 166, .10); }
.onb-side-eta { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mv-muted); }
.onb-side-eta svg { width: 14px; height: 14px; }
/* ---- 右面(その段の操作) ---- */
.onb-pane { padding: 34px 40px 30px; min-width: 0; display: flex; flex-direction: column; animation: onb-in .18s ease-out both; }
@media (prefers-reduced-motion: reduce) { .onb-pane { animation: none; } }
@keyframes onb-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.onb-eyebrow { margin: 0 0 10px; }
.onb-eyebrow--done { color: var(--mv-success); }
.onb-title { font-family: var(--mv-font-display); font-weight: 700; font-size: 22px; line-height: 1.4; letter-spacing: -.01em; color: var(--mv-text); margin: 0 0 8px; text-wrap: pretty; }
.onb-lead { font-size: 14px; line-height: 1.8; color: var(--mv-text-2); margin: 0 0 18px; text-wrap: pretty; line-break: strict; }
.onb-lead strong { color: var(--mv-text); }
.onb-notice { margin: 0 0 14px; }
.onb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; }
.onb-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--mv-text-2); background: rgba(78, 168, 255, .08); border: 1px solid rgba(78, 168, 255, .25); white-space: nowrap; }
.onb-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mv-accent-grad); }
.onb-form { margin: 0; }
.onb-form .auth-field { margin-bottom: 14px; }
.onb-form .auth-label { margin-bottom: 8px; }
.onb-submit { margin-top: 8px; }
.onb-submit .btn-primary, .onb-submit input[type="submit"] { height: 48px; }
.onb-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin: 4px 0 0; }
.onb-actions .auth-btn { white-space: nowrap; min-height: 48px; }
.onb-actions .auth-btn svg { flex: none; }
.onb-alt { font-size: 13px; color: var(--mv-muted); margin: 16px 0 0; }
.onb-alt a { color: var(--mv-accent); text-decoration: none; font-weight: 600; }
.onb-alt a:hover { text-decoration: underline; }
.onb-note { font-size: 12.5px; line-height: 1.7; color: var(--mv-muted); margin: 14px 0 0; text-wrap: pretty; }
.onb-note a { color: var(--mv-accent); }
.onb-error { margin: -4px 0 14px; }
.onb-error a { color: #ffd1d1; font-weight: 600; margin-left: 4px; }
.onb-error .auth-error-list { margin-top: 6px; }
.onb-divider { margin: 16px 0; }
.onb-sns .btn { height: 48px; }
.onb-methods { display: block; }
/* S3 の箇条 */
.onb-points { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.onb-points li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.6; color: var(--mv-text-2); }
.onb-points li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mv-accent-grad);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 12px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.onb-actions .auth-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; filter: saturate(.6); }
/* S4 パスワードの規則 */
.onb-pw-field .form-control { padding-right: 78px; }
.onb-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--mv-border-2); background: rgba(255, 255, 255, .04); color: var(--mv-text-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.onb-pw-toggle:hover { color: var(--mv-text); border-color: var(--mv-accent); }
.onb-hidden-username { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.onb-rules { list-style: none; padding: 0; margin: -2px 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.onb-rules li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mv-muted); padding: 7px 10px; border-radius: 10px; border: 1px solid var(--mv-border); background: rgba(255, 255, 255, .02); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.onb-rule-i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--mv-border-2); display: inline-block; position: relative; }
.onb-rules li.ok { color: #9fefd6; border-color: rgba(52, 211, 166, .45); background: rgba(52, 211, 166, .07); }
.onb-rules li.ok .onb-rule-i { border-color: transparent; background: linear-gradient(122deg, #34d3a6, #45e6d5); }
.onb-rules li.ok .onb-rule-i::after { content: ""; position: absolute; inset: 0; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 11px no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 11px no-repeat; background: #0b2239; }
.onb-rules li.bad { color: #ff9d9d; border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .07); }
.onb-rules li.bad .onb-rule-i { border-color: rgba(255, 107, 107, .7); }
/* S5 */
.onb-kv { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mv-muted); margin: -2px 0 16px; }
.onb-kv-k { flex: none; }
.onb-kv-v { color: var(--mv-text-2); overflow-wrap: anywhere; }
.onb-consent { font-size: 13px; line-height: 1.7; color: var(--mv-text-2); margin: 0 0 10px; }
.onb-consent a { color: var(--mv-accent); font-weight: 600; }
/* S6 */
.onb-next-label { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--mv-muted); margin: 2px 0 10px; }
.onb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.onb-tile { display: grid; grid-template-rows: auto auto auto; gap: 6px; padding: 14px 14px 12px; border-radius: var(--mv-radius); border: 1px solid var(--mv-border); background: rgba(255, 255, 255, .025); color: var(--mv-text); text-decoration: none; transition: border-color .15s ease, transform .15s ease, background .15s ease; min-width: 0; }
.onb-tile:hover { color: var(--mv-text); text-decoration: none; border-color: var(--mv-accent); background: rgba(78, 168, 255, .07); transform: translateY(-1px); }
.onb-tile-i { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--mv-accent-grad); box-shadow: 0 8px 20px -8px rgba(78, 168, 255, .8); }
.onb-tile-i svg { width: 18px; height: 18px; }
.onb-tile-t { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.onb-tile-d { font-size: 12px; line-height: 1.5; color: var(--mv-muted); }
/* ---- 下部 ---- */
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 32px 18px; font-size: 12px; color: var(--mv-faint); flex-wrap: wrap; }
.onb-foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.onb-foot-links a { color: var(--mv-muted); text-decoration: none; }
.onb-foot-links a:hover { color: var(--mv-text-2); }
/* ---- 幅 ---- */
@media (max-width: 1366px) { .onb-card { width: min(860px, 100%); } .onb-pane { padding: 32px 36px 28px; } }
@media (max-width: 1100px) {
    .onb-card { width: min(760px, 100%); grid-template-columns: 260px minmax(0, 1fr); }
    .onb-side { padding: 26px 22px 22px; }
    .onb-pane { padding: 28px 30px 26px; }
    .onb-title { font-size: 20px; }
    .onb-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .onb-rules li { padding: 6px 8px; font-size: 12px; }
    .onb-tiles { gap: 8px; }
    .onb-tile { padding: 12px 12px 10px; }
    .onb-actions { grid-auto-flow: row; }   /* 1024 幅= 右面 500px 前後に 2 つのボタンは収まらない(文言が切れる)→ 縦積み */
}
@media (max-width: 900px) {
    body.onb-body.auth-body { flex-direction: column; }
    .onb-bar { padding: 14px 18px 0; }
    .onb-main { padding: 14px 14px 20px; }
    .onb-card { grid-template-columns: minmax(0, 1fr); width: 100%; }
    .onb-side { border-right: 0; border-bottom: 1px solid var(--mv-border-soft); padding: 18px 20px 14px; gap: 12px; }
    .onb-side-details { display: none; }
    .onb-steps { display: flex; flex-wrap: wrap; gap: 6px 12px; }
    .onb-steps li { min-height: 0; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; font-size: 12px; }
    .onb-steps li + li::before { display: none; }
    .onb-step-n { width: 22px; height: 22px; font-size: 11px; }
    .onb-step-n svg { width: 11px; height: 11px; }
    .onb-side-eta { margin-top: 0; }
    .onb-pane { padding: 22px 20px 22px; }
    .onb-actions { grid-auto-flow: row; }
    .onb-rules { grid-template-columns: 1fr; }
    .onb-tiles { grid-template-columns: 1fr; }
    .onb-foot { padding: 0 18px 14px; }
}