/* TOKO v2 — premium dark */
:root{
  --bg:#0a0b0f; --bg2:#101218; --card:#15171f; --card2:#1b1e28;
  --line:#262a36; --fg:#eef0f5; --mut:#8b91a0;
  --acc:#6d7cff; --acc2:#a06bff; --grad:linear-gradient(135deg,#6d7cff,#a06bff);
  --ok:#2dd47f; --warn:#f5b832; --bad:#ff5d6c;
  --r:16px; --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--acc);text-decoration:none}
b{font-weight:700}
.mut{color:var(--mut)}.small{font-size:12px}.center{text-align:center}
.grow{flex:1;min-width:0}.row{display:flex;gap:10px;align-items:center;margin-top:12px}
.up{color:var(--ok)}.down{color:var(--bad)}
.link{font-size:13px}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:20;background:rgba(10,11,15,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.logo{font-weight:800;font-size:18px;letter-spacing:1px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{font-size:11px;color:var(--mut);-webkit-text-fill-color:var(--mut);margin-left:6px;letter-spacing:0}

.seg{display:flex;margin-left:auto;background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:3px;gap:2px}
.seg a{padding:5px 14px;border-radius:99px;font-size:13px;color:var(--mut);font-weight:600}
.seg a.on{background:var(--grad);color:#fff;box-shadow:0 2px 8px rgba(109,124,255,.4)}

/* ---- 再読み込みボタン(常設・2026-07-09) ---- */
.reload-btn{margin-left:auto;flex:none;min-width:36px;height:36px}
.seg + .reload-btn{margin-left:8px}
.reload-btn:active svg{transform:rotate(210deg);transition:transform .35s ease}

/* ---- layout ---- */
.wrap{max-width:760px;margin:0 auto;padding:14px 14px calc(86px + env(safe-area-inset-bottom))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin:10px 0;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;font-size:15px}
.flash{background:rgba(109,124,255,.12);border:1px solid rgba(109,124,255,.45);
  color:#c3cbff;padding:10px 14px;border-radius:12px;margin:8px 0;font-size:13px}
.flash-pill{background:rgba(255,93,108,.15);color:var(--bad);border:1px solid rgba(255,93,108,.4);
  font-size:12px;font-weight:700;padding:7px 10px;border-radius:10px;margin-bottom:10px}
.empty-state{text-align:center;color:var(--mut);padding:32px}
details.card>summary{cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
details.card>summary::-webkit-details-marker{display:none}

/* ---- tabbar ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:rgba(13,14,20,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 0;border-radius:12px;color:var(--mut);font-size:9.5px;font-weight:600;min-width:0}
.tabbar svg{width:21px;height:21px;fill:currentColor}
.tabbar a.on{color:#fff}
.tabbar a.on svg{fill:var(--acc);filter:drop-shadow(0 0 8px rgba(109,124,255,.6))}

/* ---- datebar ---- */
.datebar{display:flex;align-items:center;gap:8px;margin:4px 0 8px}
.datebar input[type=date]{width:100%}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--fg);
  font-size:17px;cursor:pointer;padding:0 8px}
.icon-btn.danger{color:var(--bad)}
.icon-btn.done{color:var(--ok)}
.chip{font-size:12px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);color:var(--mut)}

/* ---- hero / progress ring ---- */
.hero{display:flex;gap:18px;align-items:center}
.hero-meta h2{margin:0 0 2px;font-size:18px}
.hero-sub{color:var(--mut);font-size:12px}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px}
.pill.ok{background:rgba(45,212,127,.14);color:var(--ok)}
.pill.warn{background:rgba(245,184,50,.14);color:var(--warn)}
.pill.bad{background:rgba(255,93,108,.14);color:var(--bad)}
.pill.mute{background:rgba(139,145,160,.12);color:var(--mut)}
.ring{position:relative;width:84px;height:84px;flex:none}
.ring svg{width:84px;height:84px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .bg{stroke:#23262f}
.ring .fg{stroke:url(#g);stroke:#6d7cff;stroke-dasharray:213.6;
  stroke-dashoffset:calc(213.6 - 213.6 * var(--p) / 100);transition:stroke-dashoffset .6s ease}
.ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800}
.ring-num small{font-size:11px;color:var(--mut);font-weight:600}

/* ---- post cards ---- */
.post-card{padding:14px}
.post-card.done{opacity:.62}
.post-card.empty{border-color:rgba(255,93,108,.4)}
.pc-head{display:flex;gap:11px;align-items:center}
.avatar{width:42px;height:42px;border-radius:13px;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:17px;color:#fff;background:var(--card2)}
.avatar.t-main{background:linear-gradient(135deg,#6d7cff,#4a55d2)}
.avatar.t-magazine{background:linear-gradient(135deg,#ff8a5c,#e0584f)}
.avatar.t-ugc{background:linear-gradient(135deg,#2dd47f,#1a9e63)}
.avatar.t-series{background:linear-gradient(135deg,#a06bff,#7440d0)}
.pc-name{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-sub{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.tag{font-size:10.5px;font-weight:600;color:var(--mut);background:var(--card2);
  border-radius:6px;padding:2px 7px}
.tag.t-main{color:#aab4ff}.tag.t-magazine{color:#ffb39a}.tag.t-ugc{color:#7fe7b4}.tag.t-series{color:#cdaaff}
.tag.tag-plat{color:#9fc6ff}
.tag-ok{color:var(--ok)}.tag-warn{color:var(--warn)}
.tag-danger,.tag-dead{color:var(--bad);background:rgba(255,93,108,.12)}
.state-ico{width:34px;height:34px;border-radius:99px;display:flex;align-items:center;
  justify-content:center;font-weight:800;flex:none}
.done-ico{background:rgba(45,212,127,.16);color:var(--ok)}
.bad-ico{background:rgba(255,93,108,.16);color:var(--bad)}

.pc-media{margin-top:12px}
.thumbs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs img{width:86px;height:86px;object-fit:cover;border-radius:11px;border:1px solid var(--line)}
.thumb-file{width:86px;height:86px;flex:none;border-radius:11px;border:1px solid var(--line);
  background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;font-size:22px;color:var(--fg)}
.thumb-file small{font-size:9px;color:var(--mut);max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 並び替えUI(2026-07-09): コンテンツ編集のサムネに◀▶⇥。スマホ親指で押せるサイズ(v2.6流儀) */
.thumbs.reorder{align-items:flex-start;padding-top:4px}
.rethumb{flex:none;display:flex;flex-direction:column;gap:4px}
/* バッジはvisibilityで切替(display切替だと先頭だけ高さが変わりサムネの上端が揃わない) */
.rethumb .cover-badge{visibility:hidden;font-size:9px;color:#fff;background:var(--acc);
  border-radius:999px;padding:2px 6px;text-align:center;white-space:nowrap}
.rethumb:first-child .cover-badge{visibility:visible}
.rethumb-ops{display:flex;gap:4px;justify-content:center}
.rethumb-ops .rmv{min-width:26px;height:34px;font-size:12px}
.thumb-more{align-self:center;color:var(--mut);font-size:12px;flex:none;padding:0 6px}
.pc-label{margin-top:8px;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.caption-box{position:relative;margin-top:8px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px}
.caption-box pre{margin:0 0 8px;white-space:pre-wrap;word-break:break-all;font-family:inherit;
  font-size:12.5px;color:#c8cdd9;max-height:96px;overflow:hidden}
.caption-box.open pre{max-height:none}

/* ---- 本日分の投稿済み一覧(2026-07-09・1日複数投稿対応) ---- */
.posted-today{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.posted-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);
  border:1px solid var(--line);border-radius:11px;padding:8px 10px}
.posted-row form{margin:0 0 0 auto}
.posted-row .btn{padding:6px 12px;font-size:12.5px}

/* ---- ブランド絞り込み / 状態セクション（アカウント増加対策・2026-08-07） ---- */
.brandbar{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.brandbar::-webkit-scrollbar{display:none}
.brandbar .chip{white-space:nowrap;flex:0 0 auto}
.brandbar .chip.on{background:var(--acc);border-color:transparent;color:#fff}
.sec-h{display:flex;align-items:center;gap:8px;margin:18px 2px 8px;font-size:13px;color:var(--mut)}
.sec{margin:14px 0}
.sec>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card2);
  font-size:13px;font-weight:700;color:var(--mut)}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::after{content:'▾';margin-left:auto;opacity:.6}
.sec[open]>summary::after{content:'▴'}
.sec[open]>summary{margin-bottom:10px}
.sec-n{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;font-size:11.5px;font-variant-numeric:tabular-nums}

/* ---- platform checks ---- */
.plat-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.plat-row form{margin:0}
.plat{border:1.5px solid var(--line);background:var(--card2);color:var(--mut);
  font-size:13px;font-weight:700;padding:9px 14px;border-radius:11px;cursor:pointer}
.plat.checked{border-color:transparent;background:rgba(45,212,127,.15);color:var(--ok)}
/* 自動投稿トグル。APIから投稿できる媒体のときだけ描画される（できない媒体は要素ごと出ない）。 */
.auto{border:1.5px dashed var(--line);background:transparent;color:var(--mut);
  font-size:12px;font-weight:700;padding:8px 12px;border-radius:11px;cursor:pointer}
.auto.on{border-style:solid;border-color:transparent;background:rgba(96,165,250,.16);color:#60a5fa}
.push{margin-left:auto}
.empty-line{display:flex;align-items:center;gap:10px;justify-content:space-between;
  margin-top:10px;color:var(--bad);font-size:13px}

/* ---- buttons / forms ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;
  border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--fg);
  font-size:14px;font-weight:700;cursor:pointer}
.btn-acc{background:var(--grad);border:none;color:#fff;box-shadow:0 4px 14px rgba(109,124,255,.35)}
.btn-ok{background:var(--ok);border:none;color:#06210f}
.btn-ghost{background:transparent}
/* 今日カードの「次の投稿」「戻す」(2026-08-24)。在庫タブの「最下/最上」を今日タブから打つ。 */
.rot-row{display:inline-flex;gap:6px;flex:none}
/* 2026-10-29 「気になる所を送る」の欄（今日タブのカードの下） */
.fb-form{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);display:grid;gap:8px}
/* 2026-11-06 オーナー「通常は閉まってるけど押したい時だけ開く」＝display:grid が hidden を上書きして欄が開きっぱなしだった */
.fb-form[hidden]{display:none}
.fbbtn::after{content:" ▾"}
.fbbtn[aria-expanded="true"]::after{content:" ▴"}
.fb-open-row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.fb-undo{padding:4px 10px;font-size:12px;border-radius:999px;white-space:nowrap}
.flash-pill .fb-undo{margin-left:8px}
.fb-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fb-row select{width:auto;font-size:16px}
.fb-kinds{display:flex;gap:6px 14px;flex-wrap:wrap}
.fb-kinds label{display:inline-flex;gap:5px;align-items:center;font-size:14px}
.fb-kinds input[type=radio]{width:auto;accent-color:var(--acc)}
.fb-form textarea{font-size:16px}
.rotbtn{padding:6px 12px;font-size:12px;border-radius:999px;white-space:nowrap}
.rotbtn[disabled]{opacity:.35;cursor:default}

/* 在庫レベル(2026-08-24 オーナー指示「在庫不足をもっと意識させて」)。
   0本は「素材なし」で既に見えるので、1〜3本＝今日は出せるが明日切れる帯を最も強く出す。 */
.stk{font-weight:700}
.stk-dead{color:#ffd7db;background:rgba(255,93,108,.28)}
.stk-danger{color:var(--bad);background:rgba(255,93,108,.14)}
.stk-warn{color:var(--warn);background:rgba(245,184,50,.14)}
/* ストライプは小カテゴリーのカードだけ。大カテゴリー行には出さない(2026-08-24オーナー指示)。 */
.post-card.lv-dead,.post-card.lv-danger{border-left:4px solid var(--bad)}
.post-card.lv-warn{border-left:4px solid var(--warn)}
.btn.wide{width:100%;margin-top:14px}
.copy-btn{padding:7px 12px;font-size:12px;width:100%}
.copy-btn.copied{background:rgba(45,212,127,.15);color:var(--ok);border-color:transparent}
input,select,textarea{background:var(--bg2);border:1px solid var(--line);color:var(--fg);
  border-radius:11px;padding:11px 12px;font-size:15px;width:100%;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
input[type=file]{padding:9px}
input[type=checkbox]{width:auto;accent-color:var(--acc)}
label{font-size:12px;color:var(--mut);display:block;margin:12px 0 5px;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check-row{display:flex;gap:8px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--fg);
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:600}
.check:has(input:checked){border-color:var(--acc);background:rgba(109,124,255,.1)}
.note{font-size:12px;margin-top:6px}
.warn-note{color:var(--warn)}

/* ---- stock ---- */
.rw{text-align:center;flex:none;min-width:52px}
.rw b{font-size:21px}.rw small{color:var(--mut);font-size:10px;display:block;margin-top:-3px}
.rw-ok b{color:var(--ok)}.rw-warn b{color:var(--warn)}
.rw-danger b,.rw-dead b{color:var(--bad)}
.rwbar{height:7px;background:#23262f;border-radius:99px;overflow:hidden;margin:10px 0 6px}
.rwbar.slim{height:5px;margin:6px 0 4px}
.rwbar i{display:block;height:100%;border-radius:99px}
.rwbar .rw-ok{background:linear-gradient(90deg,#2dd47f,#1a9e63)}
.rwbar .rw-warn{background:linear-gradient(90deg,#f5b832,#e09112)}
.rwbar .rw-danger,.rwbar .rw-dead{background:linear-gradient(90deg,#ff5d6c,#d23a49)}
details.acc-stock summary{cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
details.acc-stock summary::-webkit-details-marker{display:none}
.chev{color:var(--mut);font-size:15px;flex:none;margin-left:2px;transition:transform .2s}
details[open] .chev{transform:rotate(180deg)}
details.acc-stock[open] summary{margin-bottom:2px}
.queue{margin-top:10px;display:flex;flex-direction:column;gap:8px}
/* 2026-07-08: 操作ボタン列(最大8個)がタイトル列を圧迫し1〜2文字ごとに改行される問題(UI-1)の根治。
   flex-wrapで1行目=サムネ+ラベル、2行目=操作ボタン、の2段組にしてラベルに十分な幅を確保する。
   2026-07-09追記: 上記だけでは根治になっていなかった(狭幅で1文字ずつ縦積みに崩壊する再発)。
   原因はword-break:break-wordがmin-content計算に効いてflexアイテムの最小幅を1文字分まで
   縮めてしまうこと(overflow-wrap:break-wordはmin-contentを縮めない=標準の安全策)。
   加えて.grow(flex:1;min-width:0)がq-item内では潰れすぎないようフロア幅を設ける。 */
.q-item{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;background:var(--bg2);
  border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.q-item.q-anomaly{background:rgba(255,93,108,.08);border-color:rgba(255,93,108,.35)}
.q-item>.grow{min-width:150px}
.q-thumb{width:48px;height:48px;border-radius:9px;flex:none;background:var(--card2);
  display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
.q-thumb img{width:100%;height:100%;object-fit:cover}
.q-label{font-size:13px;font-weight:600;overflow-wrap:break-word}
.q-pills{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.q-pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px}
.q-pill.ok{background:rgba(45,212,127,.14);color:var(--ok)}
.q-pill.warn{background:rgba(245,184,50,.14);color:var(--warn)}
.q-pill.bad{background:rgba(255,93,108,.14);color:var(--bad)}
.q-ops{display:flex;flex-wrap:wrap;gap:6px;flex:none;flex-basis:100%;justify-content:flex-end;
  padding-top:2px}
/* nowrap+justify-content:flex-end+overflow-x:autoだと、はみ出しが「左端の外」に出る＝scrollLeft=0から
   左へはスクロールできず、先頭の✓と最上が永久に押せなくなる(iPhone実幅390pxで実測・2026-08-19)。
   wrapに変えて2段に折り返す＝全ボタンが必ず画面内に入る。 */
.q-ops form{margin:0}
.q-ops .q-op-danger{margin-left:auto}
.q-ops .icon-btn{min-width:40px;height:40px;font-size:14px;border-radius:9px;flex:none}
.q-ops .icon-btn.edge{font-size:11px;letter-spacing:-.5px;font-weight:700}
.dl-list{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.dl-link{font-size:12px;color:var(--mut);background:var(--card2);border:1px solid var(--line);
  border-radius:6px;padding:6px 10px}
.dl-link:active{color:var(--acc);border-color:var(--acc)}
.retry-form{display:inline-block;margin-left:6px}
.retry-btn{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;
  border:1px solid var(--line);background:transparent;color:var(--mut);cursor:pointer}

/* ---- dashboard ---- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{text-align:center;padding:13px 6px;margin:0}
.stat-num{font-size:22px;font-weight:800}
.stat-num small{font-size:12px;color:var(--mut)}
.stat-lbl{font-size:10.5px;color:var(--mut);font-weight:600;margin-top:2px}
.stat-bad .stat-num{color:var(--bad)}
.dash-row{display:flex;gap:11px;align-items:center;padding:12px 14px;color:var(--fg)}

/* ---- followers / accounts ---- */
.f-row{display:flex;gap:11px;align-items:center;padding:11px 14px}
.f-input{width:104px;text-align:right;flex:none}
.sticky-save{position:sticky;bottom:calc(78px + env(safe-area-inset-bottom));z-index:10}
.inactive{opacity:.45}

@media (max-width:480px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
}

/* ---- calendar ---- */
.cal-card{padding:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid+.cal-grid{margin-top:4px}
.cal-head{margin-bottom:2px}
.cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--mut);padding:4px 0}
.cal-dow.dow-sun{color:var(--bad)}
.cal-dow.dow-sat{color:var(--acc)}
.cal-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:46px;border-radius:10px;background:var(--bg2);border:1.5px solid transparent;color:var(--fg)}
.cal-empty{background:transparent}
.cal-daynum{font-size:11px;color:var(--mut)}
.cal-count{font-size:15px;font-weight:800;line-height:1}
.cal-count.cal-zero{font-size:13px;color:var(--mut);font-weight:400}
.cal-has{background:var(--card2);cursor:pointer}
.cal-has .cal-count{color:var(--acc)}
.cal-today{border-color:var(--acc)}
.cal-sel{background:rgba(109,124,255,.22)}
.cal-sel .cal-count{color:#fff}
.cal-future{opacity:.4}

@keyframes toko-spin{to{transform:rotate(360deg)}}

/* ===== 大カテゴリー（3階層化・2026-08-24） =====
   今日/在庫タブに並ぶのはこの行だけ。中の型プール(小カテゴリー)は開いてから見える。 */
.grp{padding:0;overflow:hidden}
.grp>summary{list-style:none;cursor:pointer;padding:12px 14px}
.grp>summary::-webkit-details-marker{display:none}
.grp-head{display:flex;align-items:center;gap:10px}
.grp-name{font-weight:700;font-size:16px;letter-spacing:.02em}
.grp-n{flex:none;min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  font-weight:700;font-size:13px}
.grp-n.todo-n{background:var(--acc);color:#0a0b0f}
.grp-n{padding:0 7px}
.grp-n.zero-n{background:var(--card2);color:var(--mut)}
.grp>.card,.grp>.post-card,.grp>.acc-stock{margin:0 10px 10px;border-radius:12px}
.grp>.sec{margin:0 10px 10px}
.persona-sel{width:auto;min-width:9.5em;padding:8px 10px;margin:0 6px 0 0}
.move-pool,.move-one{gap:6px;margin:6px 0 0}
.move-pool select,.move-one select{width:auto;max-width:16em;padding:6px 8px;font-size:12px}
.move-one{margin:4px 0 0}
/* 大カテゴリーの行＝押したらそのページへ入るリンク(2026-08-24) */
.grp-row{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.grp-row:active{opacity:.7}
.chev-r{color:var(--mut);font-size:20px;flex:none;line-height:1}
.grp-sort{display:flex;flex-direction:column;gap:2px;flex:none}
.grp-sort .btn{padding:2px 8px;line-height:1.2}

/* ---- 時系列タブ＝1日をスマホ1画面に折り畳む定規（2026-08-26改訂） ----
   旧: 1時間=64pxで全部の時間を等倍に引く → 1日で約2000px＝スクロールしないと読めなかった。
   新: 投稿が固まっている所だけ開き、空いている所は「◯時間あいた」の短い帯1本に折る（軸を折る）。
   空きの大小は帯の高さ（少しだけ長さに比例・上限40px）と数字で読む。 */
/* 見出しは低く保つ＝ここで使った高さはそのまま定規から引かれる */
.tl-head{padding:8px 10px;margin:4px 0 8px}
.tl-nav{display:flex;align-items:center;gap:8px}
.tl-nav input[type=date]{flex:1;min-width:0;text-align:center;font-weight:700;padding:7px 8px}
.tl-nav .icon-btn{min-width:34px;height:34px}
.tl-nav .chip{padding:6px 11px}
.tl-nav .chip{flex:none;text-decoration:none}
.tl-nav .chip.on{background:var(--acc);border-color:transparent;color:#fff}
.icon-btn.off{opacity:.25;pointer-events:none}
.tl-sub{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:5px;font-size:11.5px;color:var(--mut)}
.tl-sub b{font-size:15px;color:var(--fg);margin-right:1px}

/* 縦のレール＝時間の流れ。帯（空き）の所は破線に切り替わる＝「ここは畳んである」の合図 */
.tl-ax{position:relative;padding:12px 10px 22px;overflow:hidden}
.tl-ax::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(109,124,255,.10),rgba(109,124,255,.45))}
.tl-sp{height:10px}
.tl-band{position:relative;height:var(--h);display:flex;align-items:center;
  background:var(--card);z-index:1}
.tl-band::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,rgba(139,145,160,.42) 0 3px,transparent 3px 8px)}
.tl-rows .tl-row + .tl-row{border-top:1px solid rgba(139,145,160,.10)}
.tl-band span{margin-left:22px;font-size:10.5px;font-weight:700;color:var(--mut);
  background:var(--card2);border:1px solid var(--line);border-radius:99px;padding:2px 9px}

/* 塊＝近い投稿のまとまり。先頭に点1つ＝そこが時間軸上の位置 */
.tl-blk{position:relative;z-index:1;padding:6px 0 6px 24px}
.tl-blk::before{content:"";position:absolute;left:2px;width:10px;height:10px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 3px rgba(109,124,255,.18)}
.tl-blk.fold::before{top:21px}
.tl-blk:not(.fold)::before{top:42px}
.tl-blk[data-n="1"]:not(.fold)::before{top:20px}
.tl-row{height:39px;display:flex;align-items:center;gap:9px;min-width:0}
/* 行＝その投稿の入口（Driveの素材フォルダ／無ければ編集画面）。タップ先があることを右端で示す */
a.tl-row{color:inherit;text-decoration:none}
a.tl-row:active{opacity:.55}
.tl-go{flex:none;margin-left:1px;font-style:normal;font-size:12px;color:var(--mut);line-height:1}
.tl-t{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;flex:none;letter-spacing:-.3px}
.tl-pre{font-style:normal;font-size:9.5px;font-weight:700;color:var(--mut);margin-right:3px}
.tl-th{width:32px;height:32px;flex:none;border-radius:8px;background:var(--card2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.tl-th img{width:100%;height:100%;object-fit:cover}
.tl-lb{flex:1 1 40px;min-width:0;font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 媒体チップは切らずに全部見せ、代わりにラベル側を詰める（チップが半分だと読めない） */
.tl-tags{flex:none;display:flex;gap:3px;align-items:center;max-width:58%}
.tl-tags .tag{white-space:nowrap}
.tl-tags .tag:first-child{max-width:10.5em;overflow:hidden;text-overflow:ellipsis}

/* 折り畳んだ塊＝時刻レンジ＋サムネ＋件数の1本。タップで開く（開いた時は細い見出しに変わる） */
.tl-strip{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0;border:0;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.tl-strip:active{opacity:.6}
.tl-ths{display:flex;gap:3px;flex:none}
.tl-ths img,.tl-ths span{width:26px;height:26px;border-radius:7px;flex:none;background:var(--card2);
  object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--mut)}
.tl-n{font-size:11px;font-weight:800;color:#aab4ff;flex:none}
.tl-accs{flex:1;min-width:0;font-size:11px;color:var(--mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-cv{flex:none;margin-left:auto;font-style:normal;font-size:12px;color:var(--mut);line-height:1}
.tl-blk:not(.fold)>.tl-strip{height:22px;font-size:11px;color:var(--mut)}
.tl-blk:not(.fold)>.tl-strip .tl-t{font-size:11px;font-weight:700;color:var(--mut)}
.tl-blk:not(.fold) .tl-ths,.tl-blk:not(.fold) .tl-accs{display:none}
.tl-blk:not(.fold) .tl-cv{transform:rotate(180deg)}
.tl-blk.fold .tl-rows{display:none}

/* 下端＝いま（過去日は24時）。ここが定規の現在位置 */
.tl-now{position:relative;z-index:1;margin:14px 0 0 6px;border-top:2px solid #ff5d6c}
.tl-now b{position:absolute;left:0;top:-9px;font-size:10.5px;font-weight:800;color:#ff5d6c;
  background:var(--card);padding:0 6px;border-radius:99px;white-space:nowrap}
.tl-end{border-top:2px solid rgba(139,145,160,.45)}
.tl-end b{color:var(--mut)}
/* 全部畳んでも入らない日の最終手段＝行の刻みを詰める（app.py TL_TIGHT と同じ値にする）。
   帯(.tl-band)はここで固定しない＝JSのtokoTLBands()が下限18pxまで縮め/余れば伸ばすため */
.tl-ax.tight .tl-row{height:30px}
.tl-ax.tight .tl-th{width:26px;height:26px}
.tl-ax.tight .tl-blk{padding:4px 0 4px 24px}
.tl-ax.tight .tl-strip{height:30px}
.tl-ax.tight .tl-blk:not(.fold)>.tl-strip{height:18px}
.tl-ax.tight .tl-blk.fold::before{top:19px}
.tl-ax.tight .tl-blk:not(.fold)::before{top:32px}
.tl-ax.tight .tl-blk[data-n="1"]:not(.fold)::before{top:14px}
@media (max-width:420px){
  .tl-lb{font-size:11.5px}
  .tl-tags .tag:first-child{max-width:8em}
}

/* 2026-09-02 タイトル行(今日カード・分離コピー) */
.cap-title{font-weight:700;font-size:13px;margin:0 0 6px;word-break:break-all}

/* 2026-10-17 小カテゴリーの並べ替え(今日の大カテゴリーページの ⇅)。≡ だけ touch-action:none＝そこをつまんだ時だけスクロールしない */
.sort-box[hidden]{display:none}
.sort-list{list-style:none;margin:8px 0 0;padding:0}
.sort-list li{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid var(--line);background:var(--card)}
.sort-list li.dragging{background:var(--card2);outline:1px solid var(--acc);border-radius:10px}
.sort-list .handle{font-size:20px;line-height:1;padding:6px 10px;color:var(--mut);cursor:grab;touch-action:none;user-select:none}

/* 全体タブ: フォロワー計を外して3枚（2026-10-18 数字タブの削除と一緒に） */
.stat-grid.stat-grid-3{grid-template-columns:repeat(3,1fr)}

/* ---- 設定タブ（2026-10-18 スマホ向けに組み直し・オーナー「設定タブがめちゃくちゃ使いづらいから、モバイルに合わせた、
   ユーザビリティを考慮した UI にしてほしい」）。一覧は1行ずつ（行全体がタップ先）・直すのは行の先の1画面。
   入力の文字は 16px＝iPhone は 16px 未満の欄に触ると画面を勝手に拡大する。押す所は高さ 44px 以上。 ---- */
.set-page input,.set-page select,.set-page textarea{font-size:16px}
.set-page .btn{min-height:44px}
.set-seg{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px;margin:2px 0 12px}
.set-seg a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:10px;
  font-size:14px;font-weight:700;color:var(--mut)}
.set-seg a span{font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--card2);color:var(--mut)}
.set-seg a.on{background:var(--grad);color:#fff;box-shadow:0 2px 10px rgba(109,124,255,.35)}
.set-seg a.on span{background:rgba(255,255,255,.22);color:#fff}

.set-tools{position:sticky;top:61px;z-index:12;background:var(--bg);margin:0 -14px;padding:2px 14px 8px}
.set-search{position:relative}
.set-search svg{position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;fill:var(--mut);pointer-events:none}
.set-search input{padding-left:38px;border-radius:12px;min-height:44px}
.set-filter{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.set-filter::-webkit-scrollbar{display:none}
.set-filter button{flex:none;min-height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--mut);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.set-filter button.on{border-color:var(--acc);color:#fff;background:rgba(109,124,255,.18)}

.set-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:8px 0;overflow:hidden}
.set-sec>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;cursor:pointer;
  list-style:none;-webkit-user-select:none;user-select:none}
.set-sec>summary::-webkit-details-marker{display:none}
.set-sec-name{flex:1;min-width:0;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-sec-name small{display:block;font-size:11.5px;font-weight:600;color:var(--warn)}
.set-sec.warn{border-color:rgba(245,184,50,.55)}
.set-cnt{flex:none;min-width:26px;text-align:center;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;
  background:var(--card2);color:var(--mut)}
.set-sec[open]>summary{border-bottom:1px solid var(--line)}
.set-sec[open] .chev{transform:rotate(180deg)}
.set-list{display:flex;flex-direction:column}
.set-row{position:relative;display:flex;align-items:center;gap:11px;min-height:60px;padding:9px 14px;
  scroll-margin-top:200px;scroll-margin-bottom:90px}  /* #p<id> で戻った時に上の固定の帯（見出し・検索）の下に出す */
.set-row+.set-row{border-top:1px solid var(--line)}
.set-row:active{background:var(--card2)}
.set-row.off{opacity:.55}
.set-row .row-link{position:absolute;inset:0;z-index:1}
.set-row .pc-name,.set-name{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-row.hit{animation:set-hit 1.6s ease}
@keyframes set-hit{0%,40%{background:rgba(109,124,255,.22)}100%{background:transparent}}
.avatar.sm{width:36px;height:36px;border-radius:11px;font-size:15px}
.set-sub{display:flex;flex-wrap:nowrap;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;margin-top:1px}
.set-sub>span,.set-sub>b{flex:none}
.set-sub>*+span::before{content:"・";margin:0 1px}
.set-sub>span:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.off-tag{color:var(--bad);font-weight:700}
.set-empty{padding:12px 14px;font-size:13px;color:var(--mut)}
.set-empty[hidden]{display:none}
.set-add-in{display:flex;align-items:center;min-height:46px;padding:0 14px;border-top:1px solid var(--line);font-size:13px;font-weight:700}
.set-none{text-align:center;color:var(--mut);padding:36px 0}
.set-none[hidden]{display:none}
#setBody.f-on .set-row.off,#setBody.f-off .set-row:not(.off){display:none}
#setBody .set-row.miss,#setBody .set-sec.miss{display:none}
.set-filter-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.set-filter-row .set-filter{flex:1;min-width:0;margin-top:0}
.set-addbtn{flex:none;display:flex;align-items:center;min-height:36px;padding:0 14px;border-radius:99px;background:var(--grad);
  color:#fff;font-size:13px;font-weight:800;box-shadow:0 3px 12px rgba(109,124,255,.35)}
svg.chev{width:18px;height:18px;fill:none;stroke:var(--mut);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.set-alert{display:block;padding:12px 14px;border-radius:12px;margin:0 0 10px;font-size:13px;font-weight:700;
  color:var(--warn);background:rgba(245,184,50,.12);border:1px solid rgba(245,184,50,.4)}
.set-hint{font-size:12px;color:var(--mut);margin:0 2px 6px}
.set-gcard{padding:4px 0}
.set-glist{margin:0}
.set-glist li{min-height:60px;padding:0 6px 0 4px;background:transparent}
.set-glist li:first-child{border-top:none}
.set-glist .handle{font-size:22px;padding:12px}
.set-glink{display:flex;align-items:center;gap:10px;min-height:60px;color:var(--fg);padding-right:8px}
.set-glink b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-inline{display:flex;gap:8px;align-items:center}
.set-inline input{flex:1;min-width:0}
.set-inline .btn{flex:none}
.set-back{display:inline-flex;align-items:center;min-height:40px;font-size:14px;font-weight:700}
.set-h{margin:0 0 6px;font-size:20px;line-height:1.3;word-break:break-all}
.set-card h3{display:flex;align-items:center;gap:8px}
.set-card h4{margin:18px 0 0;font-size:13px}
.set-card>h3+label{margin-top:4px}
.set-n{font-size:12px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--card2);color:var(--mut)}
.set-note{font-size:12px;color:var(--mut);margin:-4px 0 8px}
.set-item{display:flex;align-items:center;gap:10px;min-height:48px;border-top:1px solid var(--line)}
.set-item .icon-btn{min-width:44px;height:44px}
.set-more{margin-top:8px;border-top:1px solid var(--line)}
.set-more>summary{list-style:none;cursor:pointer;min-height:46px;display:flex;align-items:center;font-size:14px;font-weight:700;color:var(--acc)}
.set-more>summary::-webkit-details-marker{display:none}
.set-stack{display:flex;flex-direction:column;gap:8px;padding-bottom:4px}
.set-list.flat{margin:0 -16px}
.set-mt{margin-top:10px}
.set-danger{border-color:rgba(255,93,108,.35)}
.btn-danger{background:rgba(255,93,108,.14);border:1px solid rgba(255,93,108,.5);color:var(--bad)}

.set-status{display:flex;align-items:center;gap:12px;padding:12px 14px}
.set-status b{color:var(--ok)}
.set-status.off b{color:var(--bad)}
.set-adv>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:40px}
.set-adv>summary::-webkit-details-marker{display:none}
.set-adv[open] .chev{transform:rotate(180deg)}
.set-adv .set-sub{display:block}
.grid2.keep{grid-template-columns:1fr 1fr}
.set-page .check{min-height:40px}
.wd-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wd{position:relative;margin:0;display:block}
.wd input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.wd span{display:flex;align-items:center;justify-content:center;height:42px;border-radius:10px;font-size:14px;font-weight:700;
  color:var(--mut);background:var(--bg2);border:1px solid var(--line)}
.wd input:checked+span{color:#fff;background:rgba(109,124,255,.22);border-color:var(--acc)}
.wd input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.set-savebar{position:sticky;bottom:calc(58px + env(safe-area-inset-bottom));z-index:15;display:flex;gap:8px;
  margin:12px -14px 0;padding:10px 14px;background:rgba(10,11,15,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.set-savebar .btn-acc{flex:1}
@media (min-width:761px){.set-tools{margin:0;padding:2px 0 8px}.set-savebar{margin:12px 0 0;border-radius:14px;border:1px solid var(--line)}}