/* mosaic 実効性評価コンソール — 管制室スタイル
   判定色が唯一の彩度: 赤=素通り / 琥珀=要レビュー / 緑=捕捉 / 灰=情報なし */

:root {
  --bg: #101216;
  --bg-raise: #171a20;
  --bg-card: #1c2027;
  --line: #2a2f3a;
  --ink: #d6dae2;
  --ink-dim: #8b93a3;
  --ink-faint: #565e6e;
  --red: #e8544f;
  --amber: #fbbf24;
  --green: #4ade80;
  --cyan: #67e8f9;
  --mono: "SF Mono", "Cascadia Code", Menlo, Consolas, "Hiragino Kaku Gothic ProN", monospace;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.006) 2px 4px),
    radial-gradient(1200px 500px at 70% -10%, #1a1e28 0%, var(--bg) 55%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  min-height: 100vh;
}

/* ---------- トップバー ---------- */
#topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #14171d, #111318);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-tiles { display: grid; grid-template-columns: 7px 7px; gap: 2px; }
.brand-tiles i { width: 7px; height: 7px; background: var(--line); }
.brand-tiles i:nth-child(1) { background: var(--red); }
.brand-tiles i:nth-child(2) { background: var(--green); }
.brand-tiles i:nth-child(3) { background: var(--amber); }
.brand h1 { font: 700 15px/1 var(--mono); letter-spacing: .12em; }
.brand h1 span { color: var(--ink-dim); font-weight: 400; letter-spacing: 0; font-family: var(--sans); font-size: 12px; }

.funnel { flex: 1; display: flex; align-items: center; gap: 0; height: 34px; }
.funnel .seg {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 0 12px; min-width: 74px; position: relative;
  border: 1px solid var(--line); border-left: none;
  font-family: var(--mono);
}
.funnel .seg:first-child { border-left: 1px solid var(--line); border-radius: 4px 0 0 4px; }
.funnel .seg:last-child { border-radius: 0 4px 4px 0; }
.funnel .seg b { font-size: 15px; line-height: 1.1; }
.funnel .seg small { color: var(--ink-dim); font-size: 10px; white-space: nowrap; }
.funnel .seg.s-det b { color: var(--green); }
.funnel .seg.s-ver b { color: var(--amber); }
.funnel .seg.s-thru b { color: var(--red); }
.funnel .seg.s-thru.zero b { color: var(--green); }
.funnel .seg.s-thru:not(.zero) { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); box-shadow: 0 0 12px rgba(232,84,79,.18) inset; }

.top-actions { display: flex; align-items: center; gap: 10px; }
.run-switch { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.run-switch button {
  background: none; border: none; color: var(--ink-dim);
  font: 600 11px var(--mono); padding: 7px 14px; cursor: pointer; letter-spacing: .08em;
}
.run-switch button.active { background: var(--cyan); color: #06282e; }
.run-switch button:not(.active):hover { color: var(--ink); background: var(--bg-card); }
.ghost-btn {
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-dim); font: 500 11px var(--sans); padding: 7px 12px; cursor: pointer;
}
.ghost-btn:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ---------- レイアウト ---------- */
#layout { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 55px); }

#rail {
  border-right: 1px solid var(--line);
  padding: 14px; display: flex; flex-direction: column; gap: 18px;
  background: rgba(0,0,0,.14);
  position: sticky; top: 55px; height: calc(100vh - 55px); overflow-y: auto;
}
.rail-block h2 {
  font: 700 10px var(--mono); letter-spacing: .18em; color: var(--ink-faint);
  text-transform: uppercase; margin-bottom: 10px;
}
#stats { font-family: var(--mono); }
#stats .stat-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11.5px; }
#stats .stat-row b { font-size: 12px; }
#stats .improvement { color: var(--green); }
#stats hr { border: none; border-top: 1px dashed var(--line); margin: 8px 0; }

