/* 白地に群青・水色。スマホ画面の中だけは実機らしく暗い配色（.phone で上書き） */
:root {
  --bg: #f3f6fb;
  --panel: rgba(255, 255, 255, 0.94);
  --panel2: rgba(241, 245, 251, 0.95);
  --line: rgba(30, 58, 138, 0.12);
  --line2: rgba(30, 58, 138, 0.22);
  --txt: #0f1f3d;
  --mut: #4b5b78;
  --dim: #8392ab;
  --navy: #1e3a8a;
  --sky: #0ea5e9;
  --cyan: #0284c7;
  --violet: #4f46e5;
  --pink: #db2777;
  --green: #059669;
  --amber: #d97706;
  --blue: #2563eb;
  --orange: #ea580c;
  --red: #dc2626;
  --teal: #0d9488;
  --grad: linear-gradient(100deg, #1e3a8a, #2563eb 55%, #0ea5e9);
  --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: #e8edf5; 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(14, 165, 233, 0.12), transparent 60%),
    radial-gradient(1000px 800px at 100% 0%, rgba(30, 58, 138, 0.08), transparent 60%),
    radial-gradient(900px 600px at 60% 120%, rgba(125, 211, 252, 0.16), transparent 60%); }
#bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(71, 85, 105, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(71, 85, 105, 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.3; animation: drift 24s ease-in-out infinite alternate; }
#bg i:nth-child(1) { background: #7dd3fc; left: -120px; top: 300px; }
#bg i:nth-child(2) { background: #93c5fd; right: -100px; top: -120px; animation-delay: -8s; }
#bg i:nth-child(3) { background: #bae6fd; 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(255, 255, 255, 0.88); 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(--sky); 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(71, 85, 105, 0.12); }
.gnav button:hover { color: var(--txt); background: rgba(71, 85, 105, 0.08); }
.gnav button.on { color: #0f1f3d; background: linear-gradient(100deg, rgba(2, 132, 199, 0.18), rgba(79, 70, 229, 0.18)); box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.21); }
.gnav button.on em { background: var(--grad); color: #ffffff; }
.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: #1d4ed8; border-color: rgba(37, 99, 235, 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(255, 255, 255, 0.92); 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: #ffffff; flex: none; box-shadow: 0 0 24px rgba(79, 70, 229, 0.27); }
.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(71, 85, 105, 0.12); }
.steps button.done { color: var(--mut); }
.steps button.done em { background: rgba(2, 132, 199, 0.25); color: var(--cyan); }
.steps button.cur { color: #0f1f3d; border-color: rgba(79, 70, 229, 0.6); background: rgba(79, 70, 229, 0.14); }
.steps button.cur em { background: var(--grad); color: #ffffff; }
.steps button.run { animation: glowp 1.4s ease-in-out infinite; }
@keyframes glowp { 50% { box-shadow: 0 0 18px rgba(79, 70, 229, 0.33); } }
.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(79, 70, 229, 0.5); }
.ib.on { color: var(--cyan); border-color: rgba(2, 132, 199, 0.5); background: rgba(2, 132, 199, 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: #ffffff; box-shadow: 0 10px 40px rgba(79, 70, 229, 0.24); 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, #cbd5e1, #94a3b8); color: #1e293b; 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: #ffffff; box-shadow: 0 0 30px rgba(79, 70, 229, 0.24); }
.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(71, 85, 105, 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(2, 132, 199, 0.16); color: #0f1f3d; box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.24); }
.schips { display: flex; gap: 6px; }
.chip { padding: 6px 11px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line2); color: #334155; white-space: nowrap; background: rgba(71, 85, 105, 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(15, 40, 90, 0.062), 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(2, 132, 199, 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: #ffffff; }
.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(2, 132, 199, 0.21), 0 0 30px rgba(79, 70, 229, 0.36) !important; }
@keyframes press { 40% { transform: scale(0.93); } }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; background: rgba(37, 99, 235, 0.14); color: #1d4ed8; 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(71, 85, 105, 0.22); stroke-width: 2; transition: stroke 0.3s; }
.fe.live { stroke: rgba(2, 132, 199, 0.6); }
.fe.done { stroke: rgba(2, 132, 199, 0.45); }
.fe-flow { fill: none; stroke: var(--sky); 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: #ffffff; border: 1px solid rgba(71, 85, 105, 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: #ffffff; 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: #ffffff; 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: #2563eb; } .k-out { --k: #059669; } .k-stt { --k: #0284c7; } .k-llm { --k: #4f46e5; } .k-code { --k: #d97706; }
.k-kb { --k: #059669; } .k-rule { --k: #2563eb; } .k-multi { --k: #db2777; } .k-vision { --k: #ea580c; } .k-tpl { --k: #c026d3; }
.k-tool { --k: #ea580c; } .k-guard { --k: #0d9488; } .k-human { --k: #d97706; } .k-agent { --k: #4f46e5; }

/* グラフ */
.chart .grid { stroke: rgba(71, 85, 105, 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: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .bt { height: 14px; border-radius: 7px; background: rgba(71, 85, 105, 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 { --txt: #e7eef9; --mut: #8d9bb4; --dim: #5d6b85; --line: rgba(148, 163, 184, 0.14); --line2: rgba(148, 163, 184, 0.26);
  --cyan: #22d3ee; --violet: #a78bfa; --pink: #f472b6; --green: #34d399; --amber: #fbbf24; --grad: linear-gradient(100deg, #22d3ee, #60a5fa 55%, #a78bfa);
  color: var(--txt); 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: #4338ca; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(79, 70, 229, 0.35); background: rgba(79, 70, 229, 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: #3b4b66; 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(37, 99, 235, 0.35); }
.pillar.p2 { border-color: rgba(79, 70, 229, 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(2, 132, 199, 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(79, 70, 229, 0.6); animation: spin 6s linear infinite; }
.orb i:nth-child(2) { inset: 24px; border-top-color: var(--pink); border-left-color: rgba(2, 132, 199, 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(79, 70, 229, 0.5), rgba(2, 132, 199, 0.15) 60%, transparent); box-shadow: 0 0 80px rgba(79, 70, 229, 0.3); }
.orb-c .ic { width: 26px; height: 26px; color: #0f1f3d; }
.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: #1e3a8a; 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: #334155; }
.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: #eef2f7; color: var(--mut); border: 1px solid var(--line2); }
.st-n.lit { border-color: rgba(2, 132, 199, 0.6); box-shadow: 0 0 30px rgba(2, 132, 199, 0.15); background: linear-gradient(140deg, rgba(2, 132, 199, 0.14), rgba(79, 70, 229, 0.12)); }
.st-n.lit .ic { color: var(--cyan); }
.st-n.lit em { background: var(--grad); color: #ffffff; 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: #ffffff; 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; }
.home > section { display: flex; flex-direction: column; min-height: 0; }
.home > section > .story, .home > section > .tiles { flex: 1; min-height: 0; }
.home.booth { grid-template-rows: auto auto auto 1fr; gap: 12px; }
.home.booth .hero { grid-template-columns: 1fr 600px; }
.home.booth .hero h1 { font-size: 50px; margin: 14px 0 10px; }
.home.booth .hero-r { flex-direction: row; justify-content: center; gap: 26px; }
.home.booth .orb { width: 210px; height: 210px; }
.home.booth .orb-c { width: 128px; height: 128px; }
.home.booth .orb-c b { font-size: 46px; }
.home.booth .pillars { margin-top: 0; grid-template-columns: 1fr; }
.home.booth .tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-rows: 1fr; }
.home.booth .tile { grid-template-rows: auto auto auto 1fr; padding: 18px 20px 40px; }
.sec-h { display: flex; align-items: baseline; gap: 12px; margin: 0 2px 8px; }
.sec-h b { font-size: 16px; color: var(--navy); letter-spacing: 0.04em; }
.sec-h small { font-size: 12.5px; color: var(--mut); }
.sec-h i { flex: 1; height: 1px; align-self: center; background: linear-gradient(90deg, rgba(30, 58, 138, 0.3), transparent); }
.tl-pts { grid-column: 1 / -1; list-style: none; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line2); display: flex; flex-direction: column; gap: 8px; position: relative; }
.tl-pts li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #334155; line-height: 1.5; }
.tl-pts .ic { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--c); }
.c-cyan { --c: #0284c7; } .c-violet { --c: #4f46e5; } .c-pink { --c: #db2777; } .c-green { --c: #059669; } .c-amber { --c: #d97706; } .c-blue { --c: #2563eb; }

/* 共通: 書き起こし */
.tr { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #cbd5e1 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: #0f1f3d; text-shadow: 0 0 12px rgba(2, 132, 199, 0.21); }
.pii { transition: 0.3s; border-radius: 4px; }
.pii.found { background: rgba(220, 38, 38, 0.25); box-shadow: 0 0 0 1px var(--red); color: #b91c1c; }
.pii.masked { background: rgba(13, 148, 136, 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(71, 85, 105, 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(2, 132, 199, 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(2, 132, 199, 0.6); background: rgba(2, 132, 199, 0.1); box-shadow: 0 0 20px rgba(2, 132, 199, 0.12); }
.mini { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini td { padding: 6px 4px; border-bottom: 1px solid var(--line); color: #334155; }
.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(79, 70, 229, 0.06); border-left: 3px solid var(--violet); font-size: 14px; animation: fadein 0.3s; }
.kv span { color: #4338ca; 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(71, 85, 105, 0.07); }
.st-tabs button { flex: 1; padding: 8px; border-radius: 9px; font-size: 13px; color: var(--mut); }
.st-tabs button.on { background: rgba(2, 132, 199, 0.16); color: #0f1f3d; box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.24); }
.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(2, 132, 199, 0.07); border: 1px solid rgba(2, 132, 199, 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: #0f1f3d; }
.bt-h span { margin-left: auto; color: var(--cyan); font-size: 12px; }
.prog { height: 6px; border-radius: 3px; background: rgba(71, 85, 105, 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); }
#st-tbl td:first-child, #st-tbl td:nth-child(4) { white-space: nowrap; }
.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(2, 132, 199, 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(219, 39, 119, 0.35); } }
.risk { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.r-高 { background: rgba(220, 38, 38, 0.18); color: #b91c1c; }
.r-中 { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.r-低 { background: rgba(5, 150, 105, 0.14); color: #047857; }
.kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis3 div { padding: 10px 12px; border-radius: 12px; background: rgba(71, 85, 105, 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(219, 39, 119, 0.1); box-shadow: inset 0 0 0 1px rgba(219, 39, 119, 0.21); }
.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(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 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(2, 132, 199, 0.35), rgba(79, 70, 229, 0.15)); border: 1px solid rgba(2, 132, 199, 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(219, 39, 119, 0.5), rgba(217, 119, 6, 0.15)); border-color: rgba(219, 39, 119, 0.7); box-shadow: 0 0 40px rgba(219, 39, 119, 0.21); }
.faqs { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.faq { padding: 9px 12px; border-radius: 12px; background: rgba(71, 85, 105, 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: #475569; 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(5, 150, 105, 0.18); color: #047857; }
.bdg.upd, em.upd { background: rgba(217, 119, 6, 0.18); color: #b45309; }
.bdg.mrg, em.mrg { background: rgba(79, 70, 229, 0.2); color: #4338ca; }
.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(219, 39, 119, 0.07); border: 1px solid rgba(219, 39, 119, 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(79, 70, 229, 0.15); color: #4338ca; font-size: 13px; animation: fadein 0.4s 0.8s both; }
.ev-out { padding: 14px 16px; border-radius: 12px; background: linear-gradient(120deg, rgba(2, 132, 199, 0.14), rgba(79, 70, 229, 0.14)); border: 1px solid rgba(2, 132, 199, 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(71, 85, 105, 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(217, 119, 6, 0.45); background: rgba(217, 119, 6, 0.06); }
ins { text-decoration: none; background: rgba(5, 150, 105, 0.2); color: #047857; padding: 1px 3px; border-radius: 4px; }
.df-why { display: flex; gap: 8px; font-size: 13px; color: #475569; 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(79, 70, 229, 0.12); }
.ns-sec { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(71, 85, 105, 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: #f5f8fd; 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(219, 39, 119, 0.6); opacity: 0.4; }
.ns-f.add .ic { color: var(--pink); }
.ns-f.add.in { opacity: 1; background: rgba(219, 39, 119, 0.1); box-shadow: 0 0 20px rgba(219, 39, 119, 0.15); }
.ns-rule { padding: 10px; border-radius: 8px; background: rgba(219, 39, 119, 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(5, 150, 105, 0.15), rgba(2, 132, 199, 0.1)); border: 1px solid rgba(5, 150, 105, 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(71, 85, 105, 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(2, 132, 199, 0.08); border: 1px solid rgba(2, 132, 199, 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); }

.csvf { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 6px; border-radius: 9px; background: rgba(5, 150, 105, 0.07); border: 1px dashed rgba(5, 150, 105, 0.35); font-size: 12.5px; }
.csvf .ic { color: var(--green); width: 15px; height: 15px; }
.csvf b { font-family: var(--mono); font-size: 12px; }
.csvf small { margin-left: auto; color: var(--mut); font-size: 11px; }
.rawv { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.rv-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.rv-h .ic { color: var(--cyan); }
.rv-rec { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(2, 132, 199, 0.07); border: 1px solid rgba(2, 132, 199, 0.25); }
.rv-rec > .ic { width: 24px; height: 24px; color: var(--cyan); }
.rv-rec b { display: block; font-family: var(--mono); font-size: 13px; }
.rv-rec small { color: var(--mut); font-size: 11.5px; }
.rv-csv { border-radius: 12px; border: 1px solid var(--line2); background: #fff; overflow: hidden; font-family: var(--mono); font-size: 12px; }
.rv-fn { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #f1f5fb; border-bottom: 1px solid var(--line); font-weight: 700; }
.rv-fn .ic { width: 14px; height: 14px; color: var(--green); }
.rv-fn small { margin-left: auto; font-weight: 400; color: var(--mut); font-family: var(--jp); }
.rv-row { display: grid; grid-template-columns: 128px 52px 54px 1fr; gap: 8px; padding: 5px 12px; border-bottom: 1px dashed var(--line); opacity: 0; transform: translateX(10px); transition: 0.35s; white-space: nowrap; }
.rv-row span { overflow: hidden; text-overflow: ellipsis; }
.rv-row.in { opacity: 1; transform: none; }
.rv-row.rv-hd { color: var(--mut); background: #f8fafd; font-weight: 700; }
.rv-row:last-child { border: 0; }
.rv-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--amber); margin-top: auto; }
.tr-mode { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); margin-bottom: 8px; }
.tr-mode .ic { width: 14px; height: 14px; color: var(--cyan); }
.seg { display: grid; grid-template-columns: 62px 1fr; gap: 10px; font-size: 14px; line-height: 1.65; animation: fadein 0.35s ease; }
.seg code { font-size: 11px; color: var(--cyan); padding-top: 3px; }
.stt-wait { display: none; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--cyan); }
.stt-wait.on { display: flex; }
.stt-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: blink 0.9s infinite; }
del { text-decoration: line-through; background: rgba(220, 38, 38, 0.1); color: #b91c1c; padding: 1px 3px; border-radius: 4px; }
.df-hits { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut); }
.df-hits .ic { width: 14px; height: 14px; color: var(--cyan); }
.df-hits code { color: var(--cyan); font-size: 11.5px; }

/* メッセージ（共通） */
.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(37, 99, 235, 0.3), rgba(79, 70, 229, 0.3)); border-bottom-right-radius: 4px; }
.msg.ai p { background: rgba(71, 85, 105, 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: #ffffff; font-weight: 800; }
.msg .who { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: #4338ca; }
.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(5, 150, 105, 0.12); color: #047857; border: 1px solid rgba(5, 150, 105, 0.3); animation: fadein 0.3s; }
.src-tags span.g { background: rgba(13, 148, 136, 0.12); color: var(--teal); }
.src-tags .ic { width: 13px; height: 13px; }
.msg.guard p { border-color: rgba(13, 148, 136, 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(71, 85, 105, 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(220, 38, 38, 0.25); color: #b91c1c; 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: #0f172a; }
.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(79, 70, 229, 0.08); border: 1px solid rgba(79, 70, 229, 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: #0f1f3d; 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(79, 70, 229, 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(2, 132, 199, 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(220, 38, 38, 0.18); color: #b91c1c; }
.p-中 { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.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; color: #fff; }
.apps .teams { background: #5b5fc7; }
.apps .slack { background: #4a154b; }
.teams-msg { border-radius: 12px; background: #f4f4fb; 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; color: #fff; 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(2, 132, 199, 0.07); border: 1px solid rgba(2, 132, 199, 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(71, 85, 105, 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: #ffffff; 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: #ffffff; }
.tl.t-実績 { border-left-color: var(--cyan); background: rgba(2, 132, 199, 0.05); } .tl.t-実績 .tpt { color: var(--cyan); border: 1px solid var(--cyan); }
.tl.t-住所変更 { border-left-color: var(--pink); background: rgba(219, 39, 119, 0.05); } .tl.t-住所変更 .tpt { color: var(--pink); border: 1px solid var(--pink); }
.tl.t-年末FAQ { border-left-color: var(--amber); background: rgba(217, 119, 6, 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(2, 132, 199, 0.12); color: var(--cyan); }
.tp.t-住所変更 { background: rgba(219, 39, 119, 0.12); color: var(--pink); }
.tp.t-年末FAQ { background: rgba(217, 119, 6, 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: #ffffff; background: var(--green); border-color: var(--green); box-shadow: 0 0 18px rgba(5, 150, 105, 0.3); }
.a4wrap { display: flex; justify-content: center; background: rgba(71, 85, 105, 0.1); }
.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(15, 40, 90, 0.125); overflow: hidden; transition: box-shadow 0.4s; }
.a4.live { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.36), 0 20px 60px rgba(15, 40, 90, 0.125); }
.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); }
.mt-tr .tl.pend .who { color: var(--dim); }
.mt-tr .tl.pend .who i { background: #cbd5e1; animation: blink 1s infinite; }
.mt-tr .tl.c1 .who i { background: var(--amber); } .mt-tr .tl.c2 .who i { background: var(--cyan); } .mt-tr .tl.c3 .who i { background: var(--pink); }
.mt-tr .tl .who { transition: color 0.3s; }
.mt-l .tr-mode { margin: 0; }
.a4wrap { display: grid; grid-template-columns: 186px 600px; justify-content: center; gap: 18px; }
.mt-pur { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.mt-pur > small { font-size: 12px; color: var(--mut); font-weight: 700; }
.mt-pur button { text-align: left; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 2px; transition: 0.25s; position: relative; }
.mt-pur button b { font-size: 14px; color: var(--txt); }
.mt-pur button span { font-size: 11.5px; color: var(--mut); }
.mt-pur button.on { border-color: var(--navy); background: linear-gradient(120deg, rgba(30, 58, 138, 0.08), rgba(14, 165, 233, 0.1)); box-shadow: inset 3px 0 0 var(--navy); }
.mt-pur button:disabled { opacity: 0.45; cursor: default; }
.mt-pur button.press { animation: tabpress 0.6s ease both; }
.mt-pur p { display: flex; gap: 6px; font-size: 11.5px; color: var(--mut); line-height: 1.5; margin-top: 4px; }
.mt-pur p .ic { width: 14px; height: 14px; flex: none; color: var(--sky); margin-top: 2px; }
.a4.alt { grid-column: 2; grid-row: 1; animation: fadein 0.4s ease; }
#mt-doc { grid-column: 2; grid-row: 1; }
.a4-item b[data-t]:empty::before, .a4-item p[data-t]:empty::before { content: ""; display: inline-block; height: 9px; border-radius: 3px; background: #e2e8f0; vertical-align: middle; }
.a4-item b[data-t]:empty::before { width: 36%; }
.a4-item p[data-t]:empty::before { width: 88%; }
.a4-sm { letter-spacing: 0.3em !important; }
.ex-l { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ex-r { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 8px; background: #f1f5fb; border-left: 4px solid var(--navy); }
.ex-r b { font-size: 13px; color: var(--navy); }
.ex-r p { font-size: 13.5px; line-height: 1.6; min-height: 20px; }
.mm-s { text-align: center; color: #64748b; font-size: 11.5px; margin-top: -4px; }
.mm-l { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; }
.mm-r { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.6; }
.mm-r .ic { width: 16px; height: 16px; color: var(--amber); margin-top: 3px; }
.mm-r p { min-height: 20px; }

/* ③ 月次レポート */
.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(71, 85, 105, 0.06); }
.ds > span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(2, 132, 199, 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: #4338ca; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(79, 70, 229, 0.35); }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.kpi { padding: 8px 14px; border-radius: 14px; background: rgba(71, 85, 105, 0.06); border: 1px solid var(--line); transition: 0.4s; }
.kpi.in { border-color: rgba(2, 132, 199, 0.35); box-shadow: 0 0 24px rgba(2, 132, 199, 0.072); }
.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(71, 85, 105, 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(71, 85, 105, 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(219, 39, 119, 0.14); box-shadow: inset 0 0 0 1px rgba(219, 39, 119, 0.3); }
.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(71, 85, 105, 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(220, 38, 38, 0.2); color: #b91c1c; } .ft-doc { background: rgba(37, 99, 235, 0.2); color: #1d4ed8; }
.ft-md { background: rgba(71, 85, 105, 0.2); color: #334155; } .ft-xls, .ft-csv { background: rgba(5, 150, 105, 0.18); color: #047857; }
.ft-txt { background: rgba(217, 119, 6, 0.16); color: #b45309; }
.kb-sum { display: flex; gap: 12px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--mut); }
.kb-sum b { color: #0f1f3d; 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: #ffffff; font-weight: 900; font-size: 22px; box-shadow: 0 0 24px rgba(79, 70, 229, 0.3); }
.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(79, 70, 229, 0.07); }
.pr span { color: #4338ca; 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(71, 85, 105, 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(2, 132, 199, 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(71, 85, 105, 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(2, 132, 199, 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: #047857; background: rgba(5, 150, 105, 0.12); box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.24); }
.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(5, 150, 105, 0.06); border: 1px solid rgba(5, 150, 105, 0.3); opacity: 0; transform: translateX(14px); transition: 0.35s; }
.hit.in { opacity: 1; transform: none; }
.hit.low { background: rgba(71, 85, 105, 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(71, 85, 105, 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: #334155; }
mark { background: rgba(217, 119, 6, 0.22); color: #92400e; 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(71, 85, 105, 0.06); border: 1px solid var(--line); opacity: 0; transform: translateX(-12px); transition: 0.4s; }
.stf.in { opacity: 1; transform: none; }
.stf.c1 { --c: #0284c7; } .stf.c2 { --c: #4f46e5; } .stf.c3 { --c: #db2777; } .stf.c4 { --c: #d97706; } .stf.c5 { --c: #059669; }
.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(71, 85, 105, 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: #ffffff; font-weight: 700; animation: blink 1s infinite; }
.stf.fin .pill-s { background: rgba(5, 150, 105, 0.2); color: #047857; font-weight: 700; }
.stf.fresh { animation: hire 1.2s ease; }
@keyframes hire { 0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.48); } 60% { transform: scale(1.03); box-shadow: 0 0 0 16px rgba(5, 150, 105, 0.0); } }
.addst { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(5, 150, 105, 0.5); color: #047857; 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(71, 85, 105, 0.1); }
.assign { align-self: center; display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 6px 14px; border-radius: 999px; background: rgba(2, 132, 199, 0.12); color: var(--cyan); animation: fadein 0.4s; }
.worklog { padding: 12px 14px; border-radius: 14px; background: #f5f8fd; 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(71, 85, 105, 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(217, 119, 6, 0.14); color: #b45309; }
.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: #ffffff; }
.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(5, 150, 105, 0.18); color: var(--green); }
.wl.ok .wl-st { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 4px #ffffff; }
.wl.ok small { color: #475569; }
.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: #f8fafd; 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(71, 85, 105, 0.07); }
.dtabs span.on { color: #0f1f3d; background: rgba(5, 150, 105, 0.15); box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.27); }
.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(71, 85, 105, 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(79, 70, 229, 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: #0f1f3d; }
.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(79, 70, 229, 0.55); } .lgd i.cv { background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.dl > .dsec { padding: 12px 16px; border-radius: 12px; background: rgba(71, 85, 105, 0.06); }
.dl > .dsec b { font-size: 13px; }
.dl > .dsec ul { padding-left: 18px; font-size: 13px; line-height: 1.7; margin-top: 4px; }
.dl > .dsec li:empty { display: none; }
.inp-h { display: flex; align-items: center; gap: 8px; }
.inp-h .ic { width: 17px; height: 17px; color: var(--cyan); }
.inp-h b { font-size: 14px; }
.inp-h small { font-size: 12px; color: var(--mut); }
.dl > .inp-f { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.memo { height: 100%; margin: 0; padding: 14px 18px; border-radius: 12px; background: #fffdf2; border: 1px solid #eadfb4; color: #3f3a2c; font: 13.5px/1.8 var(--jp); white-space: pre-wrap; }
.pdfv { display: grid; gap: 12px; padding: 2px; }
.pdfv img { width: 100%; border-radius: 4px; border: 1px solid var(--line2); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); }
.csvv { display: flex; flex-direction: column; gap: 6px; }
.csvv table { background: #f8fafd; border-radius: 10px; overflow: hidden; }
.csvv td:last-child, .csvv th:last-child { text-align: right; font-family: var(--en); }
.csvv small { font-size: 12px; color: var(--mut); }
.inp-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: rgba(2, 132, 199, 0.08); color: #075985; font-size: 13px; }
.inp-note .ic { width: 16px; height: 16px; flex: none; }
.grid-t.comp { background: #f8fafd; border-radius: 10px; overflow: hidden; }
.grid-t.comp th, .grid-t.comp td { padding: 9px 10px; font-size: 13px; }
.grid-t.comp thead th { color: #0f1f3d; font-weight: 700; }
.grid-t.comp thead th small { display: block; font-size: 10.5px; font-weight: 500; color: var(--mut); }
.grid-t.comp tbody th { color: var(--mut); font-weight: 500; }
.grid-t.comp td.g { color: #047857; font-weight: 700; }
.newst { padding: 16px 18px; border-radius: 16px; background: #f6fbf9; border: 1px solid rgba(5, 150, 105, 0.45); display: flex; flex-direction: column; gap: 9px; box-shadow: 0 0 40px rgba(5, 150, 105, 0.09); }
.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(71, 85, 105, 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: #ffffff; 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(217, 119, 6, 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: #ffffff; }
.hb.cust .bav { background: rgba(217, 119, 6, 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(79, 70, 229, 0.12); border: 1px solid rgba(79, 70, 229, 0.25); border-top-left-radius: 4px; }
.hb.cust p { background: rgba(217, 119, 6, 0.1); border: 1px solid rgba(217, 119, 6, 0.25); border-top-right-radius: 4px; }
.hb.speaking p { box-shadow: 0 0 20px rgba(79, 70, 229, 0.21); }
.hb.cust.speaking p { box-shadow: 0 0 20px rgba(217, 119, 6, 0.18); }
.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(217, 119, 6, 0.1); animation: blink 1.4s infinite; }
.hv-l .tr-mode { margin: 10px 0 2px; }
.hb.hear p { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 13px; }
.lw { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.lw i { width: 3px; height: 30%; border-radius: 2px; background: var(--amber); }
.hb.hear.speaking .lw i { animation: lwave 0.8s ease-in-out infinite; }
.lw i:nth-child(2) { animation-delay: 0.15s !important; } .lw i:nth-child(3) { animation-delay: 0.3s !important; }
.lw i:nth-child(4) { animation-delay: 0.45s !important; } .lw i:nth-child(5) { animation-delay: 0.6s !important; }
@keyframes lwave { 50% { height: 100%; } }
.stt-t { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #047857; }
.stt-t .ic { width: 11px; height: 11px; }
.sysl.dt { animation: none; color: var(--teal); background: rgba(13, 148, 136, 0.1); }
.sysl.dt b { font-family: var(--en); letter-spacing: 2px; min-width: 88px; }
.sysl.dt small { font-size: 11px; color: var(--mut); }
.dtmf { position: absolute; inset: 0; background: rgba(11, 16, 32, 0.94); color: #e7eef9; display: flex; flex-direction: column; align-items: center; padding: 70px 30px 0; gap: 14px; animation: fadein 0.3s; z-index: 2; }
.dtmf small { font-size: 14px; color: #8d9bb4; }
.dtmf b { font: 700 26px var(--en); letter-spacing: 6px; min-height: 36px; }
.dtmf .kp { display: grid; grid-template-columns: repeat(3, 64px); gap: 16px 22px; margin-top: 18px; }
.dtmf .kp i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 500 24px var(--en); font-style: normal; background: rgba(148, 163, 184, 0.16); }
.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(79, 70, 229, 0.12); color: #4338ca; }
.lg-rule { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.lg-guard { background: rgba(13, 148, 136, 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(71, 85, 105, 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: #0f1f3d; padding: 8px 10px; margin: -4px -10px; border-radius: 10px; background: rgba(79, 70, 229, 0.14); box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.3); }
.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(71, 85, 105, 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(71, 85, 105, 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(2, 132, 199, 0.3); } }
em.llm { background: rgba(79, 70, 229, 0.18); color: #4338ca; }
em.rule { background: rgba(37, 99, 235, 0.18); color: #1d4ed8; }
em.multi { background: rgba(219, 39, 119, 0.18); color: #be185d; }
em.vision { background: rgba(234, 88, 12, 0.18); color: #c2410c; }
.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: #ffffff; 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(217, 119, 6, 0.18); }
.opscr.in { opacity: 1; }
.opscr.taken { border-color: var(--green); box-shadow: 0 0 40px rgba(5, 150, 105, 0.15); }
.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(217, 119, 6, 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(5, 150, 105, 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(71, 85, 105, 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(79, 70, 229, 0.08); border: 1px solid rgba(79, 70, 229, 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: #4338ca; 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(255, 255, 255, 0.97); border: 1px solid rgba(5, 150, 105, 0.5); box-shadow: 0 -10px 40px rgba(15, 40, 90, 0.125), 0 0 40px rgba(5, 150, 105, 0.12); }
.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: #ffffff; 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(15, 23, 42, 0.45); z-index: 20; }
#help.show { display: grid; }
#help > div { padding: 30px 40px; border-radius: 20px; background: #ffffff; border: 1px solid var(--line2); }
#help h3 { margin-bottom: 14px; }
#help p { margin: 8px 0; color: #334155; }
kbd { display: inline-block; min-width: 28px; padding: 2px 8px; margin: 0 3px; border-radius: 6px; background: #eef2f7; border: 1px solid #cbd5e1; font-family: var(--en); font-size: 13px; text-align: center; }

/* 一時停止 */
#pz { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 999px; background: rgba(15, 31, 61, 0.9); color: #fff; z-index: 9; box-shadow: 0 10px 30px rgba(15, 40, 90, 0.25); font-size: 15px; }
#pz .ic { width: 18px; height: 18px; color: #7dd3fc; }
#pz small { opacity: 0.75; font-size: 12px; }
body.paused #pz { display: flex; }
body.paused #main *, body.paused #main *::before, body.paused #main *::after { animation-play-state: paused !important; }
.ib:disabled { opacity: 0.35; cursor: default; }
.ib.pz.on { color: var(--amber); border-color: rgba(217, 119, 6, 0.5); background: rgba(217, 119, 6, 0.08); }

/* 右上タブの切替（押したことが分かる動き） */
.subtabs button { position: relative; }
.subtabs button.press { animation: tabpress 1.1s ease both; color: var(--txt); }
.subtabs button.press::after { content: ""; position: absolute; left: 50%; top: 60%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(14, 165, 233, 0.45); animation: tapring 1.1s ease-out both; pointer-events: none; }
@keyframes tabpress { 0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.6); } 30% { transform: scale(0.9); background: rgba(14, 165, 233, 0.22); } 55% { transform: scale(1.05); background: rgba(14, 165, 233, 0.22); box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.25); } 100% { background: rgba(14, 165, 233, 0.16); box-shadow: 0 0 0 14px rgba(14, 165, 233, 0); } }
@keyframes tapring { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }

/* ③ 月次レポートの出力イメージ */
.rp-r { position: relative; }
.rp-out { position: absolute; inset: 44px 0 0; z-index: 3; padding: 14px 18px; background: rgba(243, 246, 251, 0.97); backdrop-filter: blur(6px); border-radius: 0 0 18px 18px; display: flex; flex-direction: column; gap: 12px; animation: fadein 0.45s ease; }
.ro-h { display: flex; align-items: baseline; gap: 10px; }
.ro-h .ic { color: var(--navy); align-self: center; }
.ro-h b { font-size: 16px; color: var(--navy); }
.ro-h small { color: var(--mut); font-size: 12.5px; }
.ro-g { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.ro-f { display: flex; flex-direction: column; gap: 8px; min-height: 0; animation: fadein 0.5s ease both; }
.ro-f + .ro-f { animation-delay: 0.35s; }
.ro-t { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ro-t .ic { width: 16px; height: 16px; color: #c2410c; }
.ro-f + .ro-f .ro-t .ic { color: #15803d; }
.ro-t small { margin-left: auto; color: var(--mut); font-size: 11.5px; }
.ppt { aspect-ratio: 16 / 9; width: 100%; background: #fff; border-radius: 6px; box-shadow: 0 12px 34px rgba(15, 40, 90, 0.16); border: 1px solid var(--line); padding: 16px 20px 12px; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 10px; position: relative; overflow: hidden; }
.ppt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--grad); }
.ppt-h { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--navy); padding-bottom: 6px; }
.ppt-h b { font-size: 17px; color: var(--navy); }
.ppt-h small { font-size: 11px; color: var(--mut); }
.ppt-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ppt-k div { padding: 6px 10px; border-radius: 6px; background: #eff6ff; border-top: 3px solid var(--sky); }
.ppt-k small { display: block; font-size: 10.5px; color: var(--mut); }
.ppt-k b { font-family: var(--en); font-size: 20px; color: var(--navy); }
.ppt-k b i { font-style: normal; font-size: 11px; margin-left: 2px; color: var(--mut); }
.ppt-c { min-height: 0; display: flex; align-items: center; justify-content: center; }
.ppt-c svg { max-width: 100%; height: auto; }
.ppt-c .ln { stroke-dashoffset: 0 !important; }
.ppt-n { display: flex; gap: 6px; font-size: 11.5px; line-height: 1.5; color: #334155; background: #f8fafc; border-radius: 6px; padding: 6px 8px; }
.ppt-n .ic { width: 14px; height: 14px; flex: none; color: var(--sky); margin-top: 1px; }
.ppt-f { font-size: 9.5px; color: var(--dim); text-align: right; }
.ppt-th { display: flex; gap: 6px; }
.ppt-th span { flex: 1; text-align: center; font-size: 11px; padding: 5px 0; border-radius: 6px; background: #fff; border: 1px solid var(--line); color: var(--mut); }
.ppt-th span.on { border-color: #c2410c; color: #c2410c; font-weight: 700; }
.xl { width: 100%; border-collapse: collapse; background: #fff; font-size: 12.5px; box-shadow: 0 12px 34px rgba(15, 40, 90, 0.12); }
.xl th { background: #f1f5f9; color: #64748b; font-weight: 500; font-size: 11px; border: 1px solid #d9e1ea; padding: 3px 6px; width: 24px; }
.xl td { border: 1px solid #d9e1ea; padding: 6px 8px; white-space: nowrap; }
.xl td.xh { background: #15803d; color: #fff; font-weight: 700; }
.xl td.n { text-align: right; font-family: var(--en); }
.xl td.neg { color: #dc2626; }
.xl td.xs { font-weight: 700; background: #f0fdf4; }
.xl-tabs { display: flex; gap: 2px; margin-top: -8px; }
.xl-tabs span { padding: 4px 12px; font-size: 11.5px; color: var(--mut); background: #f1f5f9; border: 1px solid var(--line); border-top: 0; }
.xl-tabs span.on { background: #fff; color: #15803d; font-weight: 700; }
.ppt-c .area { opacity: 1; }