:root{
  --bg:#f6f7f9;--surface:#fff;--sub:#fafbfc;--line:#e6e8ec;--line2:#eef0f3;
  --ink:#0f1728;--ink2:#344054;--mute:#667085;--faint:#7d8799;
  --blue:#2563c9;--blue-bg:#eef4fd;--green:#0f7a55;--green-bg:#ecf7f2;--amber:#b45309;--amber-bg:#fdf5e8;--gray-bg:#f2f4f7;
  --r:8px;--sh:0 1px 2px rgba(16,24,40,.05);--sh2:0 1px 2px rgba(16,24,40,.06),0 4px 12px -2px rgba(16,24,40,.08);
  --num:"Inter","SF Pro Text","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.6 "Hiragino Sans","Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.top-in{max-width:1360px;margin:0 auto;height:60px;padding:0 24px;display:flex;align-items:center;gap:14px}
.mark{width:28px;height:28px;border-radius:7px;background:#0f1728;display:grid;place-items:center;color:#fff}
.mark svg{width:16px;height:16px}
.title{font-weight:700;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.crumb{color:var(--faint);font-size:13px;white-space:nowrap}
.sp{flex:1}
.status{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink2);background:var(--surface);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.status[data-s="run"] .dot{background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,201,.15);animation:pulse 1.2s infinite}
.status[data-s="done"] .dot{background:var(--green)}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(37,99,201,.05)}}
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:7px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink2);box-shadow:var(--sh);white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--sub);border-color:#d5d9e0}
.btn.pri{background:#0f1728;border-color:#0f1728;color:#fff}
.btn.pri:hover{background:#26324a}
.btn:disabled{opacity:.5;cursor:default}
.kbd{font:600 11px var(--num);color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:2px}
.btn.pri .kbd{color:#aab4c5;border-color:#3a465e}

main{max-width:1360px;margin:0 auto;padding:22px 24px 40px}
.head{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px}
.head h1{font-size:20px;margin:0;letter-spacing:.01em}
.head p{margin:2px 0 0;color:var(--mute);font-size:13px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:2px;box-shadow:var(--sh)}
.seg button{border:0;background:none;height:28px;padding:0 10px;border-radius:5px;font-size:12px;font-weight:600;color:var(--mute);display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed="true"]{background:var(--gray-bg);color:var(--ink)}
.seg .c{font:600 11px var(--num);color:var(--faint)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.ch{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
.ch h2{font-size:14px;margin:0;font-weight:700}
.ch .meta{margin-left:auto;font-size:12px;color:var(--mute);display:flex;align-items:center;gap:10px;white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:5px;font-size:11.5px;font-weight:600;background:var(--gray-bg);color:var(--ink2);white-space:nowrap}
.tag.g{background:var(--green-bg);color:var(--green)}
.tag.b{background:var(--blue-bg);color:var(--blue)}
.tag.a{background:var(--amber-bg);color:var(--amber)}
.tag i{width:6px;height:6px;border-radius:50%;background:currentColor}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.kpi{padding:14px 16px 12px;position:relative;overflow:hidden}
.kpi .l{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mute);font-weight:600}
.kpi .l svg{color:var(--faint)}
.kpi .v{font:700 26px/1.2 var(--num);margin:8px 0 2px;letter-spacing:-.02em}
.kpi .v small{font-size:15px;font-weight:600;margin-left:2px;color:var(--ink2)}
.kpi .s{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:6px;min-height:20px}
.kpi .spark{position:absolute;right:14px;bottom:12px;width:96px;height:34px}
.meter{height:4px;border-radius:2px;background:var(--line2);overflow:hidden;width:96px}
.meter b{display:block;height:100%;background:var(--green);border-radius:2px;transition:width .4s}

.grid2{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;margin-bottom:12px}
.chart{padding:6px 16px 14px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:2px;border-radius:1px;background:currentColor}
.legend i.dash{background:none;border-top:2px dashed currentColor;height:0}
svg.plot{width:100%;display:block;overflow:visible}
svg.plot text{font:11px var(--num);fill:var(--faint)}
.tip{position:absolute;pointer-events:none;background:#0f1728;color:#fff;border-radius:6px;padding:7px 9px;font-size:12px;line-height:1.5;box-shadow:var(--sh2);opacity:0;transition:opacity .12s;white-space:nowrap;z-index:5}
.tip b{font-family:var(--num)}
.rel{position:relative}
.empty-ov{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.empty-ov div{background:var(--surface);border:1px dashed #d0d5dd;border-radius:7px;padding:8px 12px;font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:8px}

.dsel{display:flex;gap:6px;padding:12px 16px 0;flex-wrap:wrap}
.dsel button{height:28px;padding:0 10px;border:1px solid var(--line);background:var(--surface);border-radius:6px;font-size:12px;font-weight:600;color:var(--mute)}
.dsel button[aria-pressed="true"]{border-color:#0f1728;color:var(--ink);box-shadow:inset 0 0 0 1px #0f1728}
.dstats{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 16px 0;border:1px solid var(--line2);border-radius:7px}
.dstats>div{padding:9px 12px}
.dstats>div+div{border-left:1px solid var(--line2)}
.dstats .l{font-size:11.5px;color:var(--mute)}
.dstats .v{font:700 19px/1.3 var(--num)}
.dstats .v.g{color:var(--green)}

/* pipeline */
.pipe{margin-bottom:12px}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:14px 16px 0;border:1px solid var(--line2);border-radius:7px;overflow:hidden}
.st{padding:11px 12px 12px;position:relative;background:var(--surface);transition:background .2s}
.st+.st{border-left:1px solid var(--line2)}
.st .n{display:flex;align-items:center;gap:7px;font:600 11px var(--num);color:var(--faint)}
.st .ic{width:20px;height:20px;border-radius:50%;border:1.5px solid #d0d5dd;display:grid;place-items:center;color:transparent;background:var(--surface)}
.st .ic svg{width:12px;height:12px;stroke-width:2.4}
.st h3{margin:7px 0 1px;font-size:13px}
.st p{margin:0;font-size:12px;color:var(--mute)}
.st[data-s="active"]{background:var(--blue-bg)}
.st[data-s="active"] .ic{border-color:var(--blue);background:radial-gradient(circle,var(--blue) 0 3.5px,transparent 4px)}
.st[data-s="done"] .ic{border-color:var(--green);background:var(--green);color:#fff}
.pbar{display:flex;align-items:center;gap:12px;padding:12px 16px 14px;font-size:12.5px;color:var(--mute)}
.pbar .track{flex:1;height:6px;background:var(--line2);border-radius:3px;overflow:hidden}
.pbar .track b{display:block;height:100%;width:0;background:#0f1728;border-radius:3px;transition:width .3s}
.runs{display:flex;gap:4px}
.runs i{width:18px;height:6px;border-radius:2px;background:var(--line)}
.runs i.on{background:var(--green)}

/* sourcing */
.grid3{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-bottom:12px}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;font-weight:600;color:var(--mute);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--sub);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:middle;white-space:nowrap}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.tbl{margin-top:12px;border-top:1px solid var(--line)}
.prow{cursor:pointer;transition:background .12s}
.prow td{padding-top:16px;padding-bottom:16px}
.grid3>.card:first-child{display:flex;flex-direction:column}
.grid3>.card:first-child .tbl{flex:1;display:flex}
.grid3>.card:first-child table{height:100%}
.tfoot{display:flex;gap:18px;padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.tfoot b{font:700 13px var(--num);color:var(--ink);margin-left:6px}
.prow:hover{background:var(--sub)}
.prow[data-selected="true"]{background:#f4f7fc}
.prow[data-selected="true"] td:first-child{box-shadow:inset 3px 0 0 #0f1728}
.pn{display:flex;align-items:center;gap:10px}
.product-choice{padding:0;border:0;background:none;text-align:left;width:100%}
.pn .product-info{display:block;color:var(--ink)}
.pn img{width:40px;height:40px;border-radius:6px;border:1px solid var(--line);object-fit:cover;background:#eee}
.pn b{display:block;font-size:13px}
.pn span{font-size:12px;color:var(--mute);display:inline-flex;align-items:center;gap:4px}
.mbar{display:inline-flex;align-items:center;gap:8px}
.mbar i{width:56px;height:5px;border-radius:3px;background:var(--line2);overflow:hidden;display:block}
.mbar i b{display:block;height:100%;background:var(--green)}
.profit{color:var(--green);font-weight:700}

.brk{padding:4px 16px 16px}
.brk .big{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px}
.brk .big b{font:700 30px/1.1 var(--num);color:var(--green);letter-spacing:-.02em}
.brk .big span{font-size:12.5px;color:var(--mute)}
.stack{display:flex;height:12px;border-radius:3px;overflow:hidden;margin:12px 0 6px;gap:2px}
.stack i{display:block;height:100%}
.stk-l{display:flex;justify-content:space-between;font:11px var(--num);color:var(--faint)}
.lines{margin-top:12px;border-top:1px solid var(--line2)}
.ln{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line2);font-size:13px}
.ln i{width:8px;height:8px;border-radius:2px}
.ln span{color:var(--ink2)}
.ln b{margin-left:auto;font:600 13px var(--num)}
.ln.tot b{font-weight:700}
.ln.tot span{font-weight:700;color:var(--ink)}
.ln .pc{width:48px;text-align:right;font:12px var(--num);color:var(--faint)}
.inv{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12.5px;color:var(--mute)}
.inv b{font:700 14px var(--num);color:var(--ink);margin-left:6px}

/* orders */
.ord .ch{padding-bottom:0}
.ord .tools{display:flex;align-items:center;gap:10px;padding:12px 16px}
.search{display:flex;align-items:center;gap:7px;height:32px;border:1px solid var(--line);border-radius:7px;padding:0 10px;color:var(--faint);font-size:12.5px;width:240px;background:var(--surface)}
.trk{font:12px var(--num);color:var(--ink2);display:inline-flex;align-items:center;gap:5px}
.trk svg{color:var(--faint)}
.empty{padding:36px 16px 40px;text-align:center;color:var(--mute);border-top:1px solid var(--line)}
.empty .ico{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 10px;color:var(--faint);background:var(--sub)}
.empty .ico svg{width:20px;height:20px}
.empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.empty p{margin:0 0 12px;font-size:12.5px}
tr.new td{animation:fl 1.2s ease-out}
@keyframes fl{from{background:#f0f6ff}}
.foot{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12px;color:var(--mute);line-height:1.7}
.foot svg{margin-top:2px;color:var(--faint)}
.ocards{display:none}

@media (max-width:1100px){.grid2,.grid3{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .top-in{padding:0 14px;height:54px;gap:10px}
  .crumb,.t-pc{display:none}
  #reset{padding:0 9px}
  .btn.pri{padding:0 11px}
  .brk .big{flex-wrap:wrap}.brk .big span:not(.tag){order:3;width:100%}
  .title{font-size:14px}
  main{padding:14px 12px 32px}
  .head{flex-direction:column;align-items:flex-start;gap:10px}
  .head h1{font-size:17px}
  .kpis{gap:8px}
  .kpi{padding:12px}
  .kpi .v{font-size:21px}
  .kpi .spark{display:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .st:nth-child(odd){border-left:0}.st:nth-child(n+3){border-top:1px solid var(--line2)}
  .ch{flex-wrap:wrap}
  .ch .meta{margin-left:0;width:100%}
  .hide-sp{display:none}
  td,th{padding:9px 10px}
  .pn img{width:34px;height:34px}
  .search{display:none}
  .otbl{display:none}
  .ocards{display:block;border-top:1px solid var(--line)}
  .oc{padding:12px 14px;border-bottom:1px solid var(--line2);display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px}
  .oc:last-child{border-bottom:0}
  .oc .id{font:600 12px var(--num);color:var(--mute)}
  .oc .r{text-align:right}
  .top-in{flex-wrap:wrap;height:auto;padding:10px 14px;row-gap:8px}
  .top-in>.sp{flex-basis:100%;height:0}
  .top-in .status{margin-right:auto}
}

/* 旧インラインstyleの置き換え */
.cs1{position:absolute !important}
.cs2{height:auto !important;bottom:16px !important}
.cs3{width:0}
.cs4{color:var(--blue) !important}
.cs5{color:var(--green) !important}
.cs6{height:230px !important}
.cs7{height:120px !important;margin-top:10px !important}
.cs8{justify-content:space-between !important;margin-top:6px !important}
.cs9{color:var(--blue) !important;display:inline-flex !important;align-items:center !important;gap:6px !important}
.cs10{width:10px !important;height:2px !important;background:currentColor !important;display:inline-block !important}
.cs11{color:var(--amber) !important;display:inline-flex !important;align-items:center !important;gap:6px !important}
.cs12{width:10px !important;display:inline-block !important}
.cs13{margin-left:auto !important}
.i12{width:12px!important;height:12px!important}.i13{width:13px!important;height:13px!important}.gap-c{color:var(--green);font-weight:600}.mute-c{color:var(--mute)!important}.mt0{margin-top:0!important}.fw6{font-weight:600}.oimg{width:28px!important;height:28px!important;border-radius:5px}.oname{color:var(--ink);font-size:13px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}