.filter-group { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fg-label { flex-basis: 100%; font-size: 10px; color: var(--ink-faint); margin-bottom: 2px; letter-spacing: .08em; }
.filter-group button {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink-dim); font-size: 11px; padding: 4px 9px; cursor: pointer;
}
.filter-group button:hover { color: var(--ink); }
.filter-group button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.filter-group button.danger.active { background: var(--red); border-color: var(--red); color: #fff; }
#category-select, #q {
  width: 100%; background: var(--bg-card); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); font-size: 12px; padding: 6px 8px;
}
#q { margin-top: 4px; font-family: var(--mono); }
#q::placeholder { color: var(--ink-faint); }

.legend div { display: flex; gap: 7px; align-items: baseline; font-size: 11px; color: var(--ink-dim); padding: 2.5px 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; top: 1px; }
.dot-red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot-amber { background: var(--amber); }
.dot-green { background: var(--green); }
.dot-gray { background: var(--ink-faint); }

/* ---------- グリッド ---------- */
#grid-wrap { padding: 16px 18px; }
#grid-meta { font: 500 11px var(--mono); color: var(--ink-dim); margin-bottom: 12px; letter-spacing: .05em; }
#grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 12px;
}

.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; cursor: pointer; position: relative;
  transition: transform .12s ease, border-color .12s ease;
  animation: rise .3s ease backwards;
}
.card:hover { transform: translateY(-2px); border-color: var(--ink-faint); }
.card.f-passthrough { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.card.f-passthrough::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 0 1px var(--red) inset, 0 0 18px rgba(232,84,79,.25) inset;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.thumb {
  aspect-ratio: 4 / 3; background: #0b0d10; display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: contain; }
body.blurred .thumb img, body.blurred .thumb video { filter: blur(14px) saturate(.7); transform: scale(1.06); }
body.blurred .thumb:hover img, body.blurred .thumb:hover video { filter: none; transform: none; }
.thumb .play-badge {
  position: absolute; inset: auto auto 6px 6px;
  font: 700 9px var(--mono); letter-spacing: .1em;
  background: rgba(0,0,0,.72); color: var(--cyan);
  padding: 3px 6px; border-radius: 3px; pointer-events: none;
}

.card-status { display: flex; height: 4px; }
.card-status i { flex: 1; background: var(--line); }
.card-status i.on-det { background: var(--green); }
.card-status i.on-ver { background: var(--amber); }
.card-status i.on-thru { background: var(--red); }

.card-body { padding: 8px 10px 9px; }
.card-body .cid {
  font: 600 11px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag {
  font: 500 9.5px var(--mono); padding: 2px 6px; border-radius: 3px;
  background: var(--bg-raise); color: var(--ink-dim); border: 1px solid var(--line);
  letter-spacing: .04em;
}
.tag.t-verdict-uncensored_suspected { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.tag.t-verdict-tile_too_fine { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.tag.t-verdict-non_tile_censor { color: var(--amber); }
.tag.t-verdict-compliant { color: var(--green); }
.tag.t-verdict-unknown { color: var(--ink-faint); }
.tag.t-det { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.tag.t-miss { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); font-weight: 700; }
.tag.t-dom { color: var(--cyan); }

/* ---------- 詳細ビュー ---------- */
#detail { position: fixed; inset: 0; z-index: 50; }
#detail.hidden { display: none; }
#detail-backdrop { position: absolute; inset: 0; background: rgba(5,6,8,.78); backdrop-filter: blur(3px); }
#detail-panel {
  position: absolute; inset: 24px 24px 24px auto; width: min(1180px, calc(100vw - 48px));
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden;
  animation: slide .18s ease;
  box-shadow: -24px 0 60px rgba(0,0,0,.5);
}
@keyframes slide { from { transform: translateX(28px); opacity: 0; } }
#detail-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); font-family: var(--mono);
}
#detail-head .did { font-size: 13px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#detail-head button { background: none; border: 1px solid var(--line); color: var(--ink-dim); border-radius: 4px; padding: 5px 11px; cursor: pointer; font-family: var(--mono); }
#detail-head button:hover { color: var(--ink); }
#detail-body { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare.single { grid-template-columns: 1fr; max-width: 720px; }
.pane { background: #0b0d10; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pane h3 {
  font: 700 10px var(--mono); letter-spacing: .14em; color: var(--ink-dim);
  padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--bg-card);
  display: flex; justify-content: space-between; align-items: center;
}
.pane h3 .sub { color: var(--ink-faint); font-weight: 400; letter-spacing: 0; }
.media-box { position: relative; display: grid; place-items: center; min-height: 200px; }
.media-box img, .media-box video { max-width: 100%; max-height: 56vh; display: block; }
.media-box canvas { position: absolute; pointer-events: none; }
.media-box .nofile { color: var(--ink-faint); font: 500 11px var(--mono); padding: 40px 0; }

.pipeline { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-step {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 5px;
  padding: 8px 12px; font-family: var(--mono); font-size: 11px;
}
.pl-step b { font-size: 12px; }
.pl-step.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.pl-step.ok b { color: var(--green); }
.pl-step.warn { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.pl-step.warn b { color: var(--amber); }
.pl-step.bad { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.pl-step.bad b { color: var(--red); }
.pl-arrow { align-self: center; color: var(--ink-faint); font-family: var(--mono); }

.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.kv {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
}
.kv h4 { font: 700 10px var(--mono); letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 8px; }
.kv table { width: 100%; border-collapse: collapse; font: 500 11px var(--mono); }
.kv td { padding: 2.5px 0; vertical-align: top; }
.kv td:first-child { color: var(--ink-dim); padding-right: 10px; white-space: nowrap; }
.kv td:last-child { text-align: right; word-break: break-all; }
.score-bar { display: inline-block; width: 60px; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-left: 6px; }
.score-bar i { display: block; height: 100%; background: var(--cyan); }

.det-table { width: 100%; border-collapse: collapse; font: 500 11px var(--mono); }
.det-table th { text-align: left; color: var(--ink-faint); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .08em; }
.det-table td { padding: 4px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.det-table tr:hover td { background: rgba(255,255,255,.02); }
.lbl-penis { color: #f0abfc; } .lbl-pussy { color: #f9a8d4; } .lbl-sex { color: var(--red); }
.lbl-anus { color: #fdba74; } .lbl-vagina { color: #f9a8d4; } .lbl-make_love { color: var(--red); }

.empty-state { color: var(--ink-faint); text-align: center; padding: 80px 0; font: 500 12px var(--mono); }

/* ---------- 動画タイムライン ---------- */
.tl-wrap { padding: 14px 14px 10px; }
.timeline {
  position: relative; height: 26px; border-radius: 4px; cursor: pointer;
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    #0e1013;
  border: 1px solid var(--line);
}
.tl-seg {
  position: absolute; top: 3px; bottom: 3px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 85%, #fff), var(--red));
  box-shadow: 0 0 8px rgba(232,84,79,.45);
  transition: filter .1s ease;
}
.tl-seg:hover { filter: brightness(1.35); }
#tl-cursor {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan); pointer-events: none; left: 0;
}
.tl-ticks { position: relative; height: 16px; margin-top: 3px; }
.tl-tick {
  position: absolute; transform: translateX(-50%);
  font: 500 9px var(--mono); color: var(--ink-faint);
}
.range-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.range-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line));
  border-radius: 5px; padding: 7px 12px; cursor: pointer; color: var(--ink);
  font-family: var(--mono); text-align: left;
  transition: transform .1s ease, border-color .1s ease;
}
.range-chip:hover { transform: translateY(-1px); border-color: var(--red); }
.range-chip b { font-size: 13px; color: var(--red); letter-spacing: .02em; }
.range-chip span { font-size: 10.5px; color: var(--ink); }
.range-chip small { font-size: 9.5px; color: var(--ink-faint); }