/* X連携。ローズ世界(style.css)だけで組む - この画面は design-system.css も
   ui-common.css も読み込んでいないため、--hn-* や ui-* の値を書いても当たらない。
   一覧(settings_x.html)とアカウント(settings_x_account.html)で共有する。 */
.xconn-shell{max-width:440px;margin:0 auto;}

/* --- 一覧の行 --------------------------------------------------- */
/* 一覧の行。カードの中に並ぶので **1 行ずつ影を持たせない**
   (DESIGN.md「大量に並ぶ一覧は影を持たせず平坦に」)。 */
.xconn-rows{padding:0 16px;}
.xconn-row{
  display:flex; align-items:center; gap:11px;
  padding:14px 0; min-height:52px;
  border-top:1px solid #f3d9e6; background:none;
  text-decoration:none; transition:opacity .15s ease;
}
.xconn-rows > .xconn-row:first-child{border-top:0;}
.xconn-row:active{opacity:.6;}

/* --- カード ----------------------------------------------------- */
.xconn-card{
  /* 見出しを持たないページなので、切れ目はカード間の余白が作る
     (2026-09-22、ユーザー指示で見出しを全廃)。 */
  padding:16px; margin-top:18px; border-radius:18px;
  border:1px solid #f3d9e6; background:#fff;
  box-shadow:0 10px 24px rgba(222,127,166,.10);
}
.xconn-top{display:flex; align-items:center; gap:11px;}
/* 解除。主操作ではないので枠だけ。名前が長くても潰れない幅を確保する。 */
.xconn-top-act{flex:0 0 auto; margin-left:auto;}
.xconn-unlink{
  min-height:32px; padding:0 12px; border-radius:999px; cursor:pointer;
  border:1px solid #f0c8d4; background:#fff; color:#c8496a;
  font-family:inherit; font-size:12px; font-weight:800; white-space:nowrap;
  transition:transform .15s ease;
}
.xconn-unlink:active{transform:scale(.96); background:#fff1f5;}
/* X の記号は X 自身のものなので黒のまま。ローズ世界の例外はここだけ。 */
.xconn-mark{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#17181c; color:#fff;
}
.xconn-mark svg{width:16px; height:16px; fill:currentColor;}
/* 控えたアイコン。X の印は角に小さく重ねる - 顔を隠さない。 */
.xconn-face{position:relative; flex:0 0 auto; width:46px; height:46px;}
.xconn-face img{
  width:100%; height:100%; border-radius:999px; object-fit:cover; background:#fbe3ee;
}
/* AIRIS側アイコン未設定時の頭文字フォールバック(2026-09-24)。
   .xconn-face imgの背景色(#fbe3ee)と揃え、画像有無で見た目が
   飛ばないようにする。 */
.xconn-face-initial{
  width:100%; height:100%; border-radius:999px; display:flex;
  align-items:center; justify-content:center;
  background:#fbe3ee; color:#c9658f; font-weight:800; font-size:18px;
}
.xconn-face-badge{
  position:absolute; right:-2px; bottom:-2px;
  display:flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:999px;
  background:#17181c; color:#fff; box-shadow:0 0 0 2px #fff;
}
.xconn-face-badge svg{width:9px; height:9px; fill:currentColor;}
/* 控えた時点であることの断り。いまの状態と取り違えさせない。 */
.xsnap-asof{
  margin:10px 0 0; font-size:11px; font-weight:700; color:var(--muted, #6f5a64); line-height:1.6;
}
.xconn-main{flex:1; min-width:0;}
.xconn-shop{
  display:block; font-size:15px; font-weight:800; color:#4b3b44;
  line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xconn-state{
  display:inline-flex; align-items:center; margin-top:4px;
  font-size:12px; font-weight:800; color:var(--muted, #6f5a64);
}
.xconn-state.on{padding:2px 9px; border-radius:999px; background:#fbe3ee; color:#c9658f;}

/* --- 実費 ------------------------------------------------------- */
.xconn-usage{margin-top:14px; border-top:1px solid #f3d9e6; padding-top:12px;}
.xconn-usage-row{
  display:flex; align-items:baseline; gap:10px;
  font-size:13px; font-weight:700; color:#4b3b44; line-height:2;
}
.xconn-usage-month{min-width:58px; color:var(--muted, #6f5a64); font-variant-numeric:tabular-nums;}
.xconn-usage-n{flex:1; min-width:0;}
.xconn-usage-cost{font-variant-numeric:tabular-nums; font-weight:800;}
/* 控えの取り出し。カードの中で、数字の行の下に小さく並べる。 */
.xconn-export{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px;
  margin-top:12px; padding-top:12px; border-top:1px solid #f3d9e6;
  font-size:12px; font-weight:700; color:var(--muted, #6f5a64);
}
.xconn-export a{color:#c9658f; font-weight:800; text-decoration:none;}
.xconn-export a:active{opacity:.6;}

/* --- 操作 ------------------------------------------------------- */
.xconn-act{margin-top:14px;}
.xconn-btn{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:44px; padding:0 16px; border:0; border-radius:16px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#de7fa6 0%,#c9658f 100%);
  box-shadow:0 10px 22px rgba(201,101,143,.22);
  transition:transform .15s ease, opacity .15s ease;
}
.xconn-btn:active{transform:scale(.96); opacity:.9;}
/* a で作ったボタン。下線と既定のリンク色を打ち消す。 */
a.xconn-btn{text-decoration:none; color:#fff;}
a.xconn-btn-soft{color:#c9658f;}
.xconn-btn[disabled]{opacity:.42; cursor:default; box-shadow:none;}
.xconn-btn[disabled]:active{transform:none;}
.xconn-btn-soft{background:#fbe3ee; color:#c9658f; box-shadow:none;}
/* 影が無いぶん、押した手応えだけが反応の合図になる。 */
.xconn-btn-soft:active{background:#f8d6e6;}
/* 危険操作は空間で切り離す。主操作と同じ重さにしない。 */
.xconn-danger{margin-top:14px; padding-top:12px; border-top:1px dashed #f0c8d4;}
.xconn-btn-off{
  display:block; width:100%; min-height:44px; padding:0;
  border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:800; color:#c8496a;
}
.xconn-btn-off:active{opacity:.6;}

/* --- 控えの一覧（アカウントページ） ------------------------------ */
.xconn-item{padding:14px 0; border-top:1px solid #f3d9e6;}
.xconn-item:first-child{border-top:0; padding-top:0;}
.xconn-item-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.xconn-item-name{font-size:14px; font-weight:800; color:#4b3b44;}
.xconn-item-have{
  font-size:12px; font-weight:800; color:#c9658f;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.xconn-item-have.none{color:var(--muted, #6f5a64);}
.xconn-item-note{margin:5px 0 0; font-size:12px; font-weight:700; color:var(--muted, #6f5a64); line-height:1.7;}
.xconn-item-note b{color:#4b3b44; font-weight:800;}
.xconn-item-act{margin-top:10px;}
.xconn-ack{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 10px;
  font-size:12px; font-weight:700; color:#6f5f67; line-height:1.6; cursor:pointer;
}
.xconn-ack input{margin-top:2px; flex-shrink:0;}
.xconn-price{
  font-size:18px; font-weight:800; color:#c9658f;
  font-variant-numeric:tabular-nums;
}
.xconn-price small{font-size:12px; font-weight:800; color:var(--muted, #6f5a64);}

/* --- 自動の設定 -------------------------------------------------- */
.xconn-auto{padding:12px 0; border-top:1px solid #f3d9e6;}
.xconn-auto:first-of-type{border-top:0; padding-top:0;}
.xconn-auto-head{display:flex; align-items:center; gap:8px; cursor:pointer;}
.xconn-auto-name{font-size:14px; font-weight:800; color:#4b3b44;}
.xconn-auto-note{margin:4px 0 0 24px; font-size:12px; font-weight:700; color:var(--muted, #6f5a64); line-height:1.7;}
.xconn-auto-mode{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:9px 0 0 24px; font-size:12px; font-weight:700; color:#6f5f67;
}
.xconn-auto-mode label{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
.xconn-auto-mode input[type=number]{
  width:58px; padding:5px 7px; border-radius:10px; border:1px solid #ebd3df;
  font-family:inherit; font-size:13px; font-weight:800; color:#4b3b44;
}

/* --- 利用額 ------------------------------------------------------ */
.xconn-budget{
  margin-top:18px; padding:16px; border-radius:18px;
  border:1px solid #f3d9e6; background:#fff;
}
.xconn-budget-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.xconn-budget-label{font-size:13px; font-weight:800; color:var(--muted, #6f5a64);}
.xconn-budget-num{font-size:15px; font-weight:800; color:#4b3b44; font-variant-numeric:tabular-nums;}
.xconn-budget-num b{color:#c9658f;}
.xconn-bar{
  position:relative; height:6px; margin:10px 0 0;
  border-radius:999px; background:#fdf0f6; overflow:hidden;
  box-shadow:inset 0 0 0 1px #f7e2ec;
}
.xconn-bar-fill{
  position:absolute; inset:0; transform-origin:left center;
  border-radius:999px; background:linear-gradient(90deg,#de7fa6,#c9658f);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.xconn-budget-note{margin-top:10px; font-size:12px; font-weight:700; color:var(--muted, #6f5a64); line-height:1.7;}
.xconn-budget-sub{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:10px; padding-top:10px; border-top:1px solid #f3d9e6;
  font-size:12px; font-weight:700; color:var(--muted, #6f5a64);
}
.xconn-budget-sub b{color:#4b3b44; font-weight:800; font-variant-numeric:tabular-nums;}
.xconn-budget.is-full{border-color:#f0c8d4; background:#fff7f9;}
.xconn-budget.is-full .xconn-bar-fill{background:#c8496a;}
.xconn-budget.is-full .xconn-budget-note{color:#c8496a;}

/* --- 履歴 -------------------------------------------------------- */
.xconn-hist{display:flex; align-items:baseline; gap:10px; padding:9px 0;
  border-top:1px solid #f3d9e6; font-size:12px; font-weight:700; color:#6f5f67;}
.xconn-hist:first-of-type{border-top:0;}
.xconn-hist-when{min-width:92px; color:var(--muted, #6f5a64); font-variant-numeric:tabular-nums;}
.xconn-hist-n{flex:1; min-width:0;}
.xconn-hist a{color:#c9658f; font-weight:800; text-decoration:none;}

/* --- PIN --------------------------------------------------------- */
.xconn-steps{margin:14px 0 0; padding-left:1.3em; font-size:13px; color:#6f5f67; line-height:1.9;}
.xconn-btn-link{margin-top:12px; text-decoration:none;}
.xconn-pinform{display:flex; gap:8px; margin-top:12px;}
.xconn-pin{
  flex:1; min-width:0; min-height:44px; padding:12px 14px;
  font-family:inherit; font-size:18px; font-weight:800; letter-spacing:.14em;
  text-align:center; color:#4b3b44;
  border:1px solid #ebd3df; border-radius:14px; background:#fff;
}
.xconn-pin:focus{outline:none; border-color:#e48fb3; box-shadow:0 0 0 3px rgba(228,143,179,.15);}
.xconn-pinform .xconn-btn{width:auto; flex:0 0 auto; padding:0 20px;}
.xconn-cancel{
  display:block; width:100%; margin-top:10px; padding:12px 0;
  border:0; background:none; font-family:inherit; font-size:13px;
  font-weight:800; color:var(--muted, #6f5a64); cursor:pointer;
}

/* --- 通知・注記 --------------------------------------------------- */
.xconn-err,.xconn-ok{
  margin:0 0 12px; padding:12px 14px; border-radius:14px;
  font-size:13px; font-weight:700; line-height:1.7;
}
.xconn-err{background:#fff1f5; border:1px solid #f4c8d6; color:#d85b7b;}
.xconn-ok{background:#fff7fb; border:1px solid #f3d9e6; color:#c9658f;}
.xconn-alert{
  margin:0 0 12px; padding:13px 14px; border-radius:14px;
  background:#fff1f5; border:1px solid #f0c8d4; color:#a33c63;
  font-size:13px; font-weight:800; line-height:1.7;
}
.xconn-note{margin:18px 0 0; font-size:12px; font-weight:700; color:var(--muted, #6f5a64); line-height:1.8;}
.xconn-empty{
  margin-top:12px; padding:22px 16px; border-radius:18px; text-align:center;
  border:1px solid #f3d9e6; background:#fff;
  font-size:13px; font-weight:700; color:var(--muted, #6f5a64);
}
.xconn-back{
  display:inline-block; margin-bottom:12px;
  font-size:13px; font-weight:800; color:#c9658f; text-decoration:none;
}
/* 節の見出し。settings.html のものと同じ値だが、あちらは
   そのページ内の <style> にしか無い。ここで持つ。
   **上は下より広く空ける** - 直前の節との切れ目を作る。 */
.xconn-shell .settings-section-title{
  margin:26px 0 8px; font-size:13px; font-weight:800; color:var(--muted, #6f5a64);
}
.xconn-shell .settings-section-title:first-child{margin-top:0;}


@media (prefers-reduced-motion: reduce){
  .xconn-btn,.xconn-row,.xconn-bar-fill{transition:none;}
  .xconn-btn:active,.xconn-row:active{transform:none;}
}

/* --- 控えの一覧（畳める行） --------------------------------------
   2026-09-22、ユーザー指摘「雑すぎる」。以前は同じ 4 項目が
   「控える」と「自動で控える」の 2 節に重複し、各行が
   説明＋大きな価格＋チェック＋全幅ボタンで全部が同じ声量だった。
   **畳んだ状態では状態だけ**を見せ、開いたときにだけ操作を出す。
   <details> なので JS を足さずに済む。 */
.xrow{border-top:1px solid #f3d9e6;}
.xrow:first-of-type{border-top:0;}
.xrow > summary{
  display:flex; align-items:center; gap:10px;
  min-height:52px; padding:0; cursor:pointer; list-style:none;
}
.xrow > summary::-webkit-details-marker{display:none;}
.xrow-name{flex:1; min-width:0; font-size:14px; font-weight:800; color:#4b3b44;}
.xrow-state{
  font-size:12px; font-weight:800; color:#c9658f;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.xrow-state.none{color:var(--muted, #6f5a64);}
.xrow-auto-tag{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:#fbe3ee; color:#c9658f; font-size:10px; font-weight:800;
}
.xrow-chev{
  flex:0 0 auto; width:14px; color:var(--glyph, #8a7480); font-size:17px; font-weight:800;
  text-align:center; transition:transform .18s ease;
}
.xrow[open] > summary .xrow-chev{transform:rotate(90deg);}
.xrow-body{padding:0 0 14px;}
.xrow-note{margin:0 0 12px; font-size:12px; font-weight:700; color:var(--muted, #6f5a64); line-height:1.8;}
.xrow-note b{color:#4b3b44; font-weight:800;}
.xrow-note + .xrow-note{margin-top:-6px;}
/* 自動の設定。同じ行の中に置く - 別の節に分けると同じ項目が 2 度出る。 */
.xrow-auto{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
  margin-top:12px; padding-top:11px; border-top:1px dashed #f3d9e6;
  font-size:12px; font-weight:700; color:#6f5f67;
}
.xrow-auto-label{color:var(--muted, #6f5a64); font-weight:800;}
.xrow-auto label{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
.xrow-auto input[type=number]{
  width:52px; padding:4px 6px; border-radius:9px; border:1px solid #ebd3df;
  font-family:inherit; font-size:12px; font-weight:800; color:#4b3b44;
}
.xrow-pub{
  display:flex; align-items:flex-start; gap:8px; margin-top:10px;
  font-size:12px; font-weight:700; color:#6f5f67; line-height:1.6; cursor:pointer;
}
.xsave{margin-top:14px;}


/* --- 控えの表 ----------------------------------------------------
   2026-09-22、ユーザー指示「表の一覧のようにする。チェックをしてる
   ものをバックアップする。ボタンは一つでいい」。
   375px に収めるため 3 列: 項目 / いまの控え / 費用。 */
.xtbl{margin:0 0 4px;}
/* 3 列: プラン名 / 投稿の上限 / 取得の上限。
   以前はチェックボックス付きの表の 4 列(22px 1fr auto auto)を
   流用しており、プラン名が 22px の列に落ちて 1 文字ずつ縦に
   折り返していた(2026-09-30 修正)。名前に先に幅を与える。 */
.xtbl-head, .xtbl-row{
  display:grid; grid-template-columns:minmax(78px,1fr) auto auto; gap:12px;
}
.xtbl-head{
  padding:0 0 9px; border-bottom:1px solid #f3d9e6;
  font-size:11px; font-weight:800; color:var(--muted, #6f5a64); line-height:1.4;
}
.xtbl-row{
  align-items:center; padding:13px 0; cursor:pointer;
  border-bottom:1px solid #f3d9e6;
}
/* 最後の行の線は消す。カードの内側に二重の底が見えるため。 */
.xtbl-row:last-of-type{border-bottom:0;}
/* 見出しの 2・3 列目は数字と同じ右端に揃える。 */
.xtbl-head .xtbl-c2, .xtbl-head .xtbl-c3{text-align:right;}
.xtbl-row.is-off{opacity:.5; cursor:default;}
.xtbl-check{width:18px; height:18px; margin:0; accent-color:#c9658f;}
.xtbl-c1{min-width:0;}
.xtbl-name{display:block; font-size:14px; font-weight:800; color:#4b3b44; line-height:1.35;}
/* 2 行目。1 行目と同じ重さだと 2 つの項目に見えるので、少し落とす。 */
.xtbl-name2{display:block; font-size:12px; font-weight:800; color:var(--muted, #6f5a64);}
.xtbl-sub{
  display:block; margin-top:3px; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.xtbl-c2{
  font-size:12px; font-weight:800; color:#c9658f;
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
}
.xtbl-c2.none{color:#c4b6bd;}
/* 控えた日。件数の下に小さく添える。 */
.xtbl-c2when{display:block; margin-top:2px; font-size:10px; font-weight:700; color:#c4b6bd;}
/* 件数から控えの中身へ。押せることを下線で示す。 */
.xtbl-c2link{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.xtbl-c3{
  min-width:62px; font-size:12px; font-weight:800; color:#4b3b44;
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
}
/* 自動の設定。行の下に小さく添える - 表の列にすると 375px に入らない。 */
.xtbl-auto{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
  padding:0 0 12px 32px; border-bottom:1px solid #f3d9e6;
  font-size:11px; font-weight:700; color:var(--muted, #6f5a64);
}
.xtbl-auto label{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
.xtbl-auto select{
  padding:3px 6px; border-radius:8px; border:1px solid #ebd3df; background:#fff;
  font-family:inherit; font-size:11px; font-weight:800; color:#6f5f67;
}
.xtbl-when{margin-left:auto;}
.xtbl-foot{margin-top:16px;}
/* 細かい設定。畳んだ状態は 1 行だけ。 */
.xdetail{margin-top:16px; border-top:1px solid #f3d9e6;}
.xdetail > summary{
  display:flex; align-items:center; gap:10px;
  min-height:48px; cursor:pointer; list-style:none;
}
.xdetail > summary::-webkit-details-marker{display:none;}
.xdetail[open] > summary .xrow-chev{transform:rotate(90deg);}
.xdetail-body{padding:2px 0 8px;}

.xbase-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:9px 0; border-top:1px solid #f3d9e6;
}
/* 連携の見出しに続く行。上に罫線を引いて区切る。 */
.xconn-top + .xbase-row{margin-top:13px;}
.xbase-name{font-size:13px; font-weight:700; color:#4b3b44;}
.xbase-name small{
  display:block; margin-top:2px;
  font-size:11px; font-weight:700; color:var(--muted, #6f5a64); line-height:1.7;
}
.xbase-state{
  flex:none; font-size:12px; font-weight:800; color:#c9658f; white-space:nowrap;
}
/* 残量。数字だけだと「あと何回」が量として伝わらない。 */
.xquota{
  height:4px; margin:2px 0 0; border-radius:999px;
  background:#f3d9e6; overflow:hidden;
}
.xquota span{display:block; height:100%; background:#c9658f;}



/* プラン管理への入口。設定の行と同じ重みにし、押せることを示す。 */
.xadmin-link{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 0; padding:13px 15px; border-radius:16px;
  background:#fff; border:1px solid #f3d9e6; text-decoration:none;
}
.xadmin-title{font-size:13px; font-weight:800; color:#4b3b44;}
.xadmin-sub{
  flex:1; min-width:0; font-size:11px; font-weight:700; color:var(--muted, #6f5a64);
}
.xadmin-link .xrow-chev{flex:none; color:#c9658f;}

/* --- プラン管理 ---------------------------------------------------
   選ぶための行。名前と使用状況を左、選択を右に置く。 */
/* 名前・使用状況・選択を縦に積む(2026-09-30)。横並びだと 375px で
   選択欄が半分以下に潰れ、押す的も 44px を割っていた。 */
.xplan-row{
  padding:14px 0; border-top:1px solid #f3d9e6;
}
.xplan-row:first-of-type{border-top:0; padding-top:2px;}
/* **行の中に閉じる。** 同じ名前のクラスを pricing.html が別の意味で
   使っており(このファイルの後方)、素の .xplan-who では後勝ちで負ける。 */
.xplan-row .xplan-who{display:block; min-width:0;}
.xplan-row .xplan-name{
  display:block; font-size:14px; font-weight:800; color:#4b3b44; line-height:1.35;
}
.xplan-row .xplan-meta{
  display:block; margin-top:2px; font-size:11px; font-weight:700; color:var(--muted, #6f5a64);
}
.xplan-row .xplan-use{
  display:block; margin-top:8px; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64); font-variant-numeric:tabular-nums;
}
/* 使用量。既にある .xconn-bar と同じ部品を使う - 上限に近いかどうかは
   数字を読むより、長さで見えるほうが速い。 */
.xplan-row .xplan-meter{display:block; margin-top:7px;}
.xplan-row .xplan-meter .xconn-bar{display:block; margin:0; height:5px;}
.xplan-row.is-over .xconn-bar-fill{background:#c8496a;}
.xplan-row.is-over .xplan-use{color:#c8496a;}

.xplan-row .xplan-pick{display:block; margin-top:11px;}
.xplan-select{
  display:block; width:100%; min-height:44px;
  padding:0 42px 0 14px; border-radius:14px; border:1px solid #ebd3df;
  background-color:#fff;
  /* 既存のアイコンと同じ線の太さ・丸端で描いた山形。OS の矢印は
     この世界の線と合わないため、appearance を切って自前で置く。 */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a89aa2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  background-size:16px 16px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  font-family:inherit; font-size:14px; font-weight:800; color:#4b3b44;
  cursor:pointer;
}
.xplan-select:focus-visible{
  outline:none; border-color:#de7fa6;
  box-shadow:0 0 0 3px rgba(222,127,166,.32);
}
/* 内容の対照表。選ぶ行ではないので、押せる見た目にしない。 */
.xplan-ref{cursor:default;}

/* 申し込み(2026-09-30)。誰が・いつ・何を、の 3 つを読み分けられるように
   する。以前は日時が名前と同じ行に流れ、希望プランだけが右端で浮いていた。 */
.xplan-req{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0; border-top:1px solid #f3d9e6;
}
.xplan-req:first-of-type{border-top:0; padding-top:2px;}
.xplan-req:last-of-type{padding-bottom:2px;}
.xplan-req-who{
  display:block; min-width:0; font-size:14px; font-weight:800; color:#4b3b44;
}
.xplan-req-who small{
  display:block; margin-top:3px; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64); font-variant-numeric:tabular-nums;
}
/* 希望しているプラン。決定ではなく申し出なので、面で塗らず縁取りにする。 */
.xplan-req-what{
  flex:0 0 auto; padding:6px 11px; border-radius:999px;
  border:1px solid #f3d9e6; background:#fff7fb;
  font-size:12px; font-weight:800; color:#c9658f; white-space:nowrap;
}

/* オプションの導入。カードの外に置き、区切りとして効かせる。 */
.xopt-lede{
  margin:18px 2px 8px; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64); line-height:1.8;
}
.xopt-lede .xopt-left{display:inline; color:#c9658f; font-size:11px;}
.xopt-lede b{
  display:block; font-size:13px; color:#4b3b44;
}
/* 見出しだけの行。説明が続かないので下の間を詰める。 */
.xopt-lede b:only-child{margin-bottom:0;}
.xdetail-check{
  display:flex; align-items:flex-start; gap:8px; margin:12px 0 0;
  font-size:12px; font-weight:700; color:#6f5f67; line-height:1.6; cursor:pointer;
}
.xdetail-check input{margin-top:2px; flex-shrink:0;}
.xdetail-body .xconn-btn{margin-top:14px;}
/* 押せない行。チェックが無いぶん左の余白を詰める。 */
.xtbl-flat{grid-template-columns:1fr auto; cursor:default;}
.xtbl-flat:hover{background:none;}
/* 取り直し。主たる操作ではないので、控えめに置く。 */
/* 控えの下に置く操作。カードにせず、地の上に小さく置く。 */
/* いま見ている時点。最新と取り違えないよう、一覧の上に置く。 */
.xlist-at{
  margin:0 2px 10px; font-size:11px; font-weight:700; color:var(--muted, #6f5a64);
}
.xlist-at b{color:#4b3b44; font-size:12px;}
.xlist-at a{
  margin-left:8px; color:#c9658f; font-weight:800;
  text-decoration:none; border-bottom:1px solid #f3d9e6;
}

.xlist-foot{margin:18px 2px 0;}
.xlist-note{
  margin:10px 0 0; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64); line-height:2;
}
.xlist-note a{
  margin-left:8px; color:#c9658f; font-weight:800;
  text-decoration:none; border-bottom:1px solid #f3d9e6;
}
.xrefresh{margin:12px 0 0;}
.xrefresh .xtbl-hint{margin-top:8px;}

.xtbl-hint{
  margin:10px 0 0; font-size:11px; font-weight:700; color:var(--muted, #6f5a64); line-height:1.8;
}
.xtbl-hint a{color:#c9658f; font-weight:800;}
/* 文中の小さな操作。ボタンだが、文の流れを切らない見た目にする。 */
.xtbl-inline{
  padding:0; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:inherit; font-weight:800; color:#c9658f;
  text-decoration:underline;
}
.xtbl-inline[disabled]{color:#c4b6bd; text-decoration:none; cursor:default;}


/* --- 控えたプロフィール --------------------------------------------
   立て直すときに写し取る内容。文字は選択できるままにする。 */
.xsnap{border-top:1px solid #f3d9e6;}
.xsnap:first-of-type{border-top:0;}
.xsnap > summary{
  display:flex; align-items:center; gap:10px;
  min-height:48px; cursor:pointer; list-style:none;
}
.xsnap > summary::-webkit-details-marker{display:none;}
.xsnap-when{
  font-size:12px; font-weight:800; color:#4b3b44;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.xsnap-sum{
  flex:1; min-width:0; font-size:11px; font-weight:700; color:var(--muted, #6f5a64);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xsnap[open] > summary .xrow-chev{transform:rotate(90deg);}
.xsnap-body{padding:2px 0 14px;}
.xsnap-top{display:flex; align-items:center; gap:11px; margin-bottom:10px;}
.xsnap-avatar{
  flex:0 0 auto; width:48px; height:48px; border-radius:999px;
  object-fit:cover; background:#fbe3ee;
}
.xsnap-avatar-none{
  display:flex; align-items:center; justify-content:center;
  color:#c4b6bd; font-size:13px; font-weight:800;
}
.xsnap-who{min-width:0;}
.xsnap-name{display:block; font-size:15px; font-weight:800; color:#4b3b44;}
.xsnap-handle{display:block; font-size:12px; font-weight:700; color:var(--muted, #6f5a64);}
.xsnap-bio{
  margin:14px 0 10px; padding:10px 12px; border-radius:12px; background:#fff7fb;
  font-size:13px; font-weight:400; color:#4b3b44; line-height:1.8;
  white-space:pre-wrap; word-break:break-word;
}
/* 手元にある件数。X の実数の横に、弱く添える。 */
.xsnap-link, .xsnap-kept{
  margin-left:6px; font-size:11px; font-weight:700;
}
.xsnap-kept{color:var(--muted, #6f5a64);}
.xsnap-link{
  color:#c9658f; text-decoration:none;
  border-bottom:1px solid #f3d9e6;
}

.xsnap-facts{
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0;
  font-size:12px; line-height:1.8;
}
.xsnap-facts dt{font-weight:700; color:var(--muted, #6f5a64);}
.xsnap-facts dd{
  margin:0; font-weight:800; color:#4b3b44;
  font-variant-numeric:tabular-nums; word-break:break-all;
}

/* 控えの持ち出し(2026-09-26、ユーザー指摘「ボタンがダサい」)。
   カードの中は文字だけで出来ているので、塗りのボタンは置かない。
   事実の一覧の最後の 1 行として、件数に添える .xsnap-link と
   同じ語彙(淡い桃色 + 細い下線)にする。 */
.xsnap-dl{display:flex; flex-wrap:wrap; gap:2px 14px;}
.xsnap-dl-btn{
  color:#c9658f; text-decoration:none; border-bottom:1px solid #f3d9e6;
}


/* --- 控えたアカウントの一覧 ----------------------------------------
   凍結後に声をかけ直すための画面。名前・@ID・自己紹介で探せる。 */
/* 切り替え。アプリ既存の検索画面(.x-tab)と同じ下線式にする
   (2026-09-22、ユーザー指示)。ピルだと 2 つ並んだときに
   「押せるもの」より「状態の札」に見える。 */
/* タブもセルと同じく端まで(2026-09-22、ユーザー指示)。
   下線が途中で切れると、下のセルと端が揃わない。 */
.xlist-tabs{
  display:flex; margin:0 -16px 12px; padding:0 16px;
  border-bottom:1px solid #f3d9e6;
}
.xlist-tab{
  position:relative; flex:1; padding:14px 4px 12px; text-align:center;
  font-size:14px; font-weight:700; color:var(--muted, #6f5a64); text-decoration:none;
}
.xlist-tab.on{color:#4b3b44;}
.xlist-tab.on::after{
  content:""; position:absolute; left:30%; right:30%; bottom:-1px;
  height:3px; border-radius:999px; background:#c9658f;
}
.xlist-find{display:flex; gap:8px; margin:0 0 10px;}
.xlist-q{
  flex:1; min-width:0; min-height:44px; padding:12px 14px;
  border:1px solid #ebd3df; border-radius:14px; background:#fff;
  font-family:inherit; font-size:16px; color:#4b3b44;
}
.xlist-q:focus{outline:none; border-color:#e48fb3; box-shadow:0 0 0 3px rgba(228,143,179,.15);}
.xlist-go{width:auto; flex:0 0 auto; padding:0 18px; min-height:44px;}
/* 一覧のセルは画面いっぱい(2026-09-22、ユーザー指示)。
   app-shell の左右 16px を打ち消して端まで届かせ、角丸と影を外す。
   中身の余白はカード側で持ち直す。 */
.xlist-card{
  margin-left:-16px; margin-right:-16px;
  padding:0 16px;
  border-radius:0; border-left:0; border-right:0;
  box-shadow:none;
}
.xlist-avatar{
  flex:0 0 auto; width:42px; height:42px; border-radius:999px;
  object-fit:cover; background:#fbe3ee;
}
.xlist-avatar-none{
  display:flex; align-items:center; justify-content:center;
  color:#c9658f; font-size:16px; font-weight:800;
}
.xlist-handle{
  display:block; margin-top:2px; font-size:12px; font-weight:700; color:var(--muted, #6f5a64);
}
.xlist-bio{
  display:block; margin-top:4px; font-size:12px; font-weight:400; color:var(--muted, #6f5a64);
  line-height:1.6; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* この画面の行は上下に余白を持つ(自己紹介が 2 行入るため)。 */
.xlist-tabs ~ .xconn-rows .xconn-row{align-items:flex-start; padding:14px 0;}

/* --- プランの案内 -------------------------------------------------
   設定ではなく紹介の場なので、見出しと価格だけ大きく取る。
   色と角の丸みは他の画面と同じものを使う。 */
.xplan-head{margin:6px 2px 18px;}
.xplan-lead{
  margin:0; font-size:24px; font-weight:900; line-height:1.45;
  letter-spacing:-.02em; color:#4b3b44;
}
.xplan-sub{
  margin:10px 0 0; font-size:12px; font-weight:700;
  color:var(--muted, #6f5a64); line-height:1.9;
}

/* どのアカウントの話か。複数持つ人だけに出る。 */
.xplan-who{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0 2px 14px; font-size:11px; font-weight:700;
}
.xplan-who-now{
  padding:4px 10px; border-radius:999px;
  background:#c9658f; color:#fff; font-weight:800;
}
.xplan-who a{
  padding:4px 10px; border-radius:999px; background:#fff;
  border:1px solid #f3d9e6; color:var(--muted, #6f5a64); text-decoration:none;
}

/* 月額 / 年額。X の切り替えと同じ形だが、色はこちらの世界のもの。 */
.xplan-toggle{
  display:flex; gap:4px; padding:4px; margin:0 0 16px;
  border-radius:999px; background:#fbeaf1;
}
.xplan-tab{
  flex:1; padding:10px 8px; border-radius:999px; text-align:center;
  font-size:13px; font-weight:800; color:var(--muted, #6f5a64); text-decoration:none;
}
.xplan-tab.on{background:#fff; color:#4b3b44;}
.xplan-save{
  display:block; margin-top:2px; font-size:10px; font-weight:800;
  color:#c9658f;
}
.xplan-tab.on .xplan-save{color:#c9658f;}

.xplan-card{
  margin:0 0 14px; padding:18px 16px; border-radius:18px;
  background:#fff; border:1px solid #f3d9e6;
}
/* いま使っているプラン。枠で示す - 塗ると価格が読みにくい。 */
.xplan-card.is-now{border-color:#c9658f;}
.xplan-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.xplan-name{font-size:17px; font-weight:900; color:#4b3b44;}
.xplan-badge{
  padding:3px 9px; border-radius:999px; background:#c9658f;
  font-size:10px; font-weight:800; color:#fff;
}
.xplan-badge.alt{background:#fdf1f6; color:#c9658f;}
.xplan-price{
  margin:10px 0 14px; font-size:30px; font-weight:900; color:#4b3b44;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.xplan-price span{
  margin-left:4px; font-size:12px; font-weight:800; color:var(--muted, #6f5a64);
  letter-spacing:0;
}
/* 現在のStripe契約状態。該当するプランのカードの中だけに出す(S4-A UI
   見直し、2026-09-30)。別カードは作らない・月額表示は xplan-price と
   重複させない。 */
.xplan-card-status{
  display:flex; flex-direction:column; gap:2px;
  margin:0 0 14px; padding:10px 12px; border-radius:12px;
  background:#fdf1f6;
}
.xplan-card-status-line{font-size:12px; font-weight:800; color:#c9658f;}
.xplan-card-status.is-cancel{background:#fdeef1;}
.xplan-card-status.is-cancel .xplan-card-status-line{color:#c8496a;}
.xplan-btn{width:100%;}
.xplan-btn:disabled{opacity:.45;}
/* 解約・支払い方法の管理(S4-A、2026-09-30)。申し込みと同じ重さにしない -
   主操作の下に、控えめな面で置く。 */
.xplan-manage{margin:10px 0 0;}
.xplan-manage-note{
  margin:8px 2px 0; font-size:11px; font-weight:700; color:var(--muted, #6f5a64);
  line-height:1.8;
}

/* 確認画面の内容一覧。項目を左、値を右に。 */
.xplan-feats{
  display:grid; grid-template-columns:1fr auto; gap:0 14px;
  margin:18px 0 0; padding:4px 0 0; border-top:1px solid #f3d9e6;
  align-items:center;
}
.xplan-feats dt{
  padding:9px 0; font-size:12px; font-weight:700; color:#6f5f67;
}
.xplan-feats dd{
  margin:0; padding:9px 0; font-size:12px; font-weight:800; color:#4b3b44;
  text-align:right; font-variant-numeric:tabular-nums;
}
/* 上の項目の中身。字下げと細い縦線で従属を示す。 */
.xplan-feats dt.sub{
  padding-left:11px; font-size:11px; color:var(--muted, #6f5a64);
  border-left:1px solid #f3d9e6;
}

/* 比較表。4 列は 400px に入らないので、横に送れるようにする。
   項目名の列だけ貼り付けて、何の行か見失わないようにする。 */
.xplan-tablewrap{
  overflow-x:auto; margin:0 0 6px; padding:4px 0 2px;
  border-radius:18px; background:#fff; border:1px solid #f3d9e6;
  -webkit-overflow-scrolling:touch;
}
.xplan-table{
  width:100%; border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.xplan-table th, .xplan-table td{
  padding:9px 10px; font-size:11px; text-align:center;
  white-space:nowrap; border-bottom:1px solid #f9ecf2;
}
.xplan-table tbody tr:last-child th,
.xplan-table tbody tr:last-child td{border-bottom:0;}
.xplan-table thead th{
  font-size:12px; font-weight:800; color:#4b3b44;
  border-bottom:1px solid #f3d9e6;
}
.xplan-table th[scope="row"]{
  position:sticky; left:0; z-index:1; background:#fff;
  min-width:150px; text-align:left;
  font-size:12px; font-weight:700; color:#6f5f67;
}
/* 上の項目の中身。字下げと細い縦線で従属を示す。 */
.xplan-table th.sub{
  padding-left:18px; font-size:11px; color:var(--muted, #6f5a64);
}
.xplan-table th.sub::before{
  content:""; position:absolute; left:10px; top:7px; bottom:7px;
  border-left:1px solid #f3d9e6;
}
.xplan-table td{font-weight:800; color:#4b3b44;}
/* いま使っているプランの列。 */
.xplan-table .now{background:#fdf6f9;}
.xplan-table thead th.now{color:#c9658f;}
/* 使える / 使えない。線の太さは他の図形と同じ 1.8。 */
.xplan-mark{width:15px; height:15px; vertical-align:-3px; color:#c9658f;}
.xplan-mark.off{color:#cfc2ca;}
/* 読み上げ用。目には出さないが、丸バツだけでは伝わらない。 */
.xplan-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.xplan-note{
  margin:6px 2px 0; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64); line-height:1.9;
}

/* 未処理の申し込み（管理画面）。 */
.xplan-req{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0; border-top:1px solid #f3d9e6;
}
.xplan-req:first-child{border-top:0;}
.xplan-req-who{font-size:12px; font-weight:800; color:#4b3b44;}
.xplan-req-who small{
  display:block; margin-top:2px; font-size:11px;
  font-weight:700; color:var(--muted, #6f5a64);
}
.xplan-req-what{
  flex:none; font-size:12px; font-weight:800; color:#c9658f;
}

/* --- お申し込みの確認 ---------------------------------------------- */
.xco-card{padding:20px 16px;}
.xco-for{margin:0; font-size:11px; font-weight:800; color:var(--muted, #6f5a64);}
.xco-change{
  display:flex; align-items:center; gap:10px; margin:8px 0 0;
}
.xco-from{font-size:13px; font-weight:800; color:var(--muted, #6f5a64);}
.xco-arrow{color:#cfc2ca;}
.xco-to{font-size:20px; font-weight:900; color:#4b3b44;}
.xco-price{margin:14px 0 0;}
.xco-amount{
  font-size:32px; font-weight:900; color:#4b3b44;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.xco-cycle{margin-left:6px; font-size:12px; font-weight:800; color:var(--muted, #6f5a64);}
.xco-save{margin:6px 0 0; font-size:11px; font-weight:800; color:#c9658f;}
.xco-feats{margin-top:18px;}

/* お支払いの説明。順路を示すだけで、入力欄は置かない。 */
.xco-pay{margin-top:14px;}
.xco-pay-title{margin:0 0 10px; font-size:13px; font-weight:800; color:#4b3b44;}
.xco-steps{
  margin:0; padding-left:1.3em; font-size:12px; font-weight:700;
  color:#6f5f67; line-height:2;
}
.xco-steps b{color:#4b3b44;}
.xco-pay-note{
  margin:12px 0 0; padding:9px 11px; border-radius:12px;
  background:#fdf6f9; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64); line-height:1.8;
}
.xco-act{margin-top:18px;}
.xco-act .xconn-btn{width:100%;}
.xco-back{
  display:block; margin:12px 0 0; text-align:center;
  font-size:12px; font-weight:800; color:var(--muted, #6f5a64); text-decoration:none;
}

/* --- 公開ページ（料金・規約）--------------------------------------
   ログインの外側。読むための場なので、行間を広く取る。 */
.xlg{padding-top:22px; padding-bottom:40px;}
.xlg-home{margin:0 0 18px;}
.xlg-home a{
  font-size:15px; font-weight:900; letter-spacing:.04em;
  color:#c9658f; text-decoration:none;
}
.xlg-title{
  margin:0 0 16px; font-size:22px; font-weight:900;
  letter-spacing:-.02em; color:#4b3b44;
}
.xlg-lead{
  margin:0 0 22px; font-size:13px; font-weight:700;
  color:#6f5f67; line-height:2;
}
.xlg-h2{
  margin:26px 0 8px; font-size:14px; font-weight:800; color:#4b3b44;
}
.xlg p, .xlg li{
  font-size:12px; font-weight:700; color:#6f5f67; line-height:2;
}
.xlg ol, .xlg ul{margin:0; padding-left:1.4em;}
.xlg li{margin:2px 0;}
/* 本文のリンク。**ボタンは除く** - ボタンは背景がロゼなので、
   同じ色を当てると文字が沈む(2026-09-22、実際そうなった)。 */
.xlg a:not(.xconn-btn){color:#c9658f;}
/* a で作ったボタン。button と同じ見た目に揃える。 */
.xlg a.xconn-btn{color:#fff; text-decoration:none;}
.xlg a.xconn-btn-soft{color:#c9658f;}

/* 料金のカード。横に並べ、狭いときは折り返す。 */
.xlg-cards{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px;}
.xlg-card{
  flex:1 1 150px; padding:14px; border-radius:16px;
  background:#fff; border:1px solid #f3d9e6;
}
.xlg-card.is-rec{border-color:#c9658f;}
.xlg-name{display:block; font-size:13px; font-weight:800; color:#4b3b44;}
.xlg-name b{
  margin-left:6px; padding:2px 7px; border-radius:999px;
  background:#fdf1f6; font-size:10px; color:#c9658f;
}
.xlg-price{
  display:block; margin-top:6px; font-size:22px; font-weight:900;
  color:#4b3b44; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.xlg-price small{margin-left:3px; font-size:11px; color:var(--muted, #6f5a64);}
.xlg-year{
  display:block; margin-top:4px; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64);
}
.xlg-note{margin:22px 0 0; font-size:11px; color:var(--muted, #6f5a64);}
.xlg-cta{margin:20px 0 0;}
.xlg-cta .xconn-btn{display:block; text-align:center; text-decoration:none;}

/* 特商法の表。項目名と値。 */
.xlg-dl{
  display:grid; grid-template-columns:auto 1fr; gap:0 16px; margin:0;
}
.xlg-dl dt{
  padding:11px 0; font-size:12px; font-weight:800; color:#4b3b44;
  border-top:1px solid #f3d9e6; white-space:nowrap;
}
.xlg-dl dd{
  margin:0; padding:11px 0; font-size:12px; font-weight:700;
  color:#6f5f67; line-height:1.9; border-top:1px solid #f3d9e6;
}
.xlg-dl dd.none{color:#c9658f;}
.xlg-warn{
  margin:0 0 18px; padding:11px 13px; border-radius:12px;
  background:#fdf1f6; color:#9c4a70; font-weight:800;
}

.xlg-nav{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:34px 16px 28px; padding-top:18px;
  border-top:1px solid #f3d9e6;
}
/* 枠の中に置いたときは、枠の余白に任せる。 */
.xconn-shell .xlg-nav, .app-shell > .xlg-nav{margin-left:0; margin-right:0;}
.xlg-nav a{font-size:11px; font-weight:700; color:var(--muted, #6f5a64); text-decoration:none;}



/* 運営の画面(2026-09-30)。x-connect.css の世界をそのまま使い、
   金額の並びだけ語彙を足す。接頭辞は .adm- -
   .xplan-* は pricing.html と意味の違う衝突を起こしているため、
   同じ名前空間を広げない。 */
.adm-money{
  display:grid; grid-template-columns:1fr auto; gap:12px 12px;
  align-items:baseline;
}
.adm-money-k{font-size:13px; font-weight:800; color:#6f5f67;}
.adm-money-v{
  font-size:18px; font-weight:800; color:#4b3b44; text-align:right;
  font-variant-numeric:tabular-nums; line-height:1.3;
}
.adm-money-v small{
  display:block; margin-top:3px; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64);
}
/* 差引は他の 2 つから出る数なので、線を 1 本引いて段を分ける。 */
.adm-money-net{
  margin-top:14px; padding-top:14px; border-top:1px solid #f3d9e6;
}
.adm-money-net .adm-money-v{font-size:22px; color:#c9658f;}
.adm-money-net.is-minus .adm-money-v{color:#c8496a;}

.adm-note{
  margin:14px 0 0; font-size:11px; font-weight:700; color:var(--muted, #6f5a64);
  line-height:1.8;
}

/* 申し込み 1 件のかたまり。上の行(誰が・何を)と下の操作をまとめる。 */
.adm-req{padding:14px 0; border-top:1px solid #f3d9e6;}
.adm-req:first-of-type{border-top:0; padding-top:2px;}
.adm-req:last-of-type{padding-bottom:2px;}
.adm-req .xplan-req{padding:0; border-top:0;}

.adm-pick{margin-top:11px;}
.adm-acts{display:flex; gap:8px; margin-top:10px;}
.adm-btn{
  flex:1 1 0; min-height:44px; padding:0 12px; border-radius:14px;
  border:1px solid #ebd3df; background:#fff; font-family:inherit;
  font-size:13px; font-weight:800; color:#6f5f67; cursor:pointer;
}
.adm-btn:active{opacity:.75;}
/* 割り当ては主たる操作なので面で塗る。見送りは縁取りのまま。 */
.adm-btn.is-primary{border-color:#de7fa6; background:#de7fa6; color:#fff;}
.adm-btn:focus-visible{
  outline:none; border-color:#de7fa6;
  box-shadow:0 0 0 3px rgba(222,127,166,.32);
}

/* 連携が無い相手(2026-09-30)。**払っているのに使えていない相手は、
   運営がいちばん先に気づくべき相手**なので、他の meta と同じ灰色には
   しない。差引が赤字のときと同じ色を使う。 */
.adm-unlinked{color:#c8496a; font-weight:800;}

/* 解約予定(2026-09-30)。未連携と同じ赤にはしない - あちらは
   「払っているのに使えていない」異常、こちらは予定どおりの変更。
   気づいてほしいが、慌てさせる必要は無い。 */
.adm-ending{
  display:block; margin-top:6px; font-size:11px; font-weight:800;
  color:#8a561c;
}

/* 累計の出入り(2026-10-01、ユーザー指示)。色は家計簿と同じ意味で使う -
   実費は支出の赤、入金は収入の青。運営はこの 2 画面を行き来するので、
   同じものを別の色にすると毎回読み替えることになる。
   数字は等幅(tabular-nums)。桁が揃わないと縦に読めない。 */
.adm-money{
  display:block; margin-top:6px; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64); font-variant-numeric:tabular-nums;
}
.adm-money b{font-weight:800;}
.adm-cost{color:var(--red, #b8453e);}
.adm-paid{color:#2f62b5;}
/* 差引がゼロ。色を持たせると「どちらでもない」が読めない。 */
.adm-flat{color:var(--muted, #6f5a64);}

/* いまのプラン(2026-09-30)。名前のすぐ横に置く - 誰が何のプランか
   を 1 行で読ませる。押せる見た目にはしない(ここでは変えられない)。 */
.adm-badge{
  display:inline-block; margin-left:8px; padding:2px 9px;
  border-radius:999px; border:1px solid #ecdfe6; background:#faf6f8;
  font-size:11px; font-weight:800; color:var(--muted, #6f5a64);
  vertical-align:middle; white-space:nowrap;
}
/* 有料だけ色を持たせる。無料が大半なので、目が有料に留まるようにする。 */
.adm-badge.is-paid{
  border-color:#f3d9e6; background:#fff0f6; color:#c9658f;
}

/* 全幅のセル(2026-09-30、ユーザー指示「横いっぱいセル」)。
   settings_x の .xconn-flush と同じ作法 - app-shell の左右 16px から
   抜けて列の端まで伸ばし、文字だけ内側へ寄せる。押せる面積を狭めない。 */
.adm-rows{
  margin:18px -16px 0; padding:0; background:#fff;
  border-top:1px solid #f3d9e6; border-bottom:1px solid #f3d9e6;
}
.adm-rows > .xplan-row,
.adm-rows > .adm-con{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-top:1px solid #f3d9e6;
  text-decoration:none; color:inherit;
}
.adm-rows > .xplan-row:first-of-type,
.adm-rows > .adm-con:first-of-type{border-top:0;}
.adm-rows > .xplan-row:active{opacity:.6;}
.adm-rows > .xplan-row > .xplan-who{flex:1 1 auto; min-width:0;}
.adm-rows > .xplan-row > .xrow-chev{flex:0 0 auto; color:var(--glyph, #8a7480);}
.adm-rows .xtbl-hint{padding:14px 16px; margin:0;}

/* 契約 1 件。左に誰と何を、右に金額。 */
.adm-con-who{flex:1 1 auto; min-width:0;}
.adm-con-name{
  display:block; font-size:14px; font-weight:800; color:#4b3b44;
  line-height:1.35;
}
.adm-con-meta{
  display:block; margin-top:3px; font-size:11px; font-weight:700;
  color:var(--muted, #6f5a64);
}
.adm-con-amount{
  flex:0 0 auto; font-size:15px; font-weight:800; color:#4b3b44;
  font-variant-numeric:tabular-nums; text-align:right;
}
.adm-con-amount small{
  display:block; margin-top:2px; font-size:10px; font-weight:700;
  color:var(--muted, #6f5a64);
}

/* 入金のリズム(2026-09-30、ユーザー指示「何日にお金が入るのか」)。
   金額より控えめ、けれど灰色の補足より強く - 運営が月の資金繰りを
   読むのに使う行なので、流し見で拾える濃さにする。 */
.adm-con-cycle{
  display:block; margin-top:4px; font-size:11px; font-weight:800;
  color:#6f5f67;
}
/* 決済が無い有料プラン。入金が無いので、金額と同じ顔をさせない。 */
.adm-con-cycle.is-none{color:#c8496a;}
/* 無料は金額の位置に置くが、数字ではないので弱くする。 */
.adm-con-free{font-size:12px; font-weight:800; color:var(--muted, #6f5a64);}
/* 契約の行も押せる(本人のページへ)。 */
.adm-rows > a.adm-con:active{opacity:.6;}

/* 消された店舗(2026-10-01)。未連携(赤=異常)とも解約予定(琥珀=予定)とも
   違う。**もう存在しない**という事実なので、色を持たせず沈める。
   ただし契約が生きていれば請求は続くので、隠しはしない。 */
.adm-gone{color:var(--muted, #6f5a64); font-weight:800;}