/* OKLIVE 配信サポートシステムの見た目（2026-10-27・JINEN「デザイン要件（フォント・カラー）」に合わせる）
   白基調・アクセントはピンク1系統。濃い色の背景（紫・黒）は使わない。
   文字：日本語は Noto Sans JP、数字・英字は Inter（数字は等幅）。値はここの変数で一括管理する。
   動きは style.css・design-system.css のまま。ここは見た目だけを上書きする（最後に読み込む）。 */
:root{
  /* フォント（差し替えるときはここだけ） */
  --font-ja:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --font-num:"Inter";
  /* 基本色（LPと共通） */
  --color-text:#2E2630;
  --color-text-sub:#6B6170;
  --color-accent:#C44E6C;
  --color-accent-light:#DC5F7E;
  --color-bg:#FFFFFF;
  --color-bg-soft:#FAF5F6;
  --color-bg-tint:#F4ECF4;
  --color-bg-blush:#F8E9EE;
  --color-border:#EADFE3;
  /* システム用 */
  --color-success:#3E8E6E;
  --color-warning:#B7791F;
  --color-error:#C0392B;
  --color-chart-1:#C44E6C;--color-chart-2:#DC5F7E;--color-chart-3:#F0A5B8;--color-chart-4:#9B7BB8;--color-chart-5:#B8AEBD;

  /* 既存の部品が使う名前を、上の色に寄せる */
  --font:var(--font-num),var(--font-ja);
  --round:var(--font-num),var(--font-ja);
  --bg:var(--color-bg);
  --card:var(--color-bg);
  --ink:var(--color-text);
  --sub:var(--color-text-sub);
  --line:var(--color-border);
  --line-strong:var(--color-border);
  --tint:var(--color-bg-soft);
  --accent:var(--color-accent);
  --accent-2:var(--color-accent);
  --accent-bright:var(--color-accent-light);
  --accent-soft:var(--color-bg-tint);
  --coral:var(--color-accent-light);
  --ok:var(--color-success);--ok-bg:#EAF4EF;
  --warn:var(--color-warning);--warn-bg:#FBF3E6;
  --ng:var(--color-error);--ng-bg:#FBEDEB;
  --danger:var(--color-error);
  --first:var(--color-accent-light);
  --shadow-xs:0 1px 2px rgba(46,38,48,.04);
  --shadow-sm:0 2px 8px rgba(46,38,48,.04);
  --shadow-md:0 12px 32px rgba(46,38,48,.10);
  --radius-sm:12px;--radius-md:16px;--radius-lg:16px;
  /* 古い名前（ほかの CSS が参照している） */
  --ok-purple:var(--color-accent);--ok-purple-deep:var(--color-accent);--ok-purple-ink:var(--color-text);
  --ok-pink:var(--color-accent);--ok-pink-deep:var(--color-accent);--ok-pink-light:var(--color-bg-blush);--ok-pink-pale:var(--color-bg-soft);
}

/* 文字 */
html{background:var(--color-bg)}
body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);font-size:14px;line-height:1.7;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
h1,h2,h3,h4{font-family:var(--font);color:var(--color-text)}
h1{font-size:22px;font-weight:500;line-height:1.4;letter-spacing:.04em}
h2{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:.04em}
h3,h4{font-size:15px;font-weight:700;line-height:1.4}
small,.muted{color:var(--color-text-sub)}
b,strong{font-weight:700}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent);text-decoration:underline}
::selection{background:var(--color-bg-blush)}
table,td,th{font-variant-numeric:tabular-nums}
td{font-size:14px}
th{font-size:12px;font-weight:500;color:var(--color-text-sub)}
@media (min-width:821px){
  body{font-size:15px}
  h1{font-size:24px}
  h2{font-size:20px}
  h3,h4{font-size:16px}
}

