/* Red Reborn — サイト共通スタイル
   画面構成は rseo.xyz の形（左サイドバー＋メイン）を踏襲し、
   配色は Red Reborn 既存サイトのものを引き継いでいる。 */

:root{
  --bg:#12100f;
  --side:#191513;
  --panel:#1c1917;
  --row:#241f1c;
  --row-hi:#2c2521;
  --line:#2f2a26;
  --fg:#eee7e0;
  --muted:#a49a91;
  --accent:#c8412f;
  --accent-lo:#e0705c;
  --accent2:#e8b45a;
  --sidebar-w:250px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-lo); text-decoration:none}
a:hover{color:var(--accent2)}

/* ---------- レイアウト ---------- */
.layout{display:flex; min-height:100%}

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--side); border-right:1px solid var(--line);
  padding:20px 16px 24px; position:sticky; top:0; align-self:flex-start;
  min-height:100vh; display:flex; flex-direction:column;
}
.brand{
  display:block; text-align:center; font-weight:700; font-size:1.05rem;
  letter-spacing:.1em; color:var(--fg); padding-bottom:16px;
}
.brand:hover{color:var(--accent2)}
.brand small{display:block; font-size:.62rem; letter-spacing:.24em; color:var(--muted); font-weight:400; margin-top:2px}
.user-id{
  text-align:center; font-weight:700; font-size:.95rem; padding:10px 0 14px;
  border-top:1px solid var(--line); color:var(--fg); word-break:break-all;
}
.user-id span{color:var(--accent2)}
.nav{display:flex; flex-direction:column}
.nav a{
  display:block; text-align:center; padding:11px 8px; font-size:1rem;
  border-bottom:1px solid var(--line); color:var(--accent-lo);
}
.nav a:first-child{border-top:1px solid var(--line)}
.nav a:hover{background:var(--row); color:var(--accent2)}
.nav a.active{background:var(--row); color:var(--fg); font-weight:700; box-shadow:inset 3px 0 0 var(--accent)}
.sidebar .spacer{flex:1 1 auto; min-height:24px}
.sidebar .foot{text-align:center}
.sidebar .foot a{display:block; padding:10px 0; font-size:.95rem}

.main{flex:1 1 auto; min-width:0; padding:28px 24px 72px}
.container{max-width:1080px; margin:0 auto}

