:root { --navy:#1d2a3a; --ink:#1b2430; --dim:#6a7382; --line:#e2e6ec; --bg:#f4f5f7; --accent:#0f7c86; --green:#1a8a5a; --red:#cf3a3a; --amber:#b9770e; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.7 "Hiragino Sans","Noto Sans JP",system-ui,sans-serif; color:var(--ink); background:var(--bg); display:flex; min-height:100vh; }
a { color:var(--accent); text-decoration:none; }
h1,h2,h3,p,ul { margin:0; padding:0; } ul { list-style:none; }
small { color:var(--dim); font-size:12px; }
.dim { color:var(--dim); } .hot { color:var(--red); } .good { color:var(--green); } .warn { color:var(--amber); } .nw { white-space:nowrap; } .r { text-align:right; }

.side { width:216px; flex:none; background:var(--navy); color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:20px 0 16px; }
.brand { display:flex; gap:10px; align-items:center; padding:0 18px 20px; }
.brand b { display:block; font-size:17px; letter-spacing:.06em; line-height:1.2; } .brand small { color:#a7b1c0; }
#nav { display:flex; flex-direction:column; gap:1px; padding:0 8px; flex:1; overflow:auto; }
#nav a { color:#c9d1dc; padding:8px 14px; font-size:14px; }
#nav a:hover { color:#fff; } #nav a.on { background:#2f4258; color:#fff; font-weight:700; }
#nav .grp { color:#7d8899; font-size:11px; font-weight:700; letter-spacing:.08em; padding:14px 14px 4px; }
.me { display:flex; gap:10px; align-items:center; padding:14px 18px 0; border-top:1px solid #33445a; }
.me small { display:block; color:#a7b1c0; } .ini { width:34px; height:34px; background:#2f4258; display:grid; place-items:center; font-weight:700; }

main { flex:1; min-width:0; padding:22px 28px 40px; }
.top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:18px; }
h1 { font-size:23px; font-weight:800; line-height:1.4; } #pagehead p { color:var(--dim); }
#q { width:300px; max-width:40vw; padding:9px 14px; border:1px solid var(--line); background:#fff; font:inherit; }
.crumb { font-size:12px; color:var(--dim); }
.foot { margin-top:28px; font-size:12px; color:var(--dim); }

.card { background:#fff; border:1px solid var(--line); padding:18px 20px; margin-bottom:16px; }
.card h2 { font-size:16px; font-weight:800; margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.card h2 small, .card h2 a { font-size:12px; font-weight:400; }
.card h3 { font-size:13px; color:var(--dim); font-weight:700; margin:16px 0 6px; }
.grid { display:grid; gap:16px; } .g2 { grid-template-columns:1.6fr 1fr; } .g2b { grid-template-columns:1fr 1fr; } .g3 { grid-template-columns:repeat(3,1fr); } .detail { grid-template-columns:1fr 1.2fr; align-items:start; }

.kpis { display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border:1px solid var(--line); margin-bottom:16px; }
.kpi { padding:14px 20px; color:inherit; display:block; } .kpi + .kpi { border-left:1px solid var(--line); }
.kpi span { font-size:12px; color:var(--dim); display:block; } .kpi strong { font-size:30px; font-weight:800; line-height:1.3; display:block; }
.kpi em { font-style:normal; font-size:14px; margin-left:3px; font-weight:400; } .kpi small { display:block; }

table { width:100%; border-collapse:collapse; font-size:13px; } th { text-align:left; font-size:12px; color:var(--dim); font-weight:400; padding:6px 10px; background:#f4f5f7; white-space:nowrap; }
td { padding:9px 10px; border-top:1px solid var(--line); vertical-align:top; } tr[data-href] { cursor:pointer; } tr[data-href]:hover td { background:#f6f8fa; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr.total td { font-weight:700; background:#fafbfc; }
.chip { font-size:11px; padding:1px 9px; white-space:nowrap; font-weight:700; display:inline-block; background:#eceff3; color:#4b5564; }
.chip.s1 { background:#e6f3f4; color:#0c6870; } .chip.s2 { background:#e3f1e9; color:#17734b; } .chip.lost { background:#f9e9e9; color:#a52b2b; } .chip.own { background:#fbf1de; color:#8a5a08; } .chip.end { background:#eee; color:#888; text-decoration:line-through; }

.funnel li { display:grid; grid-template-columns:84px 1fr 54px 64px; gap:10px; align-items:center; padding:5px 0; font-size:13px; }
.funnel div { background:#eef1f4; height:20px; } .funnel i { display:block; height:100%; background:var(--accent); } .funnel b { text-align:right; } .funnel small { text-align:right; }
.bars li { display:grid; grid-template-columns:110px 1fr 70px; gap:10px; align-items:center; padding:5px 0; font-size:13px; }
.bars div { background:#eef1f4; height:12px; } .bars i { display:block; height:100%; background:#5d7a96; } .bars b { text-align:right; font-weight:400; }

.tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; } .tabs button { font:inherit; font-size:13px; padding:6px 14px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--dim); }
.tabs button.on { background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .filters select { font:inherit; font-size:13px; padding:6px 10px; border:1px solid var(--line); background:#fff; }
.btn { font:inherit; font-weight:700; background:var(--accent); color:#fff; border:1px solid var(--accent); padding:7px 16px; cursor:pointer; display:inline-block; font-size:13px; }
.btn.ghost { background:#fff; color:var(--accent); border-color:var(--line); } .acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.dl { display:grid; grid-template-columns:100px 1fr; gap:6px 14px; font-size:13px; } .dl dt { color:var(--dim); } .dl dd { margin:0; }
.quote { font-size:13px; color:var(--dim); padding:3px 0; }
.match { border-top:1px solid var(--line); padding:12px 0; } .match:first-of-type { border:0; padding-top:0; }
.match .hd { display:flex; gap:14px; align-items:baseline; } .match .hd > div { flex:1; } .score { font-size:20px; font-weight:800; color:var(--accent); white-space:nowrap; }
.why { font-size:12px; margin-top:4px; color:var(--dim); } .why b { color:var(--green); font-weight:700; } .why s { color:var(--red); text-decoration:none; }
.tl li { display:grid; grid-template-columns:96px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:13px; } .tl li:first-child { border:0; }

.flow { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); margin-bottom:16px; }
.flow > div { padding:14px 18px; } .flow > div + div { border-left:1px solid var(--line); } .flow b { display:block; font-size:15px; } .flow p { font-size:12px; color:var(--dim); }
.flow .ai { background:#eef6f7; }
.chat { display:flex; flex-direction:column; gap:12px; } .chat .u { align-self:flex-end; background:var(--navy); color:#fff; padding:8px 14px; max-width:80%; font-size:13px; }
.chat .a { background:#f4f5f7; padding:12px 16px; font-size:13px; max-width:92%; } .chat .a table { background:#fff; margin-top:8px; } .chat .t { font-size:11px; color:var(--dim); margin-bottom:2px; }
.costin { width:110px; padding:5px 8px; border:1px solid var(--line); font:inherit; font-size:13px; text-align:right; }
.drop { border:1px dashed #b9c2cd; padding:22px; text-align:center; color:var(--dim); background:#fafbfc; }
.note { font-size:12px; color:var(--dim); margin-top:8px; }

#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 22px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:9; } #toast.show { opacity:1; }
@media (max-width:1100px) { .g2,.g2b,.g3,.detail,.flow { grid-template-columns:1fr; } .flow > div + div { border-left:0; border-top:1px solid var(--line); } .kpis { grid-template-columns:repeat(2,1fr); } .kpi + .kpi { border-left:0; border-top:1px solid var(--line); } }
@media (max-width:760px) { body { display:block; } .side { position:static; width:auto; height:auto; } #nav { flex-direction:row; flex-wrap:wrap; } .me { display:none; } main { padding:16px; } .top { flex-direction:column; } #q { width:100%; max-width:none; } .card { overflow-x:auto; } }

/* スプレッドシート風の一覧 */
.sheetwrap { overflow:auto; max-height:calc(100vh - 250px); border:1px solid var(--line); }
.sheet { width:max-content; min-width:100%; font-size:13px; border-collapse:separate; border-spacing:0; }
.sheet th { position:sticky; top:0; z-index:2; background:#eef0f3; border-bottom:1px solid #d5dae1; border-right:1px solid #e3e6eb; padding:5px 8px; }
.sheet td { padding:5px 8px; border-top:0; border-bottom:1px solid #eceff3; border-right:1px solid #eceff3; white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; height:34px; vertical-align:middle; cursor:cell; user-select:none; background:#fff; }
.sheet td.ro { background:#fafbfc; color:var(--dim); }
.sheet td.dirty { background:#fff8db; }
.sheet td.sel { box-shadow:inset 0 0 0 2px var(--accent); }
.sheet tbody tr:hover td:not(.sel) { background-image:linear-gradient(rgba(15,124,134,.04),rgba(15,124,134,.04)); }
.sheet td:has(.ed) { padding:0; box-shadow:inset 0 0 0 2px var(--accent); }
.sheet .ed { width:100%; min-width:100%; height:33px; border:0; outline:0; padding:0 8px; font:inherit; font-size:13px; background:#fff; }
.hint { font-size:12px; color:var(--dim); margin:-4px 0 10px; }
.saved { font-size:12px; color:var(--green); align-self:center; }
.filters .btn { margin-left:auto; } .filters .saved + .btn { margin-left:12px; } .filters .saved { margin-left:auto; }
.tot { font-size:13px; margin-top:8px; color:var(--dim); } .tot b { color:var(--ink); margin-right:6px; }
.card .filters:first-of-type:has(#addSrc) { margin-top:-6px; }
.steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:0; border:1px solid var(--line); }
.steps li { padding:8px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--dim); }
.steps li span { display:block; font-size:12px; } .steps li b { display:block; font-size:15px; } .steps li small { display:block; min-height:18px; }
.steps li.done { color:var(--ink); } .steps li.done b { color:var(--accent); }
.dots { list-style:disc; padding-left:18px; font-size:13px; } .dots li { padding:3px 0; }
.fbar { background:#eef1f4; height:14px; width:150px; } .fbar i { display:block; height:100%; background:var(--accent); }
.kpit { width:max-content; min-width:100%; } .kpit th { white-space:normal; line-height:1.3; vertical-align:bottom; }
.bars li { grid-template-columns:150px 1fr 96px; } .bars b small { margin-left:4px; }
.fbar { background:#eef1f4; height:14px; width:150px; } .fbar i { display:block; height:100%; background:var(--accent); }
.kpit { width:max-content; min-width:100%; } .kpit th { white-space:normal; line-height:1.3; vertical-align:bottom; }
.bars li { grid-template-columns:150px 1fr 96px; } .bars b small { margin-left:4px; }
.invite { display:flex; gap:8px; flex-wrap:wrap; } .invite input, .invite select { font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line); }
.invite input[type=email] { min-width:220px; }
body.login { display:block; background:var(--bg); }
.loginbox { max-width:420px; margin:12vh auto 0; padding:32px 28px; background:#fff; border:1px solid var(--line); }
.loginbox h1 { font-size:20px; margin-bottom:8px; } .loginbox form { display:flex; gap:8px; margin-top:18px; }
.loginbox input { flex:1; font:inherit; padding:9px 12px; border:1px solid var(--line); }