/* ボタン：メインはピンクのピル、サブは白にピンクの線 */
button,.btn{background:var(--color-accent);color:#fff;font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:.02em;border-radius:999px;min-height:48px;padding:10px 22px;border:1px solid var(--color-accent);box-shadow:none}
button:hover:not(:disabled),.btn:hover{background:var(--color-accent);filter:brightness(.94);box-shadow:none;text-decoration:none;color:#fff}
button:disabled{opacity:.45}
button.sub,.btn.sub{background:#fff;color:var(--color-accent);border:1px solid var(--color-accent)}
button.sub:hover:not(:disabled),.btn.sub:hover{background:var(--color-bg-blush);color:var(--color-accent);filter:none}
button.danger,.btn.danger{background:#fff;color:var(--color-error);border:1px solid var(--color-error)}
button.danger:hover:not(:disabled){background:var(--ng-bg);color:var(--color-error);filter:none}
.btn.pink,button.pink{background:var(--color-accent)}
button:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--color-bg-blush);outline-offset:2px}

/* 入力欄 */
input,select,textarea{background:#fff;border:1px solid var(--color-border);border-radius:12px;color:var(--color-text);font-family:var(--font);font-size:15px}
input:focus,textarea:focus,select:focus{border-color:var(--color-accent);box-shadow:none;outline:none}

/* カード */
.card{background:#fff;border:1px solid var(--color-border);border-radius:16px;box-shadow:var(--shadow-sm)}
.card.hero{background:var(--color-bg-soft);color:var(--color-text);border-color:var(--color-border);box-shadow:var(--shadow-sm)}
.card.hero::after{content:none}
.card.hero h1,.card.hero h2,.card.hero p{color:var(--color-text)}
.card.hero .btn{background:var(--color-accent);color:#fff}

/* タグ・バッジ */
.badge,.s-tag,.sc-tag,.hl-edit-state{background:var(--color-bg-blush);color:var(--color-accent);font-size:12px;font-weight:700;border-radius:999px;border:0;padding:2px 10px}
.badge.ok{background:#EAF4EF;color:var(--color-success)}
.badge.warn{background:var(--warn-bg);color:var(--color-warning)}
.badge.stop{background:var(--ng-bg);color:var(--color-error)}

/* お知らせ：エラーは色だけにせず印と文言を付ける */
.msg{border-radius:12px;font-size:14px}
.msg.ok{background:#EAF4EF;color:var(--color-success);border-color:transparent}
.msg.err{background:var(--ng-bg);color:var(--color-error);border-color:transparent}
.msg.err::before{content:"⚠ ";font-weight:700}
.msg.ok::before{content:"✓ ";font-weight:700}

/* ロゴ */
.brand-lockup{gap:8px;flex-direction:column;align-items:flex-start;width:auto;text-decoration:none}
.brand-lockup:hover{text-decoration:none}
.brand-logo{display:block;height:44px;width:auto}
.brand-tag{color:var(--color-text-sub);font-size:12px;letter-spacing:.14em;font-weight:500}
.brand-mark,.brand-copy{display:none}

/* 公開ページ（ログイン・登録・はじめに） */
.public-page{background:var(--color-bg-soft)}
.public-page .card{border-color:var(--color-border)}

/* トップ */
.landing-hero h1{color:var(--color-text);font-weight:500}
.landing-hero h1 span{color:var(--color-accent)}
.landing-panel{background:var(--color-bg-soft);color:var(--color-text);border:1px solid var(--color-border)}
.landing-panel .pulse{color:var(--color-accent)}
.landing-panel p,.landing-panel h2,.landing-panel h3{color:var(--color-text)}

/* サイドバー：白地にロゴ、選ばれている項目は淡い色の背景で示す */
.side{background:var(--color-bg-soft);color:var(--color-text);border-right:1px solid var(--color-border)}
.side .brand{padding:2px 10px 16px;min-height:0;border-bottom:1px solid var(--color-border)}
.side .brand::before{content:none}
.side .brand .side-logo{display:block;width:100%;max-width:170px;height:auto;margin:0 0 12px}
.side .brand .kicker{display:none}
.side .brand .name{color:var(--color-text);font-weight:500;letter-spacing:.04em;font-size:16px}
.side .brand .sub{color:var(--color-text-sub);font-size:12px}
.side nav a{color:var(--color-text-sub);font-weight:500;border:0;font-size:15px}
.side nav a:hover{background:#fff;color:var(--color-text);text-decoration:none}
.side nav a.active{background:var(--color-bg-tint);color:var(--color-accent);font-weight:700;box-shadow:none}
.side nav a .ic{color:inherit}
.side nav .sec{color:var(--color-text-sub);font-size:12px;font-weight:500}
.side .foot{color:var(--color-text-sub);border-top:1px solid var(--color-border);font-size:12px}
.side .foot button{background:#fff;color:var(--color-accent);border:1px solid var(--color-border);font-weight:700;font-size:14px;min-height:40px;border-radius:999px;text-align:center}
.side .foot button:hover:not(:disabled){background:var(--color-bg-blush);filter:none}

/* タブ（選んでいるものは背景色で示す） */
.rec-tabs button,.tabs button{background:#fff;color:var(--color-text-sub);border:1px solid var(--color-border);min-height:40px;font-size:14px}
.rec-tabs button.on,.tabs button.on{background:var(--color-bg-tint);color:var(--color-accent);border-color:transparent}

/* 表 */
thead,thead tr{background:var(--color-bg-soft)}
tr{border-color:var(--color-border)}
td.num,th.num{text-align:right}

/* 数字のタイル：主要指標は大きな数字（Inter・ピンク）、単位は本文色 */
.rec-tiles{background:var(--color-bg-soft)}
.rec-tile,.s-tiles .rec-tile{background:#fff;border:1px solid var(--color-border);border-radius:12px}
.rec-tile .v{font-family:var(--font);font-weight:600;color:var(--color-text);font-variant-numeric:tabular-nums}
.rec-tile .v small{color:var(--color-text);font-weight:400}
.rec-tile .l{font-size:12px;color:var(--color-text-sub)}
.s-tiles .rec-tile .v{font-size:24px;color:var(--color-text)}
/* 目立たせる数字は1つだけ（最初のタイル） */
.s-tiles .rec-tile:first-child .v{font-size:32px;line-height:1.2;color:var(--color-accent-light)}

/* グラフ */
.rec-chart .bar,.s-chart .bar{fill:var(--color-chart-1)}
.rec-chart .base,.s-chart .base{stroke:var(--color-border)}
.rec-chart .ax{font-size:12px}
.s-chart .hlband{fill:var(--color-bg-blush)}
.s-chart .jdot{fill:var(--color-chart-4)}
.s-chart .gift{fill:var(--color-chart-2);font-size:12px}

/* 一覧・切り抜き */
.s-filter,.hl-edit,.billing-grid{background:var(--color-bg-soft)}
.sc{border-color:var(--color-border);background:#fff}
.sc:hover{border-color:var(--color-accent-light)}
.sc.live,.s-live-card{background:var(--color-bg-tint);border-color:transparent}
.sc-nums div,.sc-nums{background:var(--color-bg-soft)}
.sc-nums span{font-size:12px}
.backlink:hover{background:var(--color-bg-blush)}
.hl{background:#fff;border:1px solid var(--color-border);border-radius:16px}
.hl-top{outline:0;border:1px solid var(--color-accent-light);background:var(--color-bg-tint)}
.hl-badge,.hl-badge.battle{background:var(--color-bg-blush);color:var(--color-accent);font-size:12px;font-weight:700}
.hl-summary b{color:var(--color-text)}

/* 速度・BGMのモーダル */
dialog.ce::backdrop{background:rgba(46,38,48,.35)}
.ce-seg{background:var(--color-bg-soft)}
.ce-seg button{background:transparent;color:var(--color-text-sub);border:0;font-weight:500}
dialog.ce .ce-seg button.on,dialog.ce .ce-seg button.on:hover,dialog.ce .ce-seg button.on:focus{background:var(--color-bg-tint);color:var(--color-accent);font-weight:700;box-shadow:none}
.ce-seg button.on::before{color:var(--color-accent)}
.ce-file{border-color:var(--color-border);color:var(--color-accent)}
.ce-file:hover,.ce-file.on{border-color:var(--color-accent);background:var(--color-bg-blush)}
.ce-x,dialog.ce .ce-link{min-height:0;border:0;background:none;border-radius:10px;padding:6px 10px;font-weight:500;text-decoration:none}
dialog.ce .ce-link:hover{text-decoration:underline}
.ce-spin{border-color:var(--color-bg-blush);border-top-color:var(--color-accent)}

/* スマホ：上の帯も白地に */
@media (max-width:820px){
  body.liver .side,body.admin .side{border-right:0}
  body.liver .side .brand,body.admin .side .brand{background:#fff;align-items:center;border-bottom:1px solid var(--color-border);padding-left:14px}
  body.liver .side .brand .side-logo,body.admin .side .brand .side-logo{height:24px;width:auto;max-width:none;margin:0 8px 0 0;flex:none}
  body.liver .side nav,body.admin .side nav{background:#fff;border-top:1px solid var(--color-border);box-shadow:0 -4px 16px rgba(46,38,48,.06)}
  body.liver .side nav a,body.admin .side nav a{color:var(--color-text-sub);font-size:12px}
  body.liver .side nav a.active,body.admin .side nav a.active{color:var(--color-accent);background:var(--color-bg-tint);box-shadow:none}
  body.admin .side .foot button{font-size:12px;min-height:34px}
  .admin-person-stats span{font-size:12px}
  .page-h .row .btn,.page-h .row button{white-space:nowrap;font-size:14px;padding:8px 16px;min-height:44px}
}
@media (max-width:420px){
  body.admin .side .brand .name{display:none}
}
@media (max-width:640px){
  .brand-logo{height:36px}
}

/* 分析と予測（ライバーの画面から開く単独ページ） */
.analysis-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 18px}
.analysis-logo{height:40px;width:auto}

/* トップ：公開ページ用の細い幅（520px）を受け継がないように */
.landing-page{display:block;place-items:initial}
.landing-page .wrap{width:min(100%,1180px);max-width:1180px;margin:0 auto}
.landing-top .brand-lockup{margin:0}

/* 費用の目安 */
#v-costs th.num,#v-costs td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#v-costs details summary{cursor:pointer}
#costRates .row input[type=number]{flex:0 0 130px;width:130px;min-width:0}
#costRates .row input[type=text]{flex:1 1 280px;max-width:420px}
#costRates .row label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* スパファンのお礼文の編集欄（入力欄とプレビューを見た目で分ける・2026-10-28） */
.sf-editor .sf-title{margin:0 0 4px;font-size:17px}
.sf-editor .sf-help{margin:0 0 12px}
.sf-editor .sf-label{display:block;font-weight:700;font-size:14px;margin:0 0 6px;color:var(--color-text)}
.sf-editor .sf-input{width:100%;min-height:110px;padding:12px 14px;font-size:16px;overflow:hidden;background:#fff;border:1.5px solid var(--color-accent-light);border-radius:12px;line-height:1.7;resize:vertical}
.sf-editor .sf-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(196,78,108,.15)}
.sf-editor .sf-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.sf-editor .sf-note{font-size:13px}
.sf-editor .sf-preview{margin-top:16px;border-radius:12px;background:var(--color-bg-soft);border:1px dashed var(--color-border);padding:12px 14px}
.sf-editor .sf-preview-label{font-size:12px;font-weight:700;color:var(--color-text-sub);margin-bottom:6px}
.sf-editor .sf-preview-body{font-size:15px;line-height:1.7;color:var(--color-text);white-space:normal;word-break:break-word}
.sf-editor .sf-preview-body mark{background:var(--color-bg-blush);color:var(--color-accent);font-weight:700;padding:0 3px;border-radius:4px}
/* スマホ：保存ボタンを指で押しやすい幅に（iPhone で入力欄を押したときに拡大されないよう、入力欄は 16px） */
@media (max-width:640px){
  .sf-editor .sf-save{width:100%}
  .sf-editor .sf-tools button{width:100%}
}