h1.page-title{
  margin:8px 0 30px; text-align:center; font-weight:700;
  font-size:clamp(2rem,4.6vw,3.4rem); letter-spacing:.04em;
  background:linear-gradient(180deg,#f3e6d8,var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1.page-title a{background:inherit; -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- 上部の切り替えボタン ---------- */
.links{display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin:0 0 22px}
.links a,.links .pick{
  flex:1 1 240px; max-width:340px; text-align:center;
  background:var(--row); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; font-size:1.05rem; color:var(--accent-lo); cursor:pointer;
  transition:background .12s, transform .12s, border-color .12s;
}
.links a:hover,.links .pick:hover{background:var(--row-hi); border-color:var(--accent); transform:translateY(-1px)}
.links a.active,.links .pick.active{background:var(--row-hi); border-color:var(--accent); color:var(--fg); font-weight:700}

/* 押せないボタンは、押せないと分かる見た目にする */
.btn:disabled,.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--row); border-color:var(--line); transform:none}
.btn-primary:disabled:hover{background:linear-gradient(180deg,#d24a35,#a8321f)}

hr.divider{border:0; border-top:1px solid var(--line); margin:34px auto 30px; max-width:1000px}

/* お知らせ本文の見出しは h1（各ページに h1 が 1 つも無かった・2026-09-09）。見た目は h2 と同じ */
h1.section,h2.section{text-align:center; font-size:1.35rem; letter-spacing:.06em; margin:0 0 20px}

/* ---------- お知らせ一覧 ---------- */
.updates ul{list-style:none; margin:0; padding:0}
.update-item{margin-bottom:12px}
.update-link{
  display:flex; align-items:center; gap:16px; color:inherit;
  background:var(--row); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px;
  transition:background .12s, border-color .12s;
}
.update-link:hover{background:var(--row-hi); border-color:var(--accent); color:inherit}
.update-tag{
  flex:0 0 auto; min-width:3.6em; text-align:center; font-weight:700; font-size:.9rem;
  padding-right:14px; border-right:1px solid var(--line); color:var(--accent-lo);
}
.update-item.important .update-tag{color:var(--accent2)}
.update-title{flex:1 1 auto; text-align:center; color:var(--accent-lo); min-width:0}
.update-link:hover .update-title{color:var(--accent2)}
.update-date{
  flex:0 0 auto; font-size:.85rem; color:var(--muted);
  padding-left:14px; border-left:1px solid var(--line); font-variant-numeric:tabular-nums;
}

.pagination{display:flex; justify-content:center; gap:8px; margin-top:24px; flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:40px; text-align:center; padding:7px 10px; border-radius:8px;
  background:var(--row); border:1px solid var(--line); font-size:.95rem;
}
.pagination a:hover{background:var(--row-hi); border-color:var(--accent)}
.pagination .current{background:var(--row-hi); border-color:var(--accent); color:var(--fg); font-weight:700}
.pagination .disabled{color:#5c534c}

/* ---------- パネル（サーバー情報など） ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:22px 26px; margin:0 0 18px;
}
/* 🔴 **文字色に --accent(#c8412f) を使わない**（2026-09-09）。
   panel の上で 3.54:1、row の上で 3.30:1 しかなく、小さい字（.ng の警告など）が読みにくい。
   文字は --accent-lo(#e0705c・5.5:1) を使う。--accent は枠線と背景だけに残す。 */
.panel h3{margin:26px 0 12px; color:var(--accent-lo); font-size:1.2rem; letter-spacing:.04em}
.panel h3:first-child{margin-top:0}
.panel ul{padding-left:1.2em; margin:.3em 0}
.panel li{margin:.4em 0}
.panel li ul{margin:.25em 0 .4em; color:var(--muted); font-size:.95rem}
.panel p{margin:.4em 0}

table.spec{width:100%; border-collapse:collapse}
table.spec th,table.spec td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line)}
table.spec th{color:var(--muted); font-weight:600; width:34%; white-space:nowrap}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
table.spec td.actions{white-space:nowrap; text-align:right; width:1%}
/* 狭い画面では表だけ横に逃がす（ページ全体を横スクロールさせない） */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

code{
  background:#241f1c; border:1px solid var(--line); border-radius:5px;
  padding:.12em .45em; font-size:.9em; color:var(--accent2);
  font-family:Consolas,"Courier New",monospace;
}
.note{
  border-left:3px solid var(--accent2); background:rgba(232,180,90,.07);
  padding:14px 18px; border-radius:0 8px 8px 0; margin:18px 0; font-size:.93rem;
}
.note b{color:var(--accent2)}
.warn{border-left-color:var(--accent); background:rgba(200,65,47,.09)}
.warn b{color:var(--accent-lo)}
/* 成功のフラッシュ（登録完了・ログアウトなど）。注意の琥珀と見分けがつくように緑 */
.note.ok{border-left-color:#5fb36a; background:rgba(95,179,106,.09)}
.note.ok b{color:#8fd39a}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block; text-align:center; padding:15px 26px; border-radius:10px;
  background:var(--row); border:1px solid var(--line); color:var(--accent-lo);
  font-size:1.05rem; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, transform .12s;
}
.btn:hover{background:var(--row-hi); border-color:var(--accent); transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(180deg,#d24a35,#a8321f); border-color:#e06a55;
  color:#fff; font-weight:700; box-shadow:0 6px 22px rgba(200,65,47,.28);
}
.btn-primary:hover{background:linear-gradient(180deg,#e0553f,#b83824); color:#fff}
.btn-stack{display:flex; flex-direction:column; align-items:center; gap:14px; margin:6px 0 22px}
.btn-stack .btn{width:100%; max-width:380px}
.btn-sub{display:block; font-size:.8rem; color:var(--muted); font-weight:400; margin-top:6px; white-space:normal; line-height:1.5}
.btn-primary .btn-sub{color:rgba(255,255,255,.82)}

.back-btn{
  position:fixed; right:26px; bottom:26px; z-index:40;
  padding:11px 24px; border-radius:24px;
  background:var(--accent); border:1px solid var(--accent-lo); color:#fff;
  font-weight:700; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.back-btn:hover{background:#d94f3b; color:#fff}

/* ---------- フォーム ---------- */
.form-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:26px 28px; max-width:480px; margin:0 auto;
}
.form-card.wide{max-width:620px}
.field{margin-bottom:18px}
.field label{display:block; margin-bottom:6px; font-size:.95rem}
.field .hint{display:block; color:var(--muted); font-size:.82rem; margin-top:5px; line-height:1.6}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=datetime-local],select,textarea{
  width:100%; padding:11px 13px; border-radius:8px;
  background:var(--row); border:1px solid var(--line); color:var(--fg);
  font-family:inherit; font-size:1rem;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)}

/* パスワードの表示切替（site.js が入力欄をこれで包む・2026-09-09）。
   ゲームパスワードは打ち間違いを確かめる手段が他に無い。 */
.pw-wrap{position:relative; display:block}
.pw-wrap input[type=password],.pw-wrap input[type=text]{padding-right:64px}
.pw-eye{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:5px 9px; border-radius:6px;
  color:var(--muted); font-family:inherit; font-size:.82rem; cursor:pointer;
}
.pw-eye:hover{color:var(--fg); background:var(--row-hi)}
.pw-eye:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
textarea{min-height:120px; resize:vertical}
.form-card .btn{width:100%; margin-top:6px}
.form-links{text-align:center; margin-top:18px; font-size:.92rem}

footer.site{
  text-align:center; color:var(--muted); font-size:.82rem;
  padding:36px 20px 8px; margin-top:56px; border-top:1px solid var(--line);
}

/* ---------- ハンバーガー（狭い画面） ---------- */
#hamburger{
  display:none; position:fixed; top:12px; left:12px; z-index:60;
  width:44px; height:44px; border-radius:10px; cursor:pointer;
  background:var(--row); border:1px solid var(--line); color:var(--fg);
  font-size:1.3rem; line-height:1;
}
#overlay{
  display:none; position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.6);
}

@media (max-width:900px){
  #hamburger{display:block}
  #overlay.open{display:block}
  .sidebar{
    position:fixed; top:0; left:0; z-index:50; height:100vh;
    padding-top:64px;                 /* ハンバーガーの下に潜らせない */
    overflow-y:auto;
    transform:translateX(-100%); transition:transform .2s ease;
  }
  .sidebar.open{transform:translateX(0)}
  .main{padding:64px 16px 60px}
  .update-item{flex-wrap:wrap; gap:8px 12px}
  .update-title{flex:1 1 100%; order:3; text-align:left}
  .update-date{margin-left:auto; border-left:0; padding-left:0}
}

/* お知らせの帯（flash）*/
.note.flash{max-width:820px;margin:0 auto 22px}


/* ---------- 職業改変（RSEO の表の作りに寄せる）---------- */
.jobnav{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  max-width:1000px; margin:22px auto 0;
}
.jobnav a{
  padding:8px 16px; border-radius:8px; font-size:.92rem; white-space:nowrap;
  background:var(--row); border:1px solid var(--line); color:var(--accent-lo);
}
.jobnav a:hover{background:var(--row-hi); border-color:var(--accent)}
.jobnav a.active{background:var(--accent); border-color:var(--accent-lo); color:#fff; font-weight:700}

.chg-legend{
  display:inline-block; padding:1px 8px; border-radius:4px; font-size:.85em;
  background:rgba(200,65,47,.28); color:var(--fg); border:1px solid var(--accent);
}

/* SLv 12 列ぶんの幅が要るので、このページだけ本文を広げる */
body[data-page="jobs"] .container{max-width:1360px}
.skills{max-width:1360px; margin:0 auto}
.skills .table-wrap{margin-bottom:22px; border:1px solid var(--line); border-radius:10px}

/* SLv が 12 列あるので、収まるように詰める（はみ出すと横スクロールになって読みにくい）*/
table.sk{width:100%; border-collapse:collapse; font-size:.78rem; background:var(--panel)}
table.sk th,table.sk td{
  border:1px solid var(--line); padding:4px 5px; text-align:center;
  font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.35;
}

/* スキル名の帯 */
table.sk tr.sk-name th{
  background:#2a2320; color:var(--accent2); font-size:1rem; font-weight:700;
  letter-spacing:.04em; padding:9px 10px; text-align:center; width:auto;
}
/* SLv の行 */
table.sk tr.sk-lv th{background:var(--row-hi); color:var(--muted); font-weight:600}

/* 左の項目名 */
table.sk tbody th,table.sk tr th:first-child{
  background:var(--row); color:var(--fg); text-align:left; font-weight:600;
  width:7.5em; min-width:7.5em; line-height:1.25; padding:4px 7px;
  /* 横スクロール中も行ラベルが見えるように留める（背景は透過させない） */
  position:sticky; left:0; z-index:1;
}
table.sk tr.sk-before th span,table.sk tr.sk-after th span{
  display:block; font-size:.8em; font-weight:400; line-height:1.2;
}

/* 変わっていない行 */
table.sk tr.sk-same td{color:var(--muted)}
/* 変更前は沈める / 変更後は目立たせる */
table.sk tr.sk-before td{background:rgba(255,255,255,.03); color:var(--muted)}
table.sk tr.sk-before th span{color:var(--muted)}
table.sk tr.sk-after td{background:rgba(200,65,47,.22); color:var(--fg); font-weight:700}
table.sk tr.sk-after th{background:#3b241f}
table.sk tr.sk-after th span{color:var(--accent-lo); font-weight:700}
table.sk td.none{color:#6b615a}
table.sk tr.sk-note td{background:rgba(200,65,47,.10); color:var(--fg); text-align:left; padding:8px 12px; line-height:1.6; white-space:normal}
table.sk .sk-id{font-size:.72em; color:var(--muted); font-weight:400}

@media (max-width:900px){
  table.sk{font-size:.72rem}
  table.sk th,table.sk td{padding:3px 4px}
  table.sk tbody th,table.sk tr th:first-child{width:6em; min-width:6em}
}

/* ---------------- 仕様の箇条書き（ホームの「サーバー情報」「その他仕様」）----------------
   RSEO と同じ入れ子: 大項目 ・ / 説明 ┗ / 細目 -
   記号は文字ではなく ::marker で描く（コピーしたときに記号が付いてこない）*/
.speclist,.speclist ul{list-style:none; padding-left:0; margin:.3em 0}
.speclist > li{
  position:relative; padding-left:1.1em; margin:.85em 0;
  color:var(--fg); font-weight:600;
}
.speclist > li::before{content:"・"; position:absolute; left:-.05em; color:var(--accent)}
.speclist > li:first-child{margin-top:0}

/* ┗ の行（大項目の言い換え）*/
.speclist ul.lead{margin:.3em 0 .45em}
.speclist ul.lead > li{
  position:relative; padding-left:1.5em; color:var(--fg); font-weight:400;
}
.speclist ul.lead > li::before{content:"┗"; position:absolute; left:0; color:var(--muted)}

/* - の行（細目）*/
.speclist ul:not(.lead) > li{
  position:relative; padding-left:1.5em; margin:.3em 0;
  color:var(--muted); font-weight:400; font-size:.95rem;
}
.speclist ul:not(.lead) > li::before{content:"-"; position:absolute; left:.35em; color:var(--muted)}

/* ---------------- パネルの中に置く表（刻印・分解）---------------- */
.panel .table-wrap{
  border:1px solid var(--line); border-radius:10px; margin:.6em 0 1.4em; background:var(--panel);
}
/* 列が 4〜5 本しかないので、職業改変の詰めた見た目より少しゆったりさせる */
table.sk.carve{font-size:.86rem}
table.sk.carve th,table.sk.carve td{padding:6px 9px}
table.sk.carve tbody th,table.sk.carve tr th:first-child{width:13em; min-width:13em}

@media (max-width:900px){
  table.sk.carve{font-size:.78rem}
  table.sk.carve tbody th,table.sk.carve tr th:first-child{width:9em; min-width:9em}
}

/* 🔴 見出し行の 2 列目以降は中央へ戻す。
   `table.sk tbody th` の左寄せ・幅指定は「行の左端の項目名」向けだが、
   thead を使っていないので見出し行の th まで拾ってしまう。 */
table.sk tr.sk-lv th:not(:first-child){text-align:center; width:auto; min-width:0}

/* ---------------- 管理画面（公式サイトからは辿れない）---------------- */
.adm-cards{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:0 0 22px;
}
.adm-cards > div{
  min-width:130px; padding:14px 18px; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
}
.adm-cards b{display:block; font-size:1.7rem; line-height:1.1; color:var(--fg)}
.adm-cards span{display:block; margin-top:4px; font-size:.78rem; color:var(--muted)}
.adm-cards > div.warn b{color:var(--accent-lo)}

.adm-search{display:flex; gap:10px; justify-content:center; margin:0 0 14px; flex-wrap:wrap}
.adm-search input{
  width:min(420px,70vw); padding:9px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--row); color:var(--fg);
}

/* 一覧はデータなので左寄せ。職業改変の中央寄せは数値表向け */
table.sk.adm{font-size:.82rem}
table.sk.adm th,table.sk.adm td{padding:6px 9px; text-align:center}
table.sk.adm td.l{text-align:left}
table.sk.adm tbody th,table.sk.adm tr th:first-child{width:auto; min-width:0; text-align:center}
table.sk.adm .btn{padding:3px 10px; font-size:.78rem}

/* ゲームID ごとの操作 */
.adm-gid{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:.6em 0 1em; background:var(--panel)}
.adm-gid-head{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:4px}
.adm-gid-head b{font-size:1.05rem}
.adm-gid-head .ng{color:var(--accent-lo); font-size:.8rem; font-weight:700}
.adm-gid-head .ok{color:#6fbf73; font-size:.8rem; font-weight:700}
.spec .ng, td .ng{color:var(--accent-lo)}
.adm-acts{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px}
.adm-acts form{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.adm-acts input,.adm-acts select{
  padding:6px 9px; border-radius:7px; border:1px solid var(--line);
  background:var(--row); color:var(--fg); font-size:.85rem;
}

/* ゲームID ごとのキャラクター */
.adm-chars{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.adm-char{
  padding:5px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--row); font-size:.85rem;
}
.adm-char b{margin-right:6px}
.adm-char .muted{font-size:.78rem}
.adm-char.del{opacity:.5; text-decoration:line-through}

/* ---------------- 寄付の受信箱（admin_inbox.php）---------------- */
.badge{
  display:inline-block; padding:2px 9px; border-radius:6px; font-size:.8rem; font-weight:700;
  border:1px solid var(--line); background:var(--row); color:var(--fg);
}
.badge.st0{color:var(--accent2); border-color:var(--accent2)}
.badge.st1{color:#6fbf73; border-color:#6fbf73}
.badge.st2{color:var(--muted)}
.badge.st3{color:var(--muted); text-decoration:line-through}
table.sk.inbox td{white-space:normal; vertical-align:top}
table.sk.inbox tr.st1 td,table.sk.inbox tr.st3 td{color:var(--muted)}
table.sk.inbox tr.st0 th{color:var(--accent2)}
.inbox-mark{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px}
.inbox-mark select,.inbox-mark input{
  padding:5px 8px; border-radius:7px; border:1px solid var(--line);
  background:var(--row); color:var(--fg); font-size:.8rem; width:auto;
}
.inbox-mark input[type=text]{width:170px}

/* ---------------- 問い合わせ一覧: ホバーで全文（admin_tickets.php）----------------
   .table-wrap が overflow:auto なので absolute だと切れる。fixed にして JS で位置を決める */
td.tk-body{cursor:help}
td.tk-body .tk-tip{
  display:none; position:fixed; z-index:70;
  width:min(560px, 80vw); max-height:60vh; overflow:auto;
  padding:12px 14px; text-align:left; white-space:pre-wrap; line-height:1.6; font-size:.9rem;
  background:var(--panel); color:var(--fg); border:1px solid var(--accent); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
td.tk-body .tk-tip.on{display:block}
td.tk-body .tk-tip-head{color:var(--accent2); font-weight:700; margin-bottom:6px; font-size:.85rem}

/* ---------------- ロードマップ（roadmap.php・2026-09-12）----------------
   縦のレール＋段ごとのカード。文字色は --accent-lo / --accent2 / --muted だけ（--accent は線と背景）。 */
.rm-summary{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 20px}
.rm-summary a{
  display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  transition:transform .15s, border-color .15s;
}
.rm-summary a:hover{transform:translateY(-2px); border-color:#4a3f38}
.rm-summary .n{font-size:1.9rem; font-weight:700; line-height:1.1}
.rm-summary .l{font-size:.85rem; color:var(--muted); margin-top:2px}
.rm-summary .now .n{color:var(--accent-lo)}
.rm-summary .next .n{color:var(--accent2)}
.rm-summary .future .n{color:#d9c9a8}
.rm-summary .watch .n{color:#7fb37a}

.rm-legend{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:0 0 22px; font-size:.82rem; color:var(--muted)}
.rm-legend span::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle}
.rm-legend .now::before{background:var(--accent)}
.rm-legend .next::before{background:var(--accent2)}
.rm-legend .future::before{background:#d9c9a8; opacity:.6}
.rm-legend .watch::before{background:#7fb37a}
.rm-legend .drop::before{background:var(--muted)}

.rm{position:relative; padding-left:34px}
.rm::before{content:""; position:absolute; left:11px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg,var(--accent) 0,var(--accent2) 30%,var(--line) 70%,var(--line) 100%)}
.rm-stage{position:relative; margin:0 0 22px}
.rm-stage::before{content:""; position:absolute; left:-30px; top:14px; width:12px; height:12px; border-radius:50%;
  background:var(--line); border:2px solid var(--bg); box-shadow:0 0 0 2px var(--line)}
.rm-stage.now::before{background:var(--accent); box-shadow:0 0 0 2px var(--accent); animation:rm-pulse 1.8s ease-in-out infinite}
.rm-stage.next::before{background:var(--accent2); box-shadow:0 0 0 2px var(--accent2)}
.rm-stage.watch::before{background:#7fb37a; box-shadow:0 0 0 2px #7fb37a}
.rm-stage.drop::before{background:var(--bg); box-shadow:0 0 0 2px var(--muted)}
@keyframes rm-pulse{
  0%,100%{box-shadow:0 0 0 2px var(--accent),0 0 8px rgba(200,65,47,.4)}
  50%{box-shadow:0 0 0 2px var(--accent),0 0 18px rgba(200,65,47,.9)}
}
@media (prefers-reduced-motion:reduce){.rm-stage.now::before{animation:none}}

.rm-stage .hd{display:flex; align-items:center; gap:12px; margin:0 0 10px}
.rm-stage .hd h2{margin:0; font-size:1.25rem; letter-spacing:.05em}
.rm-badge{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em; padding:3px 9px; border-radius:999px; border:1px solid}
.rm-badge.now{color:var(--accent-lo); border-color:var(--accent); background:rgba(200,65,47,.12)}
.rm-badge.next{color:var(--accent2); border-color:var(--accent2); background:rgba(232,180,90,.10)}
.rm-badge.future{color:#d9c9a8; border-color:#5a4d40; background:rgba(232,180,90,.05)}
.rm-badge.watch{color:#7fb37a; border-color:#7fb37a; background:rgba(127,179,122,.10)}
.rm-badge.drop{color:var(--muted); border-color:var(--line); background:transparent}

.rm-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:0 0 10px;
}
.rm-card.now{border-left:3px solid var(--accent)}
.rm-card.next{border-left:3px solid var(--accent2)}
.rm-card.drop{opacity:.7}
.rm-card.drop .t{color:var(--muted)}
.rm-card .t{font-weight:700; font-size:1.05rem; margin:0 0 4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rm-card .t .tag{font-size:.7rem; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:1px 7px; letter-spacing:.06em}
.rm-card .t .tag.ok{color:#7fb37a; border-color:rgba(127,179,122,.5)}
.rm-card p{margin:.3em 0; color:var(--muted); font-size:.95rem}
.rm-card ul{margin:.4em 0 0; padding-left:1.2em}
.rm-card li{margin:.3em 0}
.rm-card li b{color:var(--fg)}
.rm-card .note{margin-top:10px; padding:10px 12px; background:var(--row); border-radius:8px; font-size:.9rem; color:var(--muted)}

.rm-prog{display:flex; align-items:center; gap:10px; margin:8px 0 2px; font-size:.8rem; color:var(--muted)}
.rm-prog .bar{flex:1; height:6px; background:var(--row); border-radius:3px; overflow:hidden}
.rm-prog .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:3px}

.rm-chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px}
.rm-chip{background:var(--row); border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:.95rem;
  display:flex; align-items:center; gap:10px; transition:background .15s, transform .15s}
.rm-chip:hover{background:var(--row-hi); transform:translateY(-1px)}
.rm-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent2); opacity:.7; flex:none}
.rm-chip.fix::before{background:var(--accent-lo)}
.rm-chips-key{margin-top:12px; font-size:.85rem; color:var(--muted)}
.rm-chips-key i{display:inline-block; width:7px; height:7px; border-radius:50%; margin:0 4px 0 8px; vertical-align:middle}

@media (max-width:720px){
  .rm-summary{grid-template-columns:repeat(2,1fr)}
  .rm{padding-left:26px}
  .rm::before{left:7px}
  .rm-stage::before{left:-24px}
  .rm-card{padding:14px 16px}
}