:root {
  --bg: #050918;
  --panel: rgba(12, 19, 38, 0.74);
  --panel2: rgba(20, 30, 56, 0.7);
  --line: rgba(148, 163, 184, 0.14);
  --line2: rgba(148, 163, 184, 0.26);
  --txt: #e7eef9;
  --mut: #8d9bb4;
  --dim: #5d6b85;
  --cyan: #22d3ee;
  --violet: #a78bfa;
  --pink: #f472b6;
  --green: #34d399;
  --amber: #fbbf24;
  --blue: #60a5fa;
  --orange: #fb923c;
  --red: #f87171;
  --teal: #2dd4bf;
  --grad: linear-gradient(100deg, #22d3ee, #a78bfa 55%, #f472b6);
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --en: "Inter", "Noto Sans JP", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #02040c; color: var(--txt); font-family: var(--jp); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code, .mono { font-family: var(--mono); }
.ic { width: 18px; height: 18px; flex: none; }
.hide { display: none !important; }

#viewport { position: fixed; inset: 0; }
#stage { position: absolute; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--bg); overflow: hidden; }

/* 背景 */
#bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(34, 211, 238, 0.13), transparent 60%),
    radial-gradient(1000px 800px at 100% 0%, rgba(167, 139, 250, 0.14), transparent 60%),
    radial-gradient(900px 600px at 60% 120%, rgba(244, 114, 182, 0.09), transparent 60%); }
#bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); }
#bg i { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: 0.22; animation: drift 24s ease-in-out infinite alternate; }
#bg i:nth-child(1) { background: #0ea5e9; left: -120px; top: 300px; }
#bg i:nth-child(2) { background: #7c3aed; right: -100px; top: -120px; animation-delay: -8s; }
#bg i:nth-child(3) { background: #db2777; left: 45%; bottom: -260px; animation-delay: -16s; }
@keyframes drift { to { transform: translate(140px, -80px) scale(1.2); } }

/* 上部バー */
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 68px; display: flex; align-items: center; gap: 22px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(5, 9, 24, 0.6); backdrop-filter: blur(14px); z-index: 5; }
.brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.logo { font-family: var(--en); font-weight: 900; font-size: 26px; letter-spacing: -0.5px; display: flex; align-items: baseline; }
.logo span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo i { color: var(--pink); font-style: normal; }
.brand-t b { display: block; font-family: var(--en); font-size: 15px; font-weight: 700; }
.brand-t small { color: var(--mut); font-size: 11px; font-family: var(--en); }
.gnav { display: flex; gap: 4px; margin-left: 18px; flex: 1; }
.gnav button { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--mut); transition: 0.2s; white-space: nowrap; }
.gnav button em { font-style: normal; font-family: var(--en); font-weight: 800; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: rgba(148, 163, 184, 0.12); }
.gnav button:hover { color: var(--txt); background: rgba(148, 163, 184, 0.08); }
.gnav button.on { color: #fff; background: linear-gradient(100deg, rgba(34, 211, 238, 0.18), rgba(167, 139, 250, 0.18)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35); }
.gnav button.on em { background: var(--grad); color: #0b1020; }
.tright { display: flex; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-family: var(--en); border: 1px solid var(--line2); color: var(--mut); }
.pill.dify { color: #93c5fd; border-color: rgba(96, 165, 250, 0.4); }
.pill.nt b { color: var(--txt); }

/* 下部ドック */
#dock { position: absolute; left: 0; right: 0; bottom: 0; height: 118px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 58px 44px; column-gap: 24px; padding: 8px 28px 8px; border-top: 1px solid var(--line); background: rgba(5, 9, 24, 0.72); backdrop-filter: blur(14px); z-index: 5; }
.cap { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cap-l { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #0b1020; flex: none; box-shadow: 0 0 24px rgba(167, 139, 250, 0.45); }
.cap-l .ic { width: 20px; height: 20px; }
.cap-t { font-size: 20px; font-weight: 500; line-height: 1.45; letter-spacing: 0.01em; }
.steps { display: flex; gap: 6px; align-items: center; overflow: hidden; }
.steps button { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; color: var(--dim); border: 1px solid var(--line); white-space: nowrap; transition: 0.25s; }
.steps button em { font-style: normal; font-family: var(--en); font-weight: 700; font-size: 11px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(148, 163, 184, 0.12); }
.steps button.done { color: var(--mut); }
.steps button.done em { background: rgba(34, 211, 238, 0.25); color: var(--cyan); }
.steps button.cur { color: #fff; border-color: rgba(167, 139, 250, 0.6); background: rgba(167, 139, 250, 0.14); }
.steps button.cur em { background: var(--grad); color: #0b1020; }
.steps button.run { animation: glowp 1.4s ease-in-out infinite; }
@keyframes glowp { 50% { box-shadow: 0 0 18px rgba(167, 139, 250, 0.55); } }
.ctrl { grid-row: 1 / 3; grid-column: 2; display: flex; align-items: center; gap: 10px; }
.ib { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--line2); color: var(--mut); transition: 0.2s; }
.ib:hover { color: var(--txt); border-color: rgba(167, 139, 250, 0.5); }
.ib.on { color: var(--cyan); border-color: rgba(34, 211, 238, 0.5); background: rgba(34, 211, 238, 0.08); }
.ib .ic { width: 22px; height: 22px; }
.go { height: 64px; padding: 0 30px 0 24px; border-radius: 18px; display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; background: var(--grad); color: #0b1020; box-shadow: 0 10px 40px rgba(167, 139, 250, 0.4); transition: 0.2s; min-width: 200px; justify-content: center; }
.go .ic { width: 22px; height: 22px; }
.go:hover { transform: translateY(-1px); filter: brightness(1.08); }
.go.busy { background: linear-gradient(100deg, #334155, #475569); color: #e2e8f0; box-shadow: none; }

/* メイン */
#main { position: absolute; top: 68px; bottom: 118px; left: 0; right: 0; padding: 14px 28px; z-index: 1; }
.scene { height: 100%; display: flex; flex-direction: column; animation: fadein 0.45s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }
.sbody { flex: 1; min-height: 0; margin-top: 12px; }
.sc-home .sbody { margin-top: 0; }
.shead { height: 62px; display: flex; align-items: center; gap: 16px; }
.sno { min-width: 62px; height: 52px; padding: 0 10px; border-radius: 14px; display: grid; place-items: center; font-family: var(--en); font-weight: 900; font-size: 24px; background: var(--grad); color: #0b1020; box-shadow: 0 0 30px rgba(167, 139, 250, 0.4); }
.stitle h1 { font-size: 26px; font-weight: 800; letter-spacing: 0.01em; }
.stitle p { font-size: 14px; color: var(--mut); margin-top: 2px; }
.stitle { flex: 1; min-width: 0; }
.subtabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(148, 163, 184, 0.08); border: 1px solid var(--line); }
.subtabs button { padding: 8px 14px; border-radius: 9px; font-size: 13px; color: var(--mut); white-space: nowrap; }
.subtabs button.on { background: rgba(34, 211, 238, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.4); }
.schips { display: flex; gap: 6px; }
.chip { padding: 6px 11px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line2); color: #c4d0e4; white-space: nowrap; background: rgba(148, 163, 184, 0.05); }

/* パネル */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; min-height: 0; min-width: 0; backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04); position: relative; }
.ph { height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.ph b { font-size: 14px; font-weight: 700; }
.ph-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(34, 211, 238, 0.14); color: var(--cyan); }
.ph-ic .ic { width: 15px; height: 15px; }
.ph-r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pb { flex: 1; min-height: 0; padding: 12px 16px; overflow: hidden; position: relative; }
.live-dot { font-family: var(--en); font-size: 11px; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: 6px; letter-spacing: 0.08em; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; box-shadow: 0 0 10px var(--red); }
@keyframes blink { 50% { opacity: 0.25; } }
.note { font-size: 11px; color: var(--dim); display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.note .ic { width: 14px; height: 14px; }
.view { height: 100%; }
.view.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--dim); font-size: 14px; text-align: center; }
.view.empty .ic { width: 44px; height: 44px; opacity: 0.5; }
.in-scr { animation: fadein 0.4s ease; }
.typing::after { content: "▍"; color: var(--cyan); animation: blink 0.8s infinite; margin-left: 1px; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; transition: 0.2s; }
.btn.pri { background: var(--grad); color: #0b1020; }
.btn.ghost { border: 1px solid var(--line2); color: var(--mut); }
.btn .ic { width: 16px; height: 16px; }
.pressed { animation: press 0.5s ease; box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.35), 0 0 30px rgba(167, 139, 250, 0.6) !important; }
@keyframes press { 40% { transform: scale(0.93); } }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; background: rgba(96, 165, 250, 0.14); color: #93c5fd; white-space: nowrap; }

/* 波形 */
.wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.wave i { width: 3px; height: var(--h); border-radius: 3px; background: linear-gradient(var(--cyan), var(--violet)); opacity: 0.35; transform: scaleY(0.3); transition: 0.3s; }
body.talking .wave i, .speaking .wave i { opacity: 1; animation: wv 0.6s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes wv { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.wave.sm { height: 22px; margin-left: auto; }
.wave.sm i { width: 2px; }
.wave.lg { height: 56px; justify-content: center; margin: 4px 0 10px; }
.wave.lg i { width: 4px; }

/* フロー図 */
.flow { position: relative; }
.flow-svg { position: absolute; inset: 0; overflow: visible; }
.fe { fill: none; stroke: rgba(148, 163, 184, 0.22); stroke-width: 2; transition: stroke 0.3s; }
.fe.live { stroke: rgba(34, 211, 238, 0.6); }
.fe.done { stroke: rgba(34, 211, 238, 0.45); }
.fe-flow { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 12; opacity: 0; filter: drop-shadow(0 0 4px var(--cyan)); }
.fe-flow.live { opacity: 1; animation: dash 0.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -14; } }
.fe-lab { font-size: 10px; fill: var(--mut); }
.fn { --k: #94a3b8; position: absolute; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 13px; background: rgba(10, 16, 32, 0.92); border: 1px solid rgba(148, 163, 184, 0.2); transition: 0.35s; opacity: 0.62; }
.fn-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); }
.fn-ic .ic { width: 17px; height: 17px; }
.fn-b { min-width: 0; }
.fn-tag { font-size: 10px; font-weight: 700; color: var(--k); letter-spacing: 0.04em; }
.fn-t { font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-s { font-size: 10.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-st { position: absolute; right: 8px; bottom: -10px; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #0b1224; border: 1px solid var(--k); color: var(--k); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: 0.3s; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; }
.fn-st:not(:empty) { opacity: 1; transform: none; }
.fn.on { opacity: 1; border-color: var(--k); box-shadow: 0 0 0 1px var(--k), 0 0 28px color-mix(in srgb, var(--k) 55%, transparent); transform: translateY(-2px); }
.fn.on .fn-ic { background: var(--k); color: #0b1020; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--k) 25%, transparent); } }
.fn.done { opacity: 1; border-color: color-mix(in srgb, var(--k) 55%, transparent); }
.fn.done .fn-st::before { content: "✓ "; }
.fn.skip { opacity: 0.25; }
.fn.mini { flex-direction: column; justify-content: center; gap: 4px; padding: 6px; text-align: center; }
.fn.mini .fn-ic { width: 26px; height: 26px; }
.fn.mini .fn-t { font-size: 12px; }
.fn.mini .fn-tag { display: none; }
.k-io { --k: #60a5fa; } .k-out { --k: #34d399; } .k-stt { --k: #22d3ee; } .k-llm { --k: #a78bfa; } .k-code { --k: #fbbf24; }
.k-kb { --k: #34d399; } .k-rule { --k: #60a5fa; } .k-multi { --k: #f472b6; } .k-vision { --k: #fb923c; } .k-tpl { --k: #f9a8d4; }
.k-tool { --k: #fb923c; } .k-guard { --k: #2dd4bf; } .k-human { --k: #fbbf24; } .k-agent { --k: #a78bfa; }

/* グラフ */
.chart .grid { stroke: rgba(148, 163, 184, 0.1); }
.chart .axis { font-size: 10px; fill: var(--dim); font-family: var(--en); }
.chart .ln { fill: none; stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; }
.chart .ln2 { stroke-width: 1.6; stroke-dasharray: 0.01 0.012; opacity: 0.8; }
.chart .area { opacity: 0; transition: opacity 1s 0.8s; }
.charts .chart .ln { animation: draw 1.6s ease forwards; }
.charts .chart .ln2 { animation: none; stroke-dashoffset: 0; }
.charts .chart .area { opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .mark { opacity: 0; transition: 0.5s; }
.hl .chart .mark { opacity: 1; }
.chart .mark line { stroke: var(--pink); stroke-dasharray: 4 4; }
.chart .mark circle { fill: var(--pink); stroke: #fff; stroke-width: 2; }
.chart .mark text { fill: var(--pink); font-size: 12px; font-weight: 700; }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center; gap: 10px; font-size: 13px; position: relative; }
.bar .bl { color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .bt { height: 14px; border-radius: 7px; background: rgba(148, 163, 184, 0.1); overflow: hidden; }
.bar .bt i { display: block; height: 100%; width: 0; border-radius: 7px; background: var(--c, linear-gradient(90deg, var(--cyan), var(--violet))); transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bars.grow .bt i, .charts .bars .bt i { width: var(--w); }
.bar .bv { font-family: var(--en); font-weight: 700; text-align: right; }
.bar .bn { position: absolute; right: -2px; top: -15px; font-size: 11px; color: var(--mut); }
.bar.hot .bt i { background: linear-gradient(90deg, var(--pink), var(--amber)); }
.up { color: var(--pink); }
.donut { position: relative; }
.donut svg { transform: rotate(-90deg); }
.donut .seg { fill: none; stroke-dasharray: 0 100; stroke-dashoffset: var(--off); transition: stroke-dasharray 1.2s ease; }
.charts .donut .seg { stroke-dasharray: var(--len) 100; }
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-c b { font-family: var(--en); font-size: 26px; font-weight: 800; }
.donut-c small { font-size: 11px; color: var(--mut); }

/* スマホ */
.phone { width: 350px; height: 720px; border-radius: 46px; background: #0b1020; border: 10px solid #1a2238; box-shadow: 0 0 0 2px #2b3552, 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(34, 211, 238, 0.12); position: relative; overflow: hidden; margin: 0 auto; }
.ph-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 110px; height: 28px; border-radius: 16px; background: #000; z-index: 3; }
.ph-status { position: absolute; top: 12px; left: 26px; right: 22px; display: flex; justify-content: space-between; font-size: 13px; font-family: var(--en); z-index: 2; color: #e2e8f0; }
.ph-status span { display: flex; gap: 4px; align-items: center; font-size: 11px; }
.ph-status .ic { width: 13px; height: 13px; }
.ph-screen { position: absolute; inset: 46px 0 0; overflow: hidden; }
.scr { height: 100%; }

/* ホーム */
.home { height: 100%; display: grid; grid-template-rows: 396px 112px 1fr; gap: 16px; }
.hero { display: grid; grid-template-columns: 1fr 560px; gap: 30px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #c4b5fd; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.08); }
.hero h1 { font-size: 52px; line-height: 1.25; font-weight: 900; margin: 18px 0 14px; letter-spacing: 0.01em; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 17px; color: #b7c3d7; line-height: 1.75; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.pillar { padding: 14px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.pillar.p1 { border-color: rgba(96, 165, 250, 0.35); }
.pillar.p2 { border-color: rgba(167, 139, 250, 0.35); }
.pl-h { display: flex; align-items: center; gap: 8px; }
.pl-h b { font-family: var(--en); font-size: 16px; }
.pl-h span { margin-left: auto; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(34, 211, 238, 0.12); color: var(--cyan); }
.p1 .pl-h .ic { color: var(--blue); }
.p2 .pl-h .ic { color: var(--violet); }
.pillar p { font-size: 13px; color: var(--mut); margin-top: 6px; line-height: 1.6; }
.hero-r { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.orb { width: 260px; height: 260px; position: relative; display: grid; place-items: center; }
.orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--cyan); border-right-color: rgba(167, 139, 250, 0.6); animation: spin 6s linear infinite; }
.orb i:nth-child(2) { inset: 24px; border-top-color: var(--pink); border-left-color: rgba(34, 211, 238, 0.5); animation-duration: 9s; animation-direction: reverse; }
.orb i:nth-child(3) { inset: 50px; border-top-color: var(--violet); animation-duration: 4s; }
@keyframes spin { to { transform: rotate(360deg); } }
.orb-c { width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.5), rgba(34, 211, 238, 0.15) 60%, transparent); box-shadow: 0 0 80px rgba(167, 139, 250, 0.5); }
.orb-c .ic { width: 26px; height: 26px; color: #fff; }
.orb-c b { font-family: var(--en); font-size: 54px; font-weight: 900; line-height: 1; }
.orb-c span { font-family: var(--en); font-size: 12px; color: #c7d2fe; letter-spacing: 0.15em; }
.msgs { display: flex; flex-direction: column; gap: 8px; }
.msgs div { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #cbd5e1; }
.msgs .ic { color: var(--green); }
.story { display: flex; align-items: stretch; gap: 0; padding: 0 4px; }
.st-n { flex: 1; position: relative; padding: 14px 14px 12px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: 0.4s; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.st-n .ic { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--mut); transition: 0.4s; }
.st-n b { font-size: 15px; }
.st-n small { font-size: 12px; color: var(--mut); }
.st-n em { position: absolute; top: -9px; right: 10px; font-style: normal; font-family: var(--en); font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: #1e293b; color: var(--mut); border: 1px solid var(--line2); }
.st-n.lit { border-color: rgba(34, 211, 238, 0.6); box-shadow: 0 0 30px rgba(34, 211, 238, 0.25); background: linear-gradient(140deg, rgba(34, 211, 238, 0.14), rgba(167, 139, 250, 0.12)); }
.st-n.lit .ic { color: var(--cyan); }
.st-n.lit em { background: var(--grad); color: #0b1020; border-color: transparent; }
.st-a { width: 34px; display: grid; place-items: center; }
.st-a i { width: 22px; height: 2px; background: var(--line2); position: relative; }
.st-a i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--line2); border-right: 0; }
.st-a.lit i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.st-a.lit i::after { border-left-color: var(--cyan); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 14px; }
.tile { --c: var(--cyan); text-align: left; padding: 16px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); position: relative; overflow: hidden; transition: 0.3s; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; }
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 160px at 100% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); }
.tile:hover, .tile.in { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-2px); box-shadow: 0 0 40px color-mix(in srgb, var(--c) 20%, transparent); }
.tl-no { grid-row: 1 / 4; font-family: var(--en); font-weight: 900; font-size: 22px; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #0b1020; background: var(--c); position: relative; }
.tl-ic { display: flex; gap: 8px; color: var(--c); position: relative; }
.tile b { font-size: 18px; margin-top: 4px; position: relative; }
.tile p { font-size: 13px; color: var(--mut); position: relative; margin-top: 4px; }
.tl-go { position: absolute; right: 16px; bottom: 12px; font-size: 12px; color: var(--c); display: flex; align-items: center; gap: 4px; }
.tl-go .ic { width: 14px; height: 14px; }
.c-cyan { --c: #22d3ee; } .c-violet { --c: #a78bfa; } .c-pink { --c: #f472b6; } .c-green { --c: #34d399; } .c-amber { --c: #fbbf24; } .c-blue { --c: #60a5fa; }

/* 共通: 書き起こし */
.tr { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.tl { display: grid; grid-template-columns: 92px 1fr; gap: 10px; opacity: 0; transform: translateY(6px); transition: 0.35s; font-size: 14px; line-height: 1.65; }
.tl.in { opacity: 1; transform: none; }
.tl .who { font-size: 12px; font-weight: 700; padding-top: 2px; color: var(--cyan); display: flex; gap: 6px; align-items: flex-start; }
.tl.man .who { color: var(--amber); }
.tl.speaking p { color: #fff; text-shadow: 0 0 12px rgba(34, 211, 238, 0.35); }
.pii { transition: 0.3s; border-radius: 4px; }
.pii.found { background: rgba(248, 113, 113, 0.25); box-shadow: 0 0 0 1px var(--red); color: #fecaca; }
.pii.masked { background: rgba(45, 212, 191, 0.18); box-shadow: 0 0 0 1px var(--teal); color: var(--teal); font-weight: 700; padding: 0 3px; }

/* ① 構造化支援 */
.g-struct { display: grid; grid-template-columns: 420px 790px 1fr; gap: 16px; height: 100%; }
.st-in .pb { display: flex; flex-direction: column; gap: 14px; }
.src-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.src-h .ic { color: var(--cyan); align-self: center; }
.src-h b { font-size: 14px; }
.src-h .big { margin-left: auto; font-family: var(--en); font-size: 28px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.src-h small { color: var(--mut); font-size: 12px; }
.calls { display: flex; flex-direction: column; gap: 6px; }
.call { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(148, 163, 184, 0.06); border: 1px solid transparent; font-size: 13px; }
.call i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 211, 238, 0.14); color: var(--cyan); }
.call i .ic { width: 11px; height: 11px; }
.call b { font-family: var(--mono); font-size: 12px; }
.call small { display: block; color: var(--mut); font-size: 11.5px; }
.call span { margin-left: auto; font-family: var(--en); font-size: 12px; color: var(--mut); }
.call.playing { border-color: rgba(34, 211, 238, 0.6); background: rgba(34, 211, 238, 0.1); box-shadow: 0 0 20px rgba(34, 211, 238, 0.2); }
.mini { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini td { padding: 6px 4px; border-bottom: 1px solid var(--line); color: #cbd5e1; }
.mini td:first-child { font-family: var(--en); color: var(--mut); white-space: nowrap; }
.st-mid { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-height: 0; }
.st-flowp .pb { padding: 12px 16px 16px; }
.st-view { height: 100%; }
.tr-h { display: flex; align-items: center; gap: 10px; font-size: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.tr-h .ic { color: var(--cyan); }
.tr-h b { font-family: var(--mono); }
.tr-h span { color: var(--mut); }
.st-view .view { display: flex; flex-direction: column; }
#st-tr { flex: 1; min-height: 0; }
.rec { display: flex; flex-direction: column; gap: 6px; }
.rec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rec-h .ic { color: var(--violet); }
.rec-h code { margin-left: auto; color: var(--mut); font-size: 12px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 7px 12px; border-radius: 8px; background: rgba(167, 139, 250, 0.06); border-left: 3px solid var(--violet); font-size: 14px; animation: fadein 0.3s; }
.kv span { color: #c4b5fd; font-size: 12.5px; font-weight: 700; padding-top: 1px; }
.st-out .pb { display: flex; flex-direction: column; }
.st-tabs { display: flex; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 12px; background: rgba(148, 163, 184, 0.07); }
.st-tabs button { flex: 1; padding: 8px; border-radius: 9px; font-size: 13px; color: var(--mut); }
.st-tabs button.on { background: rgba(34, 211, 238, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.4); }
.st-pane { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 12px; animation: fadein 0.35s; }
.st-pane.on { display: flex; }
.batch { padding: 10px 12px; border-radius: 12px; background: rgba(34, 211, 238, 0.07); border: 1px solid rgba(34, 211, 238, 0.25); }
.bt-h { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--mut); }
.bt-h b { font-family: var(--en); font-size: 22px; color: #fff; }
.bt-h span { margin-left: auto; color: var(--cyan); font-size: 12px; }
.prog { height: 6px; border-radius: 3px; background: rgba(148, 163, 184, 0.14); margin-top: 8px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 3.2s linear; border-radius: 3px; }
.grid-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.grid-t th { text-align: left; padding: 7px 6px; color: var(--mut); font-weight: 500; border-bottom: 1px solid var(--line2); font-size: 11.5px; white-space: nowrap; }
.grid-t td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.grid-t code { font-size: 11px; color: var(--mut); }
.in-row { animation: rowin 0.4s ease; }
@keyframes rowin { from { opacity: 0; transform: translateX(16px); background: rgba(34, 211, 238, 0.2); } }
.grid-t .more td { color: var(--dim); text-align: center; font-size: 12px; }
.col-risk { display: none; }
.risk-on .col-risk { display: table-cell; animation: colin 0.6s ease; }
@keyframes colin { from { background: rgba(244, 114, 182, 0.35); } }
.risk { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.r-高 { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }
.r-中 { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
.r-低 { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }
.kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis3 div { padding: 10px 12px; border-radius: 12px; background: rgba(148, 163, 184, 0.06); }
.kpis3 small { display: block; font-size: 11px; color: var(--mut); }
.kpis3 b { font-family: var(--en); font-size: 22px; }
.kpis3 span { font-size: 12px; color: var(--mut); margin-left: 4px; }
.kpis3 .hot { background: rgba(244, 114, 182, 0.1); box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.35); }
.kpis3 .hot b { font-size: 18px; font-family: var(--jp); }
.kpis3 .hot span { color: var(--pink); font-weight: 700; }
.st-bars { margin-top: 14px; gap: 16px; }
.st-bars .bar { grid-template-columns: 140px 1fr 56px; }
.insight { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.3); font-size: 13.5px; line-height: 1.65; margin-top: auto; }
.insight .ic { color: var(--violet); }
.bubbles { position: relative; height: 100%; }
.bubbles .bub { position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.35), rgba(167, 139, 250, 0.15)); border: 1px solid rgba(34, 211, 238, 0.45); transform: scale(0); transition: transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.bubbles .bub.in { transform: scale(1); animation: float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.7s); }
@keyframes float { 50% { translate: 0 -8px; } }
.bubbles .bub b { font-size: 13px; padding: 0 10px; }
.bubbles .bub span { font-family: var(--en); font-weight: 800; font-size: 18px; }
.bubbles .bub.hot { background: radial-gradient(circle at 30% 30%, rgba(244, 114, 182, 0.5), rgba(251, 191, 36, 0.15)); border-color: rgba(244, 114, 182, 0.7); box-shadow: 0 0 40px rgba(244, 114, 182, 0.35); }
.faqs { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.faq { padding: 9px 12px; border-radius: 12px; background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line); opacity: 0; transform: translateY(6px); transition: 0.35s; }
.faq.in { opacity: 1; transform: none; }
.fq-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fq-h code { font-size: 11px; color: var(--cyan); }
.fq-h small { margin-left: auto; font-size: 11px; color: var(--mut); display: flex; align-items: center; gap: 4px; }
.fq-h small .ic { width: 12px; height: 12px; }
.faq p { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; }
.faq p em { font-style: normal; font-family: var(--en); font-weight: 800; color: var(--violet); width: 14px; flex: none; }
.faq p.a { color: #b8c4d8; margin-top: 2px; }
.bdg { padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; opacity: 0; transform: scale(0.6); transition: 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
.bdg.in { opacity: 1; transform: none; }
.bdg.new, em.new { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.bdg.upd, em.upd { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
.bdg.mrg, em.mrg { background: rgba(167, 139, 250, 0.2); color: #c4b5fd; }
.evid { display: flex; flex-direction: column; gap: 10px; }
.ev-h { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.ev-h .ic { color: var(--pink); }
.utt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(244, 114, 182, 0.07); border: 1px solid rgba(244, 114, 182, 0.2); font-size: 14px; animation: fadein 0.4s both; animation-delay: calc(var(--i) * 0.25s); }
.utt .ic { color: var(--pink); }
.utt small { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--mut); }
.ev-arrow { align-self: center; display: flex; gap: 8px; align-items: center; padding: 8px 16px; border-radius: 999px; background: rgba(167, 139, 250, 0.15); color: #c4b5fd; font-size: 13px; animation: fadein 0.4s 0.8s both; }
.ev-out { padding: 14px 16px; border-radius: 12px; background: linear-gradient(120deg, rgba(34, 211, 238, 0.14), rgba(167, 139, 250, 0.14)); border: 1px solid rgba(34, 211, 238, 0.4); font-size: 15px; animation: fadein 0.4s 1.1s both; }
.ev-out b { font-family: var(--mono); color: var(--cyan); margin-right: 8px; font-size: 12px; }
.diff { display: flex; flex-direction: column; gap: 12px; }
.df-h { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.df-h .ic { color: var(--amber); }
.df-col { padding: 12px 14px; border-radius: 12px; background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.df-col small { display: block; font-size: 11px; color: var(--mut); margin-bottom: 4px; }
.df-col.new { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.06); }
ins { text-decoration: none; background: rgba(52, 211, 153, 0.2); color: #a7f3d0; padding: 1px 3px; border-radius: 4px; }
.df-why { display: flex; gap: 8px; font-size: 13px; color: #b8c4d8; line-height: 1.6; }
.df-why .ic { color: var(--cyan); }
.df-act { display: flex; gap: 10px; justify-content: flex-end; }
.nodeset { display: flex; flex-direction: column; gap: 10px; }
.ns-h { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.ns-h .ic { color: var(--violet); }
.ns-h span { font-size: 12px; color: var(--mut); padding: 2px 8px; border-radius: 6px; background: rgba(167, 139, 250, 0.12); }
.ns-sec { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(148, 163, 184, 0.05); border: 1px solid var(--line); }
.ns-sec > small { font-size: 11px; color: var(--mut); margin-bottom: 2px; }
.ns-f { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; background: rgba(15, 23, 42, 0.8); font-size: 13.5px; }
.ns-f .ic { color: var(--green); width: 15px; height: 15px; }
.ns-f span { margin-left: auto; font-size: 11px; color: var(--mut); }
.ns-f.add { border: 1px dashed rgba(244, 114, 182, 0.6); opacity: 0.4; }
.ns-f.add .ic { color: var(--pink); }
.ns-f.add.in { opacity: 1; background: rgba(244, 114, 182, 0.1); box-shadow: 0 0 20px rgba(244, 114, 182, 0.25); }
.ns-rule { padding: 10px; border-radius: 8px; background: rgba(244, 114, 182, 0.06); font-size: 13px; }
.ns-rule small { font-size: 11px; color: var(--mut); }
.ns-act { display: flex; justify-content: flex-end; }
.kbreg { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.kb-big { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: linear-gradient(120deg, rgba(52, 211, 153, 0.15), rgba(34, 211, 238, 0.1)); border: 1px solid rgba(52, 211, 153, 0.4); }
.kb-big > .ic { width: 36px; height: 36px; color: var(--green); }
.kb-big small { display: block; font-size: 12px; color: var(--mut); }
.kb-big b { font-family: var(--en); font-size: 30px; }
.delta { margin-left: 10px; color: var(--green); font-weight: 700; font-size: 14px; }
.kb-list { display: flex; flex-direction: column; gap: 6px; }
.kb-i { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: rgba(148, 163, 184, 0.06); font-size: 12.5px; opacity: 0.3; transition: 0.4s; }
.kb-i.in { opacity: 1; }
.kb-i code { font-size: 11px; color: var(--cyan); }
.kb-i span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-i em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.kb-use { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.kb-use b { grid-column: 1 / 3; font-size: 12px; color: var(--mut); }
.kb-use div { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.25); font-size: 13px; }
.kb-use .ic { color: var(--cyan); }
.assist { display: flex; flex-direction: column; gap: 12px; }
.as-h { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.as-h .ic { color: var(--amber); }

/* メッセージ（共通） */
.msg { display: flex; gap: 10px; max-width: 88%; animation: fadein 0.35s; }
.msg p { padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; }
.msg.u { align-self: flex-end; }
.msg.u p { background: linear-gradient(120deg, rgba(96, 165, 250, 0.3), rgba(167, 139, 250, 0.3)); border-bottom-right-radius: 4px; }
.msg.ai p { background: rgba(148, 163, 184, 0.09); border: 1px solid var(--line); border-top-left-radius: 4px; }
.msg .av { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--grad); color: #0b1020; font-weight: 800; }
.msg .who { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: #c4b5fd; }
.msg .who small { color: var(--mut); font-weight: 400; margin-left: 6px; }
.src-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.src-tags span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, 0.3); animation: fadein 0.3s; }
.src-tags span.g { background: rgba(45, 212, 191, 0.12); color: var(--teal); }
.src-tags .ic { width: 13px; height: 13px; }
.msg.guard p { border-color: rgba(45, 212, 191, 0.45); }

/* ② 音声メモ */
.g-memo { display: grid; grid-template-columns: 400px 600px 1fr; gap: 16px; height: 100%; }
.mm-l { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mm-lab { font-size: 13px; color: var(--mut); display: flex; gap: 6px; align-items: center; }
.rec-app { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 18px 20px 26px; background: linear-gradient(#0f172a, #111a33); }
.ra-h { text-align: center; }
.ra-h b { font-size: 18px; }
.ra-h small { display: block; font-size: 12px; color: var(--mut); margin-top: 2px; }
.ra-time { font-family: var(--en); font-size: 48px; font-weight: 300; margin: 14px 0 4px; letter-spacing: 0.04em; }
.wave.rec { height: 60px; }
.wave.rec i { width: 4px; background: linear-gradient(var(--pink), var(--amber)); }
.ra-tr { flex: 1; width: 100%; margin: 14px 0; padding: 12px 14px; border-radius: 16px; background: rgba(148, 163, 184, 0.07); font-size: 14px; line-height: 1.8; overflow-y: auto; color: #dbe4f3; }
.ra-btn { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #e2e8f0; display: grid; place-items: center; }
.ra-btn i { width: 54px; height: 54px; border-radius: 50%; background: #ef4444; transition: 0.3s; }
.ra-btn.on i { width: 28px; height: 28px; border-radius: 8px; animation: recp 1.2s infinite; }
@keyframes recp { 50% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0.2); } }
.ra-st { font-size: 12px; color: var(--mut); margin-top: 8px; }
.mm-c { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-height: 0; }
.mm-flowp .pb { padding: 12px 15px 18px; }
.mm-corep .pb { display: flex; flex-direction: column; gap: 10px; }
.mm-txt { padding: 10px 12px; border-radius: 12px; background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line); font-size: 13px; line-height: 1.6; min-height: 110px; }
.ph-empty { color: var(--dim); font-size: 13px; }
.fil { transition: 0.4s; border-radius: 4px; display: inline-block; max-width: 8em; overflow: hidden; vertical-align: bottom; white-space: nowrap; }
.fil.hit { background: rgba(248, 113, 113, 0.25); color: #fecaca; text-decoration: line-through; box-shadow: 0 0 0 1px var(--red); }
.fil.gone { max-width: 0; opacity: 0; padding: 0; margin: 0; box-shadow: none; }
.mm-txt .clean { color: #f1f5f9; }
.mm-stat { display: flex; gap: 14px; font-size: 12px; color: var(--green); }
.mm-stat span { display: flex; align-items: center; gap: 5px; }
.mm-stat .ic { width: 14px; height: 14px; }
.cores { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.core-c { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 5px 10px; border-radius: 10px; background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.25); opacity: 0; transform: scale(0.85); transition: 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); }
.core-c.in { opacity: 1; transform: none; }
.core-c .ic { grid-row: 1 / 3; color: var(--violet); align-self: center; }
.core-c small { font-size: 10.5px; color: var(--mut); }
.core-c b { font-size: 13px; line-height: 1.35; }
.mm-r { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mm-rh { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.mo-k { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mo-k .ic { color: var(--amber); }
.mo-k b { font-size: 24px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mo-t { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mut); }
.mo-t b { font-family: var(--en); font-size: 24px; color: #fff; min-width: 54px; text-align: right; }
.outs { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 0.82fr 1.18fr; gap: 12px; }
.o-day .kv2 { grid-template-columns: 104px 1fr; }
.o-chat .teams-msg pre { font-size: 12px; line-height: 1.5; }
.oc { padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); opacity: 0.35; transition: 0.4s; overflow: hidden; min-height: 0; }
.oc.in { opacity: 1; border-color: rgba(167, 139, 250, 0.35); }
.oc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.oc-h .ic { color: var(--violet); }
.o-sum { grid-column: 1 / 3; }
.o-sum p { font-size: 15px; line-height: 1.7; }
.kv2 { display: grid; grid-template-columns: 84px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.55; padding: 2px 0; }
.kv2 span { color: var(--mut); }
.kv2 b { font-weight: 500; }
.todo { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.todo i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--line2); transition: 0.3s; }
.todo.ok i { border-color: var(--cyan); background: rgba(34, 211, 238, 0.2); }
.todo em { font-style: normal; font-size: 11px; color: var(--cyan); }
.todo u { text-decoration: none; font-size: 10px; padding: 1px 6px; border-radius: 5px; }
.p-高 { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }
.p-中 { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
.apps { margin-left: auto; display: flex; gap: 5px; }
.apps i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; }
.apps .teams { background: #5b5fc7; }
.apps .slack { background: #4a154b; }
.teams-msg { border-radius: 12px; background: #1f2140; border: 1px solid rgba(91, 95, 199, 0.5); padding: 10px 12px; }
.tm-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 6px; }
.tm-h .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #5b5fc7; font-size: 11px; font-weight: 700; }
.tm-h small { color: var(--mut); margin-left: auto; }
.teams-msg pre { font-family: var(--jp); white-space: pre-wrap; font-size: 12.5px; line-height: 1.6; }
.send-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.send-row span { font-size: 12px; color: var(--green); display: flex; align-items: center; gap: 5px; }
.send-row .ic { width: 14px; height: 14px; }
.o-chat.sent .teams-msg { box-shadow: 0 0 30px rgba(91, 95, 199, 0.5); }

/* ③ 議事録 */
.g-minutes { display: grid; grid-template-columns: 500px 362px 1fr; gap: 16px; height: 100%; }
.mt-l .pb { display: flex; flex-direction: column; gap: 10px; }
.mt-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(34, 211, 238, 0.07); border: 1px solid rgba(34, 211, 238, 0.25); }
.mt-file > .ic { color: var(--cyan); width: 26px; height: 26px; }
.mt-file b { font-size: 13px; display: block; }
.mt-file small { color: var(--mut); font-size: 11.5px; }
.mt-ppl { display: flex; gap: 8px; }
.ppl { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(148, 163, 184, 0.07); }
.ppl i, .tl .who i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; color: #0b1020; flex: none; }
.ppl small { color: var(--mut); font-size: 11px; }
.c1 i { background: var(--amber); } .c2 i { background: var(--cyan); } .c3 i { background: var(--pink); }
.mt-tr { flex: 1; min-height: 0; }
.mt-tr .tl { grid-template-columns: 80px 1fr; position: relative; padding: 4px 8px; border-radius: 10px; border-left: 3px solid transparent; }
.mt-tr .tl.c1 .who { color: var(--amber); } .mt-tr .tl.c2 .who { color: var(--cyan); } .mt-tr .tl.c3 .who { color: var(--pink); }
.mt-tr .tl p { font-size: 13.5px; }
.tpt { position: absolute; right: 6px; top: -8px; font-style: normal; font-size: 10.5px; padding: 0 7px; border-radius: 6px; background: #0b1224; }
.tl.t-実績 { border-left-color: var(--cyan); background: rgba(34, 211, 238, 0.05); } .tl.t-実績 .tpt { color: var(--cyan); border: 1px solid var(--cyan); }
.tl.t-住所変更 { border-left-color: var(--pink); background: rgba(244, 114, 182, 0.05); } .tl.t-住所変更 .tpt { color: var(--pink); border: 1px solid var(--pink); }
.tl.t-年末FAQ { border-left-color: var(--amber); background: rgba(251, 191, 36, 0.05); } .tl.t-年末FAQ .tpt { color: var(--amber); border: 1px solid var(--amber); }
.mt-c .pb { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.mt-tops { display: flex; flex-direction: column; gap: 6px; }
.tp { padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; opacity: 0; transform: translateX(-10px); transition: 0.35s; }
.tp.in { opacity: 1; transform: none; }
.tp.t-実績 { background: rgba(34, 211, 238, 0.12); color: var(--cyan); }
.tp.t-住所変更 { background: rgba(244, 114, 182, 0.12); color: var(--pink); }
.tp.t-年末FAQ { background: rgba(251, 191, 36, 0.12); color: var(--amber); }
.exp { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 12px; border: 1px solid var(--line2); color: var(--dim); transition: 0.3s; }
.exp .ic { width: 14px; height: 14px; }
.exp.ok { color: #0b1020; background: var(--green); border-color: var(--green); box-shadow: 0 0 18px rgba(52, 211, 153, 0.5); }
.a4wrap { display: flex; justify-content: center; background: rgba(2, 6, 23, 0.4); }
.a4 { width: 600px; height: 100%; background: #fbfcfe; color: #1e293b; border-radius: 6px; padding: 22px 30px; font-size: 12.5px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden; transition: box-shadow 0.4s; }
.a4.live { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.6), 0 20px 60px rgba(0, 0, 0, 0.5); }
.a4-top { display: flex; justify-content: space-between; font-size: 10.5px; color: #64748b; border-bottom: 1px solid #cbd5e1; padding-bottom: 6px; }
.a4 h2 { text-align: center; font-size: 22px; letter-spacing: 0.4em; margin: 10px 0 10px; }
.a4 h3 { font-size: 13px; margin: 10px 0 5px; padding-left: 8px; border-left: 4px solid #6366f1; }
.a4t { width: 100%; border-collapse: collapse; }
.a4t th, .a4t td { border: 1px solid #cbd5e1; padding: 4px 8px; text-align: left; min-height: 22px; height: 24px; }
.a4t th { background: #eef2ff; width: 70px; font-weight: 700; white-space: nowrap; }
.todo-t th { width: auto; }
.a4-item { margin: 3px 0 5px; }
.a4-item b { font-size: 12.5px; }
.a4-item b.t-実績 { color: #0891b2; } .a4-item b.t-住所変更 { color: #db2777; } .a4-item b.t-年末FAQ { color: #b45309; }
.a4-item p { padding-left: 14px; line-height: 1.55; min-height: 18px; }
.a4 ol, .a4 ul { padding-left: 26px; line-height: 1.6; }
.a4 li:empty { list-style: none; }
.a4 .typing::after { color: #6366f1; }
.a4-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: #64748b; }
.stamp { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #dc2626; color: #dc2626; font-weight: 800; font-size: 12px; opacity: 0; transform: scale(2) rotate(-20deg); transition: 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.stamp.in { opacity: 0.9; transform: rotate(-12deg); }

/* ③ 月次レポート */
.g-report { display: grid; grid-template-columns: 372px 1fr; gap: 16px; height: 100%; }
.rp-l { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-height: 0; }
.rp-src .pb { display: flex; flex-direction: column; gap: 8px; }
.ds { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(148, 163, 184, 0.06); }
.ds > span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(34, 211, 238, 0.12); color: var(--cyan); }
.ds b { font-size: 13px; display: block; }
.ds small { font-size: 11px; color: var(--mut); }
.ds em { margin-left: auto; font-style: normal; font-family: var(--en); font-weight: 800; font-size: 18px; }
.rp-flowp .pb { padding-top: 14px; }
.rp-doc { padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.rp-doc > * { flex: none; }
.rp-h { display: flex; align-items: flex-end; justify-content: space-between; }
.rp-h small { color: var(--mut); font-size: 12px; }
.rp-h h2 { font-size: 22px; }
.rp-h h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 8px; }
.rp-by { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c4b5fd; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(167, 139, 250, 0.35); }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.kpi { padding: 8px 14px; border-radius: 14px; background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line); transition: 0.4s; }
.kpi.in { border-color: rgba(34, 211, 238, 0.35); box-shadow: 0 0 24px rgba(34, 211, 238, 0.12); }
.kpi small { font-size: 12px; color: var(--mut); }
.kpi b { display: block; font-family: var(--en); font-size: 27px; font-weight: 800; line-height: 1.15; }
.kpi b i { font-style: normal; font-size: 14px; color: var(--mut); margin-left: 3px; }
.kpi em { font-style: normal; font-size: 12px; font-weight: 700; }
.kpi em.good { color: var(--green); } .kpi em.up { color: var(--cyan); }
.rp-row { display: grid; grid-template-columns: 1fr 380px; gap: 12px; min-height: 0; }
.rp-card { padding: 10px 14px; border-radius: 14px; background: rgba(148, 163, 184, 0.05); border: 1px solid var(--line); min-width: 0; }
.rc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.rc-h span, .rc-h small { margin-left: auto; font-size: 11px; color: var(--mut); display: flex; gap: 6px; align-items: center; }
.rc-h .ic { color: var(--violet); }
.lg { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.lg.c1 { background: var(--cyan); } .lg.c2 { background: var(--violet); }
.rp-don { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 16px; align-items: center; }
.rp-don .rc-h { grid-column: 1 / 3; }
.lgd { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.lgd span { display: flex; align-items: center; gap: 8px; }
.lgd i { width: 10px; height: 10px; border-radius: 3px; }
.rp-bars { gap: 4px; }
.rp-bars .bar { grid-template-columns: 120px 1fr 60px; font-size: 12px; }
.rp-card { padding: 8px 14px; }
.sc { padding: 2px 4px; }
.rp-bars .bt { height: 10px; }
.sc { display: grid; grid-template-columns: 112px 1fr 40px 44px; align-items: center; gap: 8px; font-size: 12px; padding: 3px 4px; border-radius: 6px; transition: 0.4s; }
.sc-b { height: 8px; border-radius: 4px; background: rgba(148, 163, 184, 0.1); overflow: hidden; }
.sc-b i { display: block; height: 100%; width: 0; background: var(--green); transition: width 1.1s ease; }
.charts .sc-b i { width: var(--w); }
.sc b { font-family: var(--en); text-align: right; }
.sc em { font-style: normal; font-size: 11px; color: var(--mut); text-align: right; }
.sc.bad .sc-b i { background: var(--pink); }
.hl .sc.bad { background: rgba(244, 114, 182, 0.14); box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.5); }
.hl .sc.bad em, .hl .sc.bad b { color: var(--pink); }
.rp-ai p { font-size: 13px; line-height: 1.7; }
.rp-rec ol { padding-left: 20px; font-size: 13px; line-height: 1.7; }
.rp-ai p, .rp-rec ol { font-size: 12.5px; line-height: 1.6; }

/* ④-1 ナレッジ AI社員 */
.g-kb { display: grid; grid-template-columns: 400px 1fr 540px; gap: 16px; height: 100%; }
.kb-l { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-height: 0; }
.docs { display: flex; flex-direction: column; gap: 5px; }
.dc { display: grid; grid-template-columns: 66px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 9px; background: rgba(148, 163, 184, 0.05); font-size: 12.5px; opacity: 0.35; transition: 0.3s; }
.dc.in { opacity: 1; }
.dc b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc em { font-style: normal; font-family: var(--en); font-weight: 700; color: var(--green); }
.dc small { font-size: 10px; color: var(--dim); }
.ft { display: inline-grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px; font-family: var(--en); }
.ft-pdf { background: rgba(248, 113, 113, 0.2); color: #fca5a5; } .ft-doc { background: rgba(96, 165, 250, 0.2); color: #93c5fd; }
.ft-md { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; } .ft-xls, .ft-csv { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.ft-txt { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.kb-sum { display: flex; gap: 12px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--mut); }
.kb-sum b { color: #fff; font-family: var(--en); font-size: 15px; }
.kb-sum .ok { margin-left: auto; color: var(--teal); display: flex; align-items: center; gap: 4px; }
.kb-sum .ic { width: 13px; height: 13px; }
.kb-per .pb { display: flex; flex-direction: column; gap: 8px; }
.persona { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pav { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: #0b1020; font-weight: 900; font-size: 22px; box-shadow: 0 0 24px rgba(167, 139, 250, 0.5); }
.persona b { font-size: 17px; }
.persona small { display: block; font-size: 12px; color: var(--mut); }
.pr { display: grid; grid-template-columns: 70px 1fr; gap: 8px; font-size: 13px; padding: 7px 10px; border-radius: 9px; background: rgba(167, 139, 250, 0.07); }
.pr span { color: #c4b5fd; font-size: 12px; font-weight: 700; }
.pr b { font-weight: 500; min-height: 18px; }
.kb-c .pb { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.kb-c .fn { padding: 8px; gap: 7px; }
.kb-c .fn-ic { width: 24px; height: 24px; }
.kb-c .fn-t { font-size: 12px; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 4px 2px; scrollbar-width: none; }
.sys { align-self: center; font-size: 11.5px; color: var(--dim); display: flex; gap: 5px; align-items: center; }
.sys .ic { width: 13px; height: 13px; }
.inputbar { display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 16px; border-radius: 14px; background: rgba(148, 163, 184, 0.07); border: 1px solid var(--line2); }
.inp { flex: 1; min-height: 22px; font-size: 14px; }
.inp:empty::before { content: "AI社員に質問する…"; color: var(--dim); }
.inputbar .btn { padding: 9px 12px; }
.kb-ev { height: 100%; display: flex; flex-direction: column; gap: 10px; }
.rw small { font-size: 11px; color: var(--mut); }
.rw b { display: block; font-family: var(--mono); font-size: 13px; color: var(--cyan); padding: 6px 10px; border-radius: 8px; background: rgba(34, 211, 238, 0.08); margin-top: 3px; min-height: 30px; }
.scan { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sd { position: relative; font-size: 11px; padding: 4px 8px; border-radius: 6px; background: rgba(148, 163, 184, 0.06); overflow: hidden; color: var(--mut); white-space: nowrap; text-overflow: ellipsis; }
.sd i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.35)); }
.sd.grow i { animation: scanx 0.6s ease forwards; }
@keyframes scanx { to { width: 100%; opacity: 0; } }
.sd span { position: relative; }
.sd.sd-hit { color: #6ee7b7; background: rgba(52, 211, 153, 0.12); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.4); }
.sd.sd-miss { opacity: 0.4; }
.kb-ev > * { flex: none; }
.hits { display: flex; flex-direction: column; gap: 8px; }
.hit { padding: 9px 12px; border-radius: 12px; background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.3); opacity: 0; transform: translateX(14px); transition: 0.35s; }
.hit.in { opacity: 1; transform: none; }
.hit.low { background: rgba(148, 163, 184, 0.05); border-color: var(--line); }
.hit.low p { color: var(--dim); }
.hh { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 5px; }
.hh .ic { width: 14px; height: 14px; color: var(--green); }
.hh small { color: var(--mut); }
.hh .sc { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 0; }
.hh .sc i { display: block; width: 60px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green) var(--w), rgba(148, 163, 184, 0.15) var(--w)); }
.hh .sc em { font-style: normal; font-family: var(--en); font-weight: 700; color: var(--green); }
.hit.low .hh .sc em { color: var(--dim); }
.hit p { font-size: 12.5px; line-height: 1.6; color: #cbd5e1; }
mark { background: rgba(251, 191, 36, 0.22); color: #fde68a; border-radius: 3px; padding: 0 2px; }
.th { margin-top: 5px; font-size: 11px; color: var(--teal); }

/* ④-2 作業完遂 AI社員 */
.g-agent { display: grid; grid-template-columns: 380px 1fr 640px; gap: 16px; height: 100%; }
.ag-l .pb { display: flex; flex-direction: column; gap: 10px; }
.cnt { font-size: 12px; color: var(--mut); }
.cnt b { color: var(--green); font-family: var(--en); font-size: 15px; }
.roster { display: flex; flex-direction: column; gap: 9px; }
.stf { --c: var(--cyan); display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line); opacity: 0; transform: translateX(-12px); transition: 0.4s; }
.stf.in { opacity: 1; transform: none; }
.stf.c1 { --c: #22d3ee; } .stf.c2 { --c: #a78bfa; } .stf.c3 { --c: #f472b6; } .stf.c4 { --c: #fbbf24; } .stf.c5 { --c: #34d399; }
.sav { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); }
.sav .ic { width: 24px; height: 24px; }
.sb b { font-size: 14.5px; }
.sb small { display: block; font-size: 11.5px; color: var(--mut); }
.stl { display: flex; gap: 6px; margin-top: 5px; color: var(--dim); }
.stl .ic { width: 14px; height: 14px; }
.sst { text-align: right; }
.pill-s { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: rgba(148, 163, 184, 0.12); color: var(--mut); white-space: nowrap; }
.sst small { display: block; font-size: 10.5px; color: var(--dim); margin-top: 4px; }
.stf.work { border-color: var(--c); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 35%, transparent); }
.stf.work .pill-s { background: var(--c); color: #0b1020; font-weight: 700; animation: blink 1s infinite; }
.stf.fin .pill-s { background: rgba(52, 211, 153, 0.2); color: #6ee7b7; font-weight: 700; }
.stf.fresh { animation: hire 1.2s ease; }
@keyframes hire { 0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.8); } 60% { transform: scale(1.03); box-shadow: 0 0 0 16px rgba(52, 211, 153, 0); } }
.addst { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(52, 211, 153, 0.5); color: #6ee7b7; font-size: 14px; }
.ag-c .pb { padding: 14px 16px; }
.thread { height: 100%; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: none; }
.atts { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.att { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px 4px 4px; border-radius: 8px; background: rgba(148, 163, 184, 0.1); }
.assign { align-self: center; display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 6px 14px; border-radius: 999px; background: rgba(34, 211, 238, 0.12); color: var(--cyan); animation: fadein 0.4s; }
.worklog { padding: 12px 14px; border-radius: 14px; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--line2); animation: fadein 0.4s; }
.wl-h { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.wl-h .ic { color: var(--amber); }
.wl-h span { margin-left: auto; font-family: var(--en); font-size: 13px; color: var(--mut); }
.wl { display: grid; grid-template-columns: 32px 1fr auto 24px; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px dashed var(--line); opacity: 0.35; transition: 0.3s; }
.wl:last-child { border: 0; }
.wl-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(148, 163, 184, 0.1); color: var(--mut); }
.wl-ic .ic { width: 15px; height: 15px; }
.wl b { font-size: 13.5px; }
.wl small { display: block; font-size: 12px; color: var(--mut); font-family: var(--jp); }
.wl .tg { font-style: normal; font-size: 10.5px; padding: 2px 8px; border-radius: 6px; background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
.wl-st { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line2); }
.wl.on { opacity: 1; }
.wl.on .wl-ic { background: var(--amber); color: #0b1020; }
.wl.on .wl-st { border-color: var(--amber); border-top-color: transparent; animation: spin 0.7s linear infinite; }
.wl.ok { opacity: 1; }
.wl.ok .wl-ic { background: rgba(52, 211, 153, 0.18); color: var(--green); }
.wl.ok .wl-st { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 4px #0f172a; }
.wl.ok small { color: #b8c4d8; }
.msg p.pre { white-space: pre-wrap; }
.after { opacity: 0; transition: 0.4s; margin-top: 8px; }
.after.in { opacity: 1; }
.after .ttl { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.after p { background: none !important; border: 0 !important; padding: 8px 0 0 !important; font-size: 13.5px; }
.grid-t.rep { background: rgba(15, 23, 42, 0.7); border-radius: 10px; overflow: hidden; }
.grid-t.rep td { font-size: 12.5px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot.g { background: var(--green); box-shadow: 0 0 8px var(--green); } .dot.y { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ag-out { height: 100%; }
.dl { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.dl > * { flex: none; }
.dtabs { display: flex; gap: 6px; }
.dtabs span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 12px; border-radius: 9px; color: var(--mut); background: rgba(148, 163, 184, 0.07); }
.dtabs span.on { color: #fff; background: rgba(52, 211, 153, 0.15); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.45); }
.ddoc { padding: 14px 18px; border-radius: 12px; background: #fbfcfe; color: #1e293b; font-size: 12.5px; display: flex; flex-direction: column; gap: 8px; }
.ddoc h3 { font-size: 16px; color: #312e81; min-height: 22px; }
.dsub { color: #64748b; font-size: 11px; margin-top: -6px; }
.ddoc .dsec b { color: #4338ca; font-size: 12.5px; }
.ddoc ol, .ddoc ul { padding-left: 20px; line-height: 1.55; }
.ddoc li:empty { display: none; }
.dsec.two { display: grid; grid-template-columns: 1fr 230px; gap: 12px; }
.dsec.two p { line-height: 1.6; }
.roi { padding: 8px 12px; border-radius: 10px; background: #eef2ff; }
.roi div { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 3px; }
.roi em { font-style: normal; font-weight: 700; }
.roi em.big { color: #db2777; font-size: 14px; }
.ag-r .teams-msg pre { font-size: 12.5px; }
.dchart { padding: 14px 16px; border-radius: 12px; background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.dchart > b { font-size: 13px; }
.cmp { display: grid; grid-template-columns: 170px 1fr 120px 50px; gap: 10px; align-items: center; font-size: 12.5px; }
.cb { display: flex; flex-direction: column; gap: 3px; }
.cb i { display: block; height: 9px; border-radius: 4px; width: 0; transition: width 1.2s ease; }
.cb .pv { background: rgba(167, 139, 250, 0.55); }
.cb .cv { background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.dchart.grow .cb i { width: var(--w); }
.cmp em { font-style: normal; font-family: var(--en); font-size: 12px; color: var(--mut); }
.cmp em b { color: #fff; }
.cmp u { text-decoration: none; font-family: var(--en); font-weight: 800; color: var(--pink); text-align: right; }
.dchart .lgd { flex-direction: row; gap: 16px; font-size: 11.5px; color: var(--mut); }
.dchart .lgd i { width: 14px; height: 8px; border-radius: 3px; display: inline-block; }
.lgd i.pv { background: rgba(167, 139, 250, 0.55); } .lgd i.cv { background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.dl > .dsec { padding: 12px 16px; border-radius: 12px; background: rgba(148, 163, 184, 0.06); }
.dl > .dsec b { font-size: 13px; }
.dl > .dsec ul { padding-left: 18px; font-size: 13px; line-height: 1.7; margin-top: 4px; }
.newst { padding: 16px 18px; border-radius: 16px; background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(52, 211, 153, 0.45); display: flex; flex-direction: column; gap: 9px; box-shadow: 0 0 40px rgba(52, 211, 153, 0.15); }
.newst .ns-h .ic { color: var(--green); }
.nf { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: rgba(148, 163, 184, 0.06); align-items: center; }
.nf span { font-size: 12px; color: var(--mut); }
.nf b { font-weight: 500; min-height: 20px; }
.nf.tools div { display: flex; gap: 8px; flex-wrap: wrap; }
.tt { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line2); color: var(--dim); transition: 0.3s; }
.tt .ic { width: 14px; height: 14px; }
.tt.on { color: #0b1020; background: var(--green); border-color: var(--green); }

/* ⑤ ハイブリッドボイスボット */
.g-hvb { display: grid; grid-template-columns: 400px 1fr 380px; gap: 16px; height: 100%; position: relative; }
.hv-flowp .fn-t { font-size: 12.5px; }
.hv-flowp .fn-ic { width: 28px; height: 28px; }
.hv-l .pb { display: flex; flex-direction: column; }
.caller { display: flex; align-items: center; gap: 12px; }
.cav { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(251, 191, 36, 0.18); color: var(--amber); }
.caller b { font-size: 16px; }
.caller small { display: block; font-size: 12px; color: var(--mut); }
.ctime { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--en); font-size: 18px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
.hv-tr { flex: 1; min-height: 0; gap: 12px; }
.hv-tr.sumpad { padding-bottom: 200px; }
.hb { display: flex; gap: 8px; max-width: 92%; opacity: 0; transform: translateY(8px); transition: 0.35s; }
.hb.in { opacity: 1; transform: none; }
.hb.cust { align-self: flex-end; flex-direction: row-reverse; }
.bav { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.hb.bot .bav { background: var(--grad); color: #0b1020; }
.hb.cust .bav { background: rgba(251, 191, 36, 0.2); color: var(--amber); }
.bav .ic { width: 16px; height: 16px; }
.hb small { font-size: 11px; color: var(--mut); display: block; margin-bottom: 2px; }
.hb.cust small { text-align: right; }
.hb p { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.65; }
.hb.bot p { background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.25); border-top-left-radius: 4px; }
.hb.cust p { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.25); border-top-right-radius: 4px; }
.hb.speaking p { box-shadow: 0 0 20px rgba(167, 139, 250, 0.35); }
.hb.cust.speaking p { box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); }
.sysl { align-self: center; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--amber); padding: 6px 14px; border-radius: 999px; background: rgba(251, 191, 36, 0.1); animation: blink 1.4s infinite; }
.hv-c { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-height: 0; }
.hv-flowp .pb { padding: 14px 16px 12px; }
.legend { display: flex; gap: 10px; margin-top: 16px; font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; }
.legend .ic { width: 14px; height: 14px; }
.lg-llm { background: rgba(167, 139, 250, 0.12); color: #c4b5fd; }
.lg-rule { background: rgba(96, 165, 250, 0.12); color: #93c5fd; }
.lg-guard { background: rgba(45, 212, 191, 0.12); color: var(--teal); margin-left: auto; }
.hv-row { display: grid; grid-template-columns: 400px 1fr; gap: 16px; min-height: 0; }
.intents { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.it { display: grid; grid-template-columns: 1fr 100px 40px; gap: 8px; align-items: center; font-size: 13px; color: var(--mut); transition: 0.3s; }
.ib2 { height: 8px; border-radius: 4px; background: rgba(148, 163, 184, 0.1); overflow: hidden; }
.ib2 i { display: block; height: 100%; width: 0; background: var(--violet); transition: width 0.9s ease; border-radius: 4px; }
.hv-int.grow .ib2 i { width: var(--w); }
.it b { font-family: var(--en); text-align: right; }
.it.top { color: #fff; padding: 8px 10px; margin: -4px -10px; border-radius: 10px; background: rgba(167, 139, 250, 0.14); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.5); }
.it.top b { color: var(--violet); }
.slots { display: flex; flex-direction: column; gap: 5px; }
.sl { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 9px; background: rgba(148, 163, 184, 0.04); font-size: 13px; opacity: 0.3; transition: 0.4s; }
.sl b { opacity: 0; transition: 0.4s; display: flex; align-items: center; gap: 5px; font-weight: 500; }
.sl b .ic { width: 13px; height: 13px; color: var(--teal); }
.sl span { color: var(--mut); font-size: 12px; }
.sl em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 6px; opacity: 0; }
.sl.in { opacity: 1; background: rgba(148, 163, 184, 0.08); animation: slotin 0.6s ease; }
.sl.in b, .sl.in em { opacity: 1; }
@keyframes slotin { 0% { box-shadow: 0 0 0 1px var(--cyan), 0 0 20px rgba(34, 211, 238, 0.5); } }
em.llm { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
em.rule { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
em.multi { background: rgba(244, 114, 182, 0.18); color: #f9a8d4; }
em.vision { background: rgba(251, 146, 60, 0.18); color: #fdba74; }
.hv-r { display: flex; align-items: center; justify-content: center; }
.hv-r .phone { height: 780px; width: 352px; }
.call-scr { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 50px 20px 36px; background: radial-gradient(400px 300px at 50% 20%, rgba(34, 211, 238, 0.2), transparent), linear-gradient(#0f172a, #0b1020); }
.cs-av { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #0b1020; box-shadow: 0 0 50px rgba(167, 139, 250, 0.5); }
.cs-av .ic { width: 44px; height: 44px; }
.call-scr > b { font-size: 21px; margin-top: 18px; }
.call-scr > small { color: var(--mut); font-size: 13px; margin-top: 4px; }
.cs-t { font-family: var(--en); font-size: 18px; margin: 10px 0 20px; color: #cbd5e1; }
.wave.cs { height: 50px; }
.cs-mode { margin-top: 22px; padding: 8px 16px; border-radius: 999px; font-size: 13px; background: rgba(244, 114, 182, 0.18); color: #f9a8d4; opacity: 0; transition: 0.4s; }
.cs-mode.in { opacity: 1; }
.cs-btns { margin-top: auto; display: flex; gap: 28px; }
.cs-btns i { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: rgba(148, 163, 184, 0.16); }
.cs-btns i.end { background: #ef4444; }
.cs-btns i.end .ic { transform: rotate(135deg); }
.sms-ban { position: absolute; left: 10px; right: 10px; top: 8px; display: flex; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(30, 41, 59, 0.96); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transform: translateY(-140%); transition: 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); z-index: 4; }
.sms-ban.in { transform: none; }
.sms-ban.tap { box-shadow: 0 0 0 3px var(--cyan), 0 10px 30px rgba(0, 0, 0, 0.5); }
.sms-ban > .ic { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--green); color: #0b1020; flex: none; }
.sms-ban b { font-size: 13px; }
.sms-ban p { font-size: 12.5px; color: #cbd5e1; line-height: 1.5; word-break: break-all; }
.mform { height: 100%; background: #f8fafc; color: #0f172a; padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.mf-h b { font-size: 12px; color: #4f46e5; }
.mf-h small { display: block; font-size: 17px; font-weight: 800; }
.mf-sec { font-size: 11px; color: #0f766e; display: flex; gap: 5px; align-items: center; }
.mf-sec .ic { width: 12px; height: 12px; }
.mf span { font-size: 11px; color: #64748b; }
.mf b { display: block; min-height: 38px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #fff; font-size: 14px; font-weight: 500; }
.mf b.typing { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.mf b.typing::after { color: #6366f1; }
.mf-photo { border-radius: 12px; border: 1.5px dashed #94a3b8; min-height: 60px; display: grid; place-items: center; font-size: 12px; color: #64748b; overflow: hidden; }
.mf-photo span { display: flex; gap: 6px; align-items: center; }
.ph-img { position: relative; width: 100%; }
.photo-svg { display: block; width: 100%; height: auto; }
.scanl { position: absolute; left: 0; right: 0; height: 3px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); animation: scany 1.4s ease-in-out infinite alternate; top: 0; }
@keyframes scany { to { top: calc(100% - 3px); } }
.bbox { position: absolute; border: 2px solid #f97316; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.15); animation: fadein 0.4s 0.8s both; }
.bbox em { position: absolute; top: -22px; left: -2px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #f97316; color: #fff; white-space: nowrap; }
.mf-res { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #eef2ff; animation: fadein 0.3s; }
.mf-res div { display: flex; justify-content: space-between; font-size: 12.5px; }
.mf-res span { color: #64748b; }
.mf-btn { margin-top: auto; padding: 13px; border-radius: 12px; background: #4f46e5; color: #fff; font-weight: 700; font-size: 15px; }
.mdone { height: 100%; background: #f8fafc; color: #0f172a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; }
.mdone > .ic { width: 76px; height: 76px; padding: 16px; border-radius: 50%; background: #10b981; color: #fff; box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.15); animation: press 0.6s; }
.mdone b { font-size: 18px; }
.mdone small { color: #64748b; font-family: var(--mono); }
.md-r { width: 100%; display: flex; justify-content: space-between; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: #eef2ff; }
.md-r span { color: #64748b; }
.kyc { height: 100%; background: #0f172a; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ky-h b { font-size: 17px; }
.ky-h small { display: block; color: var(--mut); font-size: 12px; }
.lic-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px var(--cyan); }
.ocr { display: flex; flex-direction: column; gap: 6px; animation: fadein 0.3s; }
.ocr div { display: grid; grid-template-columns: 70px 1fr 20px; align-items: center; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: rgba(52, 211, 153, 0.1); }
.ocr span { color: var(--mut); font-size: 12px; }
.ocr .ic { color: var(--green); }
.face { position: relative; width: 220px; height: 220px; margin: 30px auto 10px; border-radius: 50%; overflow: hidden; background: #1e293b; display: grid; place-items: end center; }
.face svg { width: 150px; }
.face .ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--cyan); border-right-color: var(--cyan); animation: spin 1s linear infinite; }
.match { text-align: center; animation: fadein 0.3s; }
.match b { display: block; font-family: var(--en); font-size: 42px; color: var(--green); }
.match span { font-size: 13px; color: var(--mut); }
.opscr { width: 100%; height: 100%; border-radius: 18px; background: #0d1426; border: 1px solid var(--line2); padding: 16px; display: flex; flex-direction: column; gap: 12px; opacity: 0.45; transition: 0.4s; }
.opscr.ring { opacity: 1; border-color: var(--amber); box-shadow: 0 0 40px rgba(251, 191, 36, 0.3); }
.opscr.in { opacity: 1; }
.opscr.taken { border-color: var(--green); box-shadow: 0 0 40px rgba(52, 211, 153, 0.25); }
.os-h { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; }
.os-h .ic { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--amber); }
.os-h b { font-size: 16px; }
.os-h small { font-size: 12px; color: var(--mut); }
.os-ring { grid-column: 1 / 3; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(251, 191, 36, 0.14); color: var(--amber); font-size: 13px; font-weight: 700; text-align: center; }
.ring .os-ring { animation: blink 0.9s infinite; }
.taken .os-ring { background: rgba(52, 211, 153, 0.16); color: var(--green); animation: none; }
.taken .os-ring::after { content: " → 応答済み"; }
.os-cust { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(148, 163, 184, 0.06); }
.os-cust div { display: flex; justify-content: space-between; font-size: 12.5px; }
.os-cust span { color: var(--mut); }
.os-memo { padding: 12px 14px; border-radius: 12px; background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.35); display: flex; flex-direction: column; gap: 6px; }
.om-h { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: #c4b5fd; margin-bottom: 4px; }
.os-memo .kv2 { font-size: 13px; grid-template-columns: 70px 1fr; }
.os-btn { margin-top: auto; display: flex; justify-content: center; }
.os-btn .btn { padding: 12px 30px; font-size: 15px; }
.hv-sum { position: absolute; left: 0; bottom: 0; width: 400px; opacity: 0; transform: translateY(20px); transition: 0.5s; pointer-events: none; z-index: 3; }
.hv-sum.in { opacity: 1; transform: none; }
.sum-c { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 16px 18px; border-radius: 18px; background: rgba(8, 14, 30, 0.95); border: 1px solid rgba(52, 211, 153, 0.5); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(52, 211, 153, 0.2); }
.sum-c > .ic { display: none; }
.sum-c small { display: block; font-size: 11px; color: var(--mut); }
.sum-c b { font-size: 17px; }
.sum-c div:first-of-type { grid-column: 1 / 4; }
.sum-c div:first-of-type b { font-size: 22px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sum-c b.llm { color: var(--violet); } .sum-c b.rule { color: var(--blue); } .sum-c b.ok { color: var(--green); }

/* トースト・ヘルプ */
#toast { position: absolute; bottom: 134px; left: 50%; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 14px; background: rgba(16, 185, 129, 0.95); color: #04140d; font-weight: 700; font-size: 15px; opacity: 0; transition: 0.4s; z-index: 10; pointer-events: none; box-shadow: 0 10px 40px rgba(16, 185, 129, 0.4); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#help { position: absolute; inset: 0; display: none; place-items: center; background: rgba(2, 6, 23, 0.7); z-index: 20; }
#help.show { display: grid; }
#help > div { padding: 30px 40px; border-radius: 20px; background: #0f172a; border: 1px solid var(--line2); }
#help h3 { margin-bottom: 14px; }
#help p { margin: 8px 0; color: #cbd5e1; }
kbd { display: inline-block; min-width: 28px; padding: 2px 8px; margin: 0 3px; border-radius: 6px; background: #1e293b; border: 1px solid #334155; font-family: var(--en); font-size: 13px; text-align: center; }