/* 泡盛 市場調査ターミナル — modern dark premium。
   琉球藍(indigo)×泡盛の琥珀(gold)を主役に、好意=mint/不満=coral。
   深いチャコール地に控えめなグロー。全体が「連続調査が回り続けている」端末。 */

:root {
  --bg: #0a0c12;
  --bg-glow1: rgba(79, 124, 255, 0.10);   /* 琉球藍 */
  --bg-glow2: rgba(240, 192, 104, 0.07);  /* 琥珀 */
  --panel: rgba(255, 255, 255, 0.035);
  --panel2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border2: rgba(255, 255, 255, 0.05);
  --ink: #eef1f8;
  --muted: #8b93a7;
  --faint: #5b6275;

  --indigo: #6ea0ff;
  --indigo-deep: #4f7cff;
  --gold: #f0c068;
  --gold-deep: #d99f3c;
  --green: #25c07a;
  --green-b: #2fe093;
  --red: #ff5d6c;
  --red-b: #ff7b87;
  --teal: #2bd4c4;
  --violet: #b79bff;

  --mono: "SF Mono", "JetBrains Mono", ui-monospace, "Menlo", monospace;
  --sans: "Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1100px 600px at 8% -5%, var(--bg-glow1), transparent 60%),
    radial-gradient(1000px 700px at 100% 110%, var(--bg-glow2), transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
  background-attachment: fixed;
}
b, strong { font-weight: 650; }

/* ---------- ヘッダ ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 12, 18, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; gap: 18px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
}
.topbar .brand { display: flex; align-items: center; gap: 11px; }
.topbar .glyph {
  font-weight: 700; font-size: 17px;
  background: linear-gradient(140deg, var(--gold), var(--gold-deep));
  color: #1a1206; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; box-shadow: 0 4px 16px rgba(240, 192, 104, 0.3);
}
.topbar h1 { font-size: 14px; letter-spacing: .02em; margin: 0; font-weight: 650; }
.topbar .sub { font-size: 9.5px; letter-spacing: .26em; color: var(--faint); text-transform: uppercase; }
.topbar .spacer { flex: 1; }
.topbar .stat { font-size: 11px; color: var(--muted); }
.topbar .stat b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.topbar .stat.up b { color: var(--green-b); }
.topbar .stat.dn b { color: var(--red); }
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: .18em; color: #b6f2d4;
  background: rgba(47, 224, 147, 0.08);
  border: 1px solid rgba(47, 224, 147, 0.3); border-radius: 20px; padding: 5px 11px;
}
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-b);
  box-shadow: 0 0 0 0 rgba(47, 224, 147, .7); animation: pulse 1.6s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 224, 147, .55); }
  70% { box-shadow: 0 0 0 8px rgba(47, 224, 147, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 224, 147, 0); }
}
.clock { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 78px; text-align: right; color: var(--gold); }

/* ---------- ティッカー ---------- */
.ticker {
  background: rgba(255, 255, 255, 0.02); overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--border2); font-family: var(--mono); font-size: 11.5px;
}
.ticker .track { display: inline-block; padding: 7px 0; animation: scroll 40s linear infinite; }
.ticker .track span { padding: 0 22px; border-right: 1px solid var(--border2); }
.ticker .track .k { color: var(--faint); }
.ticker .track .up { color: var(--green-b); }
.ticker .track .dn { color: var(--red); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- レイアウト ---------- */
.wrap { max-width: 1360px; margin: 0 auto; padding: 16px; }
.grid { display: grid; gap: 14px; }
.row-a { grid-template-columns: 1.35fr 1fr; }
.row-c { grid-template-columns: 1fr 1fr 1fr; }
.row-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .row-a, .row-c, .row-two { grid-template-columns: 1fr; } }

