/* ==========================================================================
   バズマ UI
   - .adm-* : 管理画面（/admin）デザインシステム
   - .mypage-* / .login-container : インフルエンサー側・ログイン（最小限）
   ========================================================================== */

:root {
    --adm-ink: #211d3a;        /* サイドバー・見出し（濃紺すみれ） */
    --adm-ink-soft: #2e2950;   /* サイドバー hover */
    --adm-ink-line: #3a3560;
    --adm-paper: #f5f5f8;      /* アプリ背景 */
    --adm-card: #ffffff;
    --adm-line: #e5e4ee;
    --adm-text: #26243a;
    --adm-muted: #75718c;
    --adm-accent: #e5266a;     /* バズピンク（主要アクション・現在地） */
    --adm-accent-deep: #c21455;
    --adm-accent-soft: #fde7f0;
    --adm-focus: #7c6ff0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--adm-paper);
    color: var(--adm-text);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--adm-focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   シェル（サイドバー + 本文）
   -------------------------------------------------------------------------- */
.adm-shell { display: flex; min-height: 100vh; }

.adm-side {
    width: 216px;
    flex: 0 0 216px;
    background: var(--adm-ink);
    color: #eceaf6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.adm-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--adm-ink-line);
}
/* ロゴは暗い背景用(logo-h-dark)。高さは /mypage サイドバーと揃える(設計 §2) */
.adm-brand-logo {
    display: block;
    height: 24px;
    width: auto;
}
.adm-brand-domain {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #7d76a8;
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
}
.adm-brand-console {
    display: block;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--adm-ink-line);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #9b94c4;
}

.adm-side nav { flex: 1; padding: 12px 0; }
.adm-side nav a {
    display: block;
    padding: 9px 20px 9px 17px;
    border-left: 3px solid transparent;
    color: #c9c4e2;
    text-decoration: none;
    font-size: 13.5px;
}
.adm-side nav a:hover { background: var(--adm-ink-soft); color: #fff; }
.adm-side nav a.is-active {
    border-left-color: var(--adm-accent);
    background: var(--adm-ink-soft);
    color: #fff;
    font-weight: 600;
}

/* サイドバーの折りたたみ群（設計 §1）。JS を使わず <details> に乗せる。
   summary の既定マーカーは Firefox が list-style、WebKit が独自擬似要素で出すため両方消し、
   自前の三角を ::before で描いて開閉に合わせて回す */
.adm-side nav details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--adm-ink-line);
}
.adm-side nav summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px 9px 17px;
    border-left: 3px solid transparent;
    color: #c9c4e2;
    font-size: 13.5px;
    cursor: pointer;
    list-style: none;
}
.adm-side nav summary::-webkit-details-marker { display: none; }
.adm-side nav summary::before {
    content: "▸";
    font-size: 10px;
    color: #7d76a8;
    transition: transform 0.15s ease;
}
.adm-side nav details[open] > summary::before { transform: rotate(90deg); }
.adm-side nav summary:hover { background: var(--adm-ink-soft); color: #fff; }
.adm-side nav details a { padding-left: 34px; font-size: 13px; }

.adm-side-foot { padding: 14px 20px; border-top: 1px solid var(--adm-ink-line); }
.adm-side-foot a { color: #9b94c4; text-decoration: none; font-size: 13px; }
.adm-side-foot a:hover { color: #fff; }

.adm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.adm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: var(--adm-card);
    border-bottom: 1px solid var(--adm-line);
}
.adm-top h1 { margin: 0; font-size: 17px; font-weight: 700; }

/* admin の注釈段落。設定画面などで「この操作の影響」を小さく添える。
   もとは .adm-user という名前だったが、トップバーのメール表示と同じクラスを
   共用していて紛らわしかったため用途名に分けた（2026-08-04） */
.adm-note { color: var(--adm-muted); font-size: 12.5px; }

/* .adm-note の警告版。損益ペイン(product_pricing_pane_controller.js)と
   /admin/pricing(pricing_calc_controller.js)が「値上げしないと赤字」「黒字にできません」
   などの失敗理由をここに出す。フォントサイズは .adm-note に揃え、.adm-pipe-error の
   薄赤背景・枠を弱めた形で「注釈の並びに置いても浮かない警告段落」にする */
.adm-error {
    color: #c42121;
    font-size: 12.5px;
    background: #fdf1f1;
    border: 1px solid #f3c1c1;
    border-radius: 6px;
    padding: 8px 12px;
}

.adm-main { padding: 24px 28px 48px; }

/* 本文直下に並ぶ要素の縦リズム。.adm-card は自前で margin-bottom:20px を持つので、
   それ以外（操作バー・パイプライン・検索・要約段落）を同じ 20px に揃える。
   .adm-actions はカードの中でも使うため、直下セレクタで「ページ直下のときだけ」に
   限定する（カード内のボタン列に余計な下余白を足さない）。
   ショートハンドで書くと .adm-pager の margin-top まで潰れるので margin-bottom 単体で書く */
.adm-main > .adm-actions,
.adm-main > .adm-pipeline,
.adm-main > .adm-search,
.adm-main > .adm-form,
.adm-main > p { margin-bottom: 20px; }

/* 本文の中に置く警告（ダッシュボードの法務未入力・為替の古さなど）。.adm-flash は
   ヘッダー直下に出る前提で左右 28px を自前で持っているが、本文の中では .adm-main の
   padding と二重になって余計に凹む。下余白も無いので次のブロックに貼りつく */
.adm-main > .adm-flash { margin: 0 0 20px; }

/* --------------------------------------------------------------------------
   カード・セクション
   -------------------------------------------------------------------------- */
.adm-card {
    background: var(--adm-card);
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.adm-card > h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--adm-muted);
}

.adm-grid { display: grid; gap: 20px; }
.adm-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .adm-grid-2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   シグネチャ: 注文パイプライン（受注 → 投入 → 出荷 → 通知）
   -------------------------------------------------------------------------- */
.adm-pipeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}
.adm-pipe-stage {
    flex: 1 1 0;
    min-width: 130px;
    background: var(--adm-card);
    border: 1px solid var(--adm-line);
    padding: 14px 16px;
    position: relative;
    text-decoration: none;
    display: block;
}
.adm-pipe-stage:first-child { border-radius: 10px 0 0 10px; }
.adm-pipe-stage + .adm-pipe-stage { border-left: none; }
.adm-pipe-stage:not(.adm-pipe-error):last-of-type { border-radius: 0 10px 10px 0; }
.adm-pipe-stage::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--adm-card);
    border-top: 1px solid var(--adm-line);
    border-right: 1px solid var(--adm-line);
    z-index: 1;
}
.adm-pipe-stage:last-of-type::after { display: none; }
.adm-pipe-label { display: block; font-size: 12px; color: var(--adm-muted); }
.adm-pipe-count {
    display: block;
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.adm-pipe-stage:hover .adm-pipe-count { color: var(--adm-accent); }

.adm-pipe-error {
    flex: 0 0 auto;
    margin-left: 16px;
    border: 1px solid #f3c1c1;
    background: #fdf1f1;
    border-radius: 10px;
}
.adm-pipe-error .adm-pipe-label { color: #a52a2a; }
.adm-pipe-error .adm-pipe-count { color: #c42121; }
.adm-pipe-error::after { display: none; }

/* --------------------------------------------------------------------------
   テーブル
   -------------------------------------------------------------------------- */
.adm-table-wrap { overflow-x: auto; }
/* min-width が無いと width:100% で画面幅まで縮み、スマートフォンでは
   日本語の氏名が1文字ずつ折り返る。ラップ側は overflow-x:auto なので、
   下限を与えて「縮める」のではなく「横スクロールする」挙動にする */
table.adm-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.adm-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-muted);
    padding: 8px 12px;
    border-bottom: 2px solid var(--adm-line);
    white-space: nowrap;
}
.adm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--adm-line);
    vertical-align: top;
}
.adm-table tbody tr:hover { background: #fafafd; }
/* 管理画面の商品サムネ（設計 §4）。柄はマイページの .mp-thumb と揃える */
.adm-thumb { display: block; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: repeating-linear-gradient(135deg, var(--bm-surface-2) 0 8px, var(--bm-surface-4) 8px 16px); }
/* 氏名・メール・日時などの短い値は折り返さず、列の実寸を保つ。
   長い自由文（同期ログの message）だけ .is-text で折り返しに戻す */
.adm-table th, .adm-table td { white-space: nowrap; }
.adm-table td.is-text { white-space: normal; min-width: 280px; }
.adm-table td.is-num, .adm-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
/* 1セルに主情報と補足を積む（名前＋メール、状況＋根拠）。
   .adm-table は既定が white-space: nowrap なので、ここだけ折り返しに戻す */
.adm-table td.adm-cell-stack { white-space: normal; }
.adm-cell-sub { display: block; color: var(--adm-muted); font-size: 12px; }
.adm-table .is-code { font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: 12.5px; }
.adm-table a { color: var(--adm-accent-deep); }
.adm-table tr.row-error { border-left: 3px solid #c42121; background: #fdf7f7; }
.adm-table td.is-empty { color: var(--adm-muted); text-align: center; padding: 28px 12px; }

/* --------------------------------------------------------------------------
   バッジ（ステータス）
   -------------------------------------------------------------------------- */
.adm-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.adm-badge-received  { background: #e4edff; color: #1d4ed8; }
.adm-badge-submitted { background: #fcf0d8; color: #a16207; }
.adm-badge-shipped   { background: #dcf5f1; color: #0f766e; }
.adm-badge-fulfilled_notified { background: #e2f5e5; color: #15803d; }
.adm-badge-error     { background: #fce4e4; color: #c42121; }

.adm-badge-pending   { background: #fcf0d8; color: #a16207; }
.adm-badge-active    { background: #e2f5e5; color: #15803d; }
.adm-badge-suspended { background: #ececf2; color: #5a5670; }

.adm-badge-draft     { background: #ececf2; color: #5a5670; }
.adm-badge-published { background: #e2f5e5; color: #15803d; }

.adm-badge-success   { background: #e2f5e5; color: #15803d; }
.adm-badge-failure   { background: #fce4e4; color: #c42121; }

.adm-badge-on  { background: #e2f5e5; color: #15803d; }
.adm-badge-off { background: #ececf2; color: #5a5670; }

.adm-badge-tiktok { background: #ececf2; color: #111827; }
.adm-badge-shop   { background: #f3e8ff; color: #7e22ce; }
.adm-badge-sample { background: #fde8f0; color: #be185d; }

/* 権限バッジ（設計 §3）。状態バッジ（緑＝有効・灰＝停止）とは別の色にして、
   状態と権限が同じ語彙に見えないようにする。adm-badge-switch は「代理ログイン可
   （なりすまし可能）」という注意を引く意味を持たせてアンバー系にした。
   .adm-badge-pending（#fcf0d8/#a16207）とは同系統でも彩度・明度を変えて
   見分けが付くようにしている */
.adm-badge-admin      { background: #ede9fe; color: #6d28d9; }
.adm-badge-influencer { background: #fde8f1; color: #be185d; }
.adm-badge-switch     { background: #fde68a; color: #92400e; }

/* 一覧の「状況」バッジ（設計 2026-08-11 §3）。状態バッジ・権限バッジのどちらとも
   別の語彙に見えるよう、稼働＝緑／要フォロー＝暖色／審査と終了＝灰でまとめる */
.adm-badge-working        { background: #e2f5e5; color: #15803d; }
.adm-badge-not_ready      { background: #fde68a; color: #92400e; }
.adm-badge-no_sales       { background: #fcf0d8; color: #a16207; }
.adm-badge-dormant        { background: #fde8f0; color: #be185d; }
.adm-badge-pending_review { background: #e4edff; color: #1d4ed8; }
.adm-badge-rejected       { background: #fce4e4; color: #c42121; }
.adm-badge-withdrawn      { background: #ececf2; color: #5a5670; }

/* --------------------------------------------------------------------------
   フィルタタブ
   -------------------------------------------------------------------------- */
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-tabs a {
    padding: 5px 14px;
    border: 1px solid var(--adm-line);
    border-radius: 999px;
    background: var(--adm-card);
    color: var(--adm-muted);
    text-decoration: none;
    font-size: 13px;
}
.adm-tabs a:hover { border-color: var(--adm-accent); color: var(--adm-accent-deep); }
.adm-tabs a.is-active {
    background: var(--adm-ink);
    border-color: var(--adm-ink);
    color: #fff;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   ボタン・フォーム
   -------------------------------------------------------------------------- */
.adm-btn {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: var(--adm-accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.adm-btn:hover { background: var(--adm-accent-deep); }
.adm-btn-ghost { background: var(--adm-card); border-color: var(--adm-line); color: var(--adm-text); }
.adm-btn-ghost:hover { background: var(--adm-paper); border-color: var(--adm-muted); }
.adm-btn-danger { background: #c42121; }
.adm-btn-danger:hover { background: #a51b1b; }
/* 表内の行アクション。行の高さを押し広げないよう一回り小さくする */
.adm-btn-small { padding: 3px 10px; font-size: 12px; }

/* 管理画面の入力欄の基底スタイル。
   以前は .adm-form / .adm-form-row / .adm-actions / .adm-search など「コンテナ class の内側」
   にあるときだけ装飾が当たる opt-in 方式だった。そのため新しい画面がどれにも入れ忘れると、
   入力欄が黙ってブラウザ既定の見た目に戻る（/admin/pricing と /admin/settings で実際に起きた）。
   opt-in を opt-out に反転させ、admin 配下なら何もしなくても整った見た目になるようにする。

   :where() は詳細度に加算されないため、この規則は (0,1,0) のままになる。
   後続の .adm-form input[type="text"] (0,1,1) などがこれまでどおり幅を上書きするので、
   既存画面の見た目は変わらない（未装飾だった箇所だけが直る）。
   チェックボックス・ラジオ・ボタン類は形が壊れるので対象外。 */
.adm-shell :where(
    input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"]),
    select,
    textarea
) {
    padding: 8px 10px;
    border: 1px solid var(--adm-line);
    border-radius: 7px;
    font: inherit;
    background: #fff;
    color: inherit;
}
.adm-shell :where(
    input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"]),
    select,
    textarea
):focus { border-color: var(--adm-accent); outline: none; }

.adm-form { max-width: 560px; }
.adm-form .adm-field { margin-bottom: 14px; }
.adm-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--adm-muted); margin-bottom: 4px; }
.adm-form input[type="text"],
.adm-form input[type="number"],
.adm-form input[type="password"],
.adm-form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--adm-line);
    border-radius: 7px;
    font: inherit;
    background: #fff;
}
.adm-form input:focus, .adm-form select:focus { border-color: var(--adm-accent); outline: none; }
.adm-form ul { margin: 4px 0 0; padding-left: 18px; color: #c42121; font-size: 12.5px; }

/* 素の <form> の中で1項目を包む行（お知らせ配信）。.adm-form を付けていない
   フォームでも同じ見た目になるよう、ラベルと入力欄をここで揃える */
.adm-form-row { margin-bottom: 14px; max-width: 560px; }
.adm-form-row label { display: block; font-size: 12.5px; font-weight: 600; color: var(--adm-muted); margin-bottom: 4px; }
.adm-form-row input[type="text"],
.adm-form-row textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--adm-line);
    border-radius: 7px;
    font: inherit;
    background: #fff;
}
.adm-form-row textarea { resize: vertical; }
.adm-form-row input:focus, .adm-form-row textarea:focus { border-color: var(--adm-accent); outline: none; }

/* 定義リスト（詳細画面・読み取り専用情報） */
.adm-dl { display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; column-gap: 16px; margin: 0; }
.adm-dl dt { color: var(--adm-muted); font-size: 12.5px; padding-top: 2px; }
.adm-dl dd { margin: 0; }

.adm-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* 中身は「ラベル + 入力欄 + ボタン」の一列にもなる（振込の対象月フィルタなど）。
   display:inline はフレックスアイテムとしてはブロック化されるだけで内側の並びを
   決められないので inline-flex にする。ボタンだけの既存フォームでは見た目は変わらない */
.adm-actions form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.adm-actions label { font-size: 12.5px; font-weight: 600; color: var(--adm-muted); }
/* 右端へ寄せる副次操作。フィルタと同じひとかたまりに見せないための逃げ道 */
.adm-actions .is-end { margin-left: auto; }
/* 表の直下に置く一括操作（振込の「選択した分を振込済みにする」など） */
.adm-table-wrap + .adm-actions { margin-top: 16px; }

/* 一覧上部の検索フォーム（ユーザー一覧）。素のままだと OS 既定の入力欄が出る */
.adm-search { display: flex; align-items: center; gap: 8px; max-width: 460px; }
.adm-search input[type="search"] { flex: 1; min-width: 0; }

/* 一覧上部に置く単発の入力欄。.adm-form のものと見た目を揃えるが、
   横並びのバーで使うので width:100% にはしない */
.adm-actions input[type="month"],
.adm-actions input[type="date"],
.adm-actions input[type="search"],
.adm-actions input[type="text"],
.adm-search input[type="search"],
.adm-search input[type="text"] {
    padding: 7px 10px;
    border: 1px solid var(--adm-line);
    border-radius: 7px;
    font: inherit;
    color: inherit;
    background: #fff;
}
.adm-actions input:focus, .adm-search input:focus { border-color: var(--adm-accent); outline: none; }

pre.adm-json {
    background: #f2f1f7;
    border: 1px solid var(--adm-line);
    border-radius: 8px;
    padding: 14px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.5;
}

/* フラッシュ */
.adm-flash { margin: 16px 28px 0; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; }
.adm-flash-success { background: #e2f5e5; color: #15803d; }
.adm-flash-error { background: #fce4e4; color: #c42121; }
.adm-flash-warning { background: #fef3c7; color: #92400e; }

.adm-empty { color: var(--adm-muted); padding: 20px 0; text-align: center; }

/* --------------------------------------------------------------------------
   確認画面（/admin/2fa の認証コード入力・/admin/confirm-access の再認証）
   どちらも .confirm-access。管理シェルの中に置く1枚カードで、これまで CSS が
   1行も無く OS 既定のフォームがそのまま出ていた（2026-08-11）
   -------------------------------------------------------------------------- */
.confirm-access {
    max-width: 420px;
    background: var(--adm-card);
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    padding: 24px;
}
.confirm-access > p { margin: 0 0 16px; color: var(--adm-muted); font-size: 13px; }
.confirm-access > p.error, .confirm-access .error { color: #c42121; }
.confirm-access label { display: block; font-size: 12.5px; font-weight: 600; color: var(--adm-muted); margin-bottom: 6px; }
.confirm-access input[type="text"],
.confirm-access input[type="password"] {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--adm-line);
    border-radius: 7px;
    font: inherit;
    /* iOS は 16px 未満の入力欄で画面を勝手に拡大する（.login-container と同じ理由） */
    font-size: 16px;
    background: #fff;
}
/* 6桁コードは1文字ずつ読んで打つので、字間を開けて等幅で桁を揃える。
   letter-spacing は最後の文字の右にも入るため text-indent で中央のズレを戻す */
.confirm-access input[name="_code"] {
    text-align: center;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: 20px;
}
.confirm-access input:focus { border-color: var(--adm-accent); outline: none; }
.confirm-access button {
    width: 100%;
    /* タップ領域の最小 44px */
    min-height: 44px;
    margin-top: 14px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--adm-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.confirm-access button:hover { background: var(--adm-accent-deep); }
/* 2つ目のフォーム（再送）とパスキー枠は副次的な操作。仕切り線で主フォームと分ける。
   パスキー枠は未対応ブラウザでは [hidden]=display:none なので、対応時だけ線が出る */
.confirm-access form + form,
.confirm-access [data-passkey-support-target="ui"] {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--adm-line);
}
.confirm-access form + form button,
.confirm-access [data-passkey-support-target="ui"] button {
    margin-top: 0;
    background: var(--adm-card);
    border-color: var(--adm-line);
    color: var(--adm-text);
    font-weight: 600;
}
.confirm-access form + form button:hover,
.confirm-access [data-passkey-support-target="ui"] button:hover {
    background: var(--adm-paper);
    border-color: var(--adm-muted);
}
.confirm-access .form-note { margin: 0 0 10px; color: var(--adm-muted); font-size: 12.5px; }

/* ページャ（一覧の下部・中央寄せ。リンク色は既定のまま） */
.adm-pager { text-align: center; margin-top: 16px; font-size: 13.5px; }
.adm-pager span { margin: 0 8px; color: var(--adm-muted); }

@media (max-width: 760px) {
    .adm-shell { flex-direction: column; }
    .adm-side { width: 100%; height: auto; position: static; flex-basis: auto; }
    .adm-main { padding: 16px; }
    .adm-dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   ログイン（admin / mypage 共通）
   -------------------------------------------------------------------------- */
.login-container {
    max-width: 380px;
    /* 狭い端末で枠が画面端に貼りつかないよう、左右に必ず16pxずつ残す。
       上の余白は 9vh のままだと縦の短い端末で詰まりすぎるので下限を置く */
    width: calc(100% - 32px);
    margin: max(24px, 9vh) auto 24px;
    padding: 28px 24px 24px;
    background: var(--adm-card);
    border: 1px solid var(--adm-line);
    border-radius: 12px;
}
.login-container h1 { margin: 0 0 4px; font-size: 20px; letter-spacing: 0.1em; }
.login-container .login-sub { margin: 0 0 18px; color: var(--adm-muted); font-size: 12.5px; letter-spacing: 0.14em; }
.login-container form { display: flex; flex-direction: column; gap: 10px; }
.login-container label { font-size: 12.5px; font-weight: 600; color: var(--adm-muted); }
.login-container input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--adm-line);
    border-radius: 7px;
    font: inherit;
    /* iOS は 16px 未満の入力欄にフォーカスすると画面を勝手に拡大する。
       公開ページの .bm-field-input と同じ理由で 16px を下回らせない */
    font-size: 16px;
}
.login-container input:focus { border-color: var(--adm-accent); outline: none; }
.login-container button {
    margin-top: 6px;
    padding: 9px;
    /* タップ領域の最小 44px */
    min-height: 44px;
    border: none;
    border-radius: 7px;
    background: var(--adm-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.login-container button:hover { background: var(--adm-accent-deep); }
/* パスキー0件時の無効ボタン。灰色＋not-allowed で「押せない」を色でも伝える */
.login-container button:disabled,
.login-container button:disabled:hover {
    background: var(--adm-line);
    color: var(--adm-muted);
    cursor: not-allowed;
}
.login-container .error { color: #c42121; margin-bottom: 4px; font-size: 13px; }

.flash { margin: 12px 16px 0; padding: 8px 14px; border-radius: 8px; }
.flash-success { background: #e2f5e5; color: #15803d; }

/* 最低販売価格の計算ツール */
.adm-pricing { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.5rem; align-items: start; }
/* 入力側は目的ごとに3枚のカードへ分けている（原価と料率 / 目標粗利 / 価格を決めて確かめる）。
   左カラムとして1つのグリッド項目にまとめないと、カードが結果欄の隣に流れ込む */
.adm-pricing-inputs > h3 { margin: 0 0 8px; }
.adm-pricing-inputs > h3 + .adm-card { margin-bottom: 1.25rem; }
.adm-pricing-inputs fieldset { margin: 0; padding: 0; border: 0; }
.adm-pricing-inputs label { display: block; margin-bottom: 0.75rem; }
.adm-pricing-inputs input[type="text"], .adm-pricing-inputs select { width: 100%; }
/* ラジオは行内に置く。上の一括指定のままだと縦幅いっぱいに伸びて不格好になる */
.adm-pricing-inputs input[type="radio"] { width: auto; margin-right: 6px; }
.adm-pricing-results[aria-busy="true"] { opacity: 0.5; }
.adm-pricing-price { font-size: 1.75rem; font-weight: 700; margin: 0.25rem 0 0.75rem; }
.adm-pricing-price span { font-size: 0.875rem; font-weight: 400; }
.adm-pricing-price.is-loss, .adm-pricing-profit.is-loss td { color: #c0392b; }
.adm-pricing-profit th, .adm-pricing-profit td { font-weight: 700; }

@media (max-width: 900px) {
    .adm-pricing { grid-template-columns: 1fr; }
}

/* 商品一覧の損益ペイン */
.adm-table tbody tr[data-product-pricing-pane-id-param] { cursor: pointer; }
.adm-profit.is-loss { color: #c0392b; font-weight: 700; }
/* 数字をボタンに見せない。キーボードで開けるようにするためだけの <button> */
.adm-profit-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.adm-profit-btn:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

.adm-pane {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    overflow-y: auto;
    padding: 20px;
    background: #fff;
    border-left: 1px solid var(--adm-line);
    box-shadow: -8px 0 24px rgba(33, 29, 58, 0.12);
    z-index: 40;
}
.adm-pane[hidden] { display: none; }
.adm-pane h3 { margin: 0 32px 12px 0; font-size: 15px; }
/* ペインの「黒字にするには」ブロック。.adm-error の中に置く補足行で、
   赤の警告色のままだと2択そのものより注記が目立ってしまうので落ち着かせる */
.adm-pane-hint { margin: 8px 0 0; font-size: 12px; color: var(--adm-muted); }
/* 内訳テーブルの直後に赤いブロックが密着すると圧が強いので、少し離す */
.adm-pane .adm-error { margin-top: 18px; }

/* ペイン内の設定フォーム（公開状態・販売価格の上書き）。
   入力欄の枠線は .adm-shell の基底スタイルが付けるので、ここでは幅と余白だけ */
.adm-pane-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--adm-line); }
.adm-pane-form h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.adm-pane-form label { display: block; margin-bottom: 10px; font-size: 12.5px; color: var(--adm-muted); }
.adm-pane-form input[type="text"], .adm-pane-form select { width: 100%; margin-top: 4px; color: var(--adm-text); }
.adm-error ul { margin: 6px 0 0; padding-left: 20px; }
.adm-error li + li { margin-top: 4px; }
.adm-error > p:first-child { margin-top: 0; }

.adm-pane-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--adm-muted);
    cursor: pointer;
}