.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.panel > .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 15px; border-bottom: 1px solid var(--border2);
}
.panel > .head .t { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.panel > .head .tag { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.panel > .body { padding: 14px 15px; }

/* AIバッジ */
.aibadge { font-size: 9.5px; letter-spacing: .1em; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; font-weight: 600; }
.aibadge.local { background: rgba(43, 212, 196, 0.12); color: var(--teal); border: 1px solid rgba(43, 212, 196, 0.32); }
.aibadge.frontier { background: rgba(183, 155, 255, 0.12); color: var(--violet); border: 1px solid rgba(183, 155, 255, 0.32); }

/* ---------- 巨大カウンタ ---------- */
.bignum-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bignum {
  font-family: var(--mono); font-size: 66px; font-weight: 700; line-height: .9;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(150deg, #ffe6a8, var(--gold) 45%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bignum .unit { font-size: 18px; color: var(--muted); margin-left: 7px; -webkit-text-fill-color: var(--muted); }
.delta { color: var(--green-b); font-size: 13px; font-family: var(--mono); }
.delta::before { content: "▲ "; }
.spark { width: 100%; height: 66px; display: block; margin-top: 12px; }
.substats { display: flex; gap: 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border2); }
.substats .k { font-size: 11px; color: var(--muted); }
.substats .k b { display: block; font-size: 19px; color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---------- ランキング表 ---------- */
table.rank { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.rank th { text-align: left; color: var(--faint); font-weight: 500; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-bottom: 1px solid var(--border); }
table.rank td { padding: 6px 7px; border-bottom: 1px solid var(--border2); }
table.rank tr:hover td { background: rgba(255, 255, 255, 0.03); }
table.rank .name { font-weight: 550; font-size: 13px; }
table.rank .n { text-align: right; font-family: var(--mono); color: var(--gold); }
.minibar { display: inline-flex; height: 8px; width: 92px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.minibar i { height: 100%; display: block; }
.minibar .pos { background: var(--green-b); }
.minibar .neu { background: rgba(255, 255, 255, 0.18); }
.minibar .neg { background: var(--red); }

/* ---------- パイプライン(decision tree) ---------- */
.flowwrap { width: 100%; overflow-x: auto; }
svg.flow { width: 100%; min-width: 920px; height: 230px; display: block; }
svg.flow .box { fill: rgba(255, 255, 255, 0.035); stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.2; }
svg.flow .box.green { stroke: var(--green-b); fill: rgba(47, 224, 147, 0.08); }
svg.flow .box.red { stroke: var(--red); fill: rgba(255, 93, 108, 0.08); }
svg.flow .box.frontier { stroke: var(--violet); fill: rgba(183, 155, 255, 0.08); }
svg.flow .lbl { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--ink); }
svg.flow .num { font-family: var(--mono); font-size: 15px; font-weight: 700; fill: var(--gold); }
svg.flow .cap { font-family: var(--mono); font-size: 9px; fill: var(--faint); letter-spacing: .06em; }
svg.flow .edge { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.4; }
svg.flow .edge.flow { stroke-dasharray: 5 7; animation: dash 1s linear infinite; }
svg.flow .edge.green { stroke: var(--green-b); }
svg.flow .edge.red { stroke: var(--red); }
@keyframes dash { to { stroke-dashoffset: -24; } }
svg.flow .elbl { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); }

/* ---------- 分類エンジン(orbit) ---------- */
.orbit-wrap { display: flex; flex-direction: column; align-items: center; }
svg.orbit { width: 100%; height: 200px; }
svg.orbit .ring { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; stroke-dasharray: 2 5; }
svg.orbit .core { fill: rgba(43, 212, 196, 0.12); stroke: var(--teal); stroke-width: 1.4; filter: drop-shadow(0 0 10px rgba(43, 212, 196, 0.5)); }
svg.orbit .corelbl { font-family: var(--mono); font-size: 10px; fill: var(--teal); text-anchor: middle; font-weight: 700; }
.orbit-counts { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; font-family: var(--mono); }
.orbit-counts .pos { color: var(--green-b); } .orbit-counts .neg { color: var(--red); }
.orbit-counts b { font-variant-numeric: tabular-nums; }

/* ---------- 汎用バー ---------- */
.bars .bar-row { display: grid; grid-template-columns: 96px 1fr 56px; gap: 9px; align-items: center; margin: 6px 0; }
.bars .label { font-size: 11.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .track { height: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; overflow: hidden; }
.bars .track i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.bars .track i.amber { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.bars .track i.teal { background: linear-gradient(90deg, #1a8f86, var(--teal)); }
.bars .track i.green { background: linear-gradient(90deg, var(--green), var(--green-b)); }
.bars .val { text-align: right; font-size: 11px; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }

.senti-bar { display: flex; height: 24px; border-radius: 7px; margin: 4px 0 10px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.senti-bar i { display: block; height: 100%; transition: width 1s ease; }
.senti-legend { display: flex; gap: 14px; font-size: 11px; }
.s-pos { color: var(--green-b); } .s-neg { color: var(--red); } .s-neu { color: var(--muted); }

/* ---------- ライブログ ---------- */
.log { font-family: var(--mono); font-size: 11.5px; line-height: 1.75; max-height: 234px; overflow: hidden; }
.log .ln { display: flex; gap: 11px; padding: 2px 0; border-bottom: 1px solid var(--border2); }
.log .ln.new { animation: flash .9s ease; }
@keyframes flash { from { background: rgba(47, 224, 147, .14); } to { background: transparent; } }
.log .ts { color: var(--faint); white-space: nowrap; }
.log .badge { font-size: 9px; letter-spacing: .06em; padding: 1px 7px; border-radius: 20px; align-self: center; }
.log .badge.collect { background: rgba(43, 212, 196, 0.14); color: var(--teal); }
.log .badge.process { background: rgba(47, 224, 147, 0.14); color: var(--green-b); }
.log .badge.dup { background: rgba(255, 93, 108, 0.14); color: var(--red); }
.log .msg { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log .ok { color: var(--green-b); } .log .num { color: var(--ink); font-weight: 600; }

/* ---------- 生の声ティッカー ---------- */
.quotes-strip { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; white-space: nowrap; }
.quotes-strip .track { display: inline-block; padding: 11px 0; animation: scroll 64s linear infinite; }
.quotes-strip q { padding: 0 26px; font-size: 13px; color: var(--ink); }
.quotes-strip q::before, .quotes-strip q::after { content: ""; }
.quotes-strip .qp { color: var(--green-b); } .quotes-strip .qn { color: var(--red); }
.quotes-strip .who { color: var(--faint); font-size: 11px; font-family: var(--mono); }

/* ---------- レポート・ドック（成果物） ---------- */
.dock-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; flex-wrap: wrap; }
.dock-head .t { font-size: 16px; font-weight: 600; }
.dock-head .s { font-size: 11px; color: var(--muted); }
.reports { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .reports { grid-template-columns: 1fr; } }
.report-card {
  display: block; text-decoration: none; color: var(--ink); position: relative;
  background: linear-gradient(160deg, rgba(110, 160, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.report-card:hover {
  transform: translateY(-3px);
  border-color: rgba(110, 160, 255, 0.5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(110, 160, 255, 0.25);
}
.report-card .kick { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.report-card h3 { font-size: 19px; font-weight: 650; margin: 8px 0 5px; }
.report-card .meta { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.report-card .go { margin-top: 14px; font-size: 12px; color: var(--indigo); font-weight: 600; }
.report-card.disabled { opacity: .5; border-style: dashed; pointer-events: none; }
.notebox { background: rgba(240, 192, 104, 0.06); border: 1px solid rgba(240, 192, 104, 0.2);
  border-left: 3px solid var(--gold); border-radius: 10px; padding: 12px 16px; font-size: 12px; color: #cdb98f; }

/* ---------- 収集元（データソース） ---------- */
.src-lead { font-size: 12.5px; color: var(--muted); line-height: 1.9; margin: 2px 0 12px; max-width: 1000px; }
.src-lead b { color: var(--ink); font-weight: 600; }
code { font-family: var(--mono); font-size: .92em; color: var(--gold); background: rgba(240, 192, 104, 0.08);
  padding: 1px 5px; border-radius: 4px; }
table.srcs td { padding: 7px 7px; vertical-align: top; }
table.srcs .srcname { font-weight: 550; }
table.srcs .dim { color: var(--muted); font-size: 11.5px; }
.tpill { display: inline-block; font-size: 9px; letter-spacing: .04em; padding: 2px 7px; border-radius: 20px;
  font-weight: 600; margin-right: 6px; white-space: nowrap; }
.tpill.rss      { background: rgba(110,160,255,.14); color: var(--indigo); }
.tpill.trade    { background: rgba(240,192,104,.14); color: var(--gold); }
.tpill.website  { background: rgba(43,212,196,.14);  color: var(--teal); }
.tpill.sns_seed { background: rgba(183,155,255,.14); color: var(--violet); }
.tpill.ec       { background: rgba(47,224,147,.14);  color: var(--green-b); }
.tpill.trends   { background: rgba(224,160,25,.16);  color: var(--gold); }
.tpill.api      { background: rgba(255,255,255,.07);  color: var(--muted); }
.statpill { font-size: 9.5px; padding: 2px 9px; border-radius: 20px; font-family: var(--sans); font-weight: 600;
  background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }

footer { text-align: center; color: var(--faint); font-size: 11px; padding: 26px 0 34px; line-height: 1.8; }

.sec-title {
  font-size: 14px; font-weight: 600; margin: 22px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: baseline; position: relative;
}
.sec-title::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--indigo)); border-radius: 2px;
}
.sec-title .meta { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .12em; }