:root{
  --bg:#f3f5f8; --surface:#fff; --surface-2:#f8fafc; --line:#dde2ea; --line-2:#eef1f5;
  --ink:#16202e; --ink-2:#556274; --ink-3:#8a95a5;
  --bar:#14213d; --bar-ink:#fff; --bar-ink-2:#b9c3d6;
  --accent:#f5a00f; --accent-ink:#14213d; --accent-soft:#fff3da; --accent-soft-ink:#9a5d00;
  --good:#17804a; --good-soft:#e2f5ea; --bad:#b42318; --bad-soft:#fde8e7;
  --btn:#14213d; --btn-ink:#fff;
  --f-ui:"M PLUS 1p","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1520; --surface:#172030; --surface-2:#1b2536; --line:#2a3548; --line-2:#222c3d;
  --ink:#e8edf5; --ink-2:#a7b2c3; --ink-3:#7a869a;
  --bar:#0a1120; --bar-ink-2:#93a0b8;
  --accent:#f5a823; --accent-soft:#3a2c12; --accent-soft-ink:#f7c766;
  --good:#4cc283; --good-soft:#153826; --bad:#f17c72; --bad-soft:#3d1c1a;
  --btn:#e8edf5; --btn-ink:#14213d; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14px;line-height:1.55}
button,input,select{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar{position:sticky;top:0;z-index:5;background:var(--bar);color:var(--bar-ink);padding-top:env(safe-area-inset-top,0px)}
.bar-in{display:flex;align-items:center;gap:20px;min-height:56px;flex-wrap:wrap;padding-block:6px;max-width:1400px;margin:0 auto}
.logo{font-weight:800;font-size:18px;letter-spacing:.04em;white-space:nowrap}
.logo b{color:var(--accent);font-weight:800}
.tabs{display:flex;gap:4px}
.tab{background:none;border:0;color:var(--bar-ink-2);padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:500}
.tab[aria-current="page"]{color:var(--bar-ink);background:rgba(255,255,255,.1)}
.meta{margin-left:auto;font-size:12.5px;color:var(--bar-ink-2);display:flex;gap:12px;align-items:center}
.linkbtn{background:none;border:0;color:var(--bar-ink);text-decoration:underline;cursor:pointer;font-size:12px;padding:0 0 0 6px}
.okmsg{color:var(--good)}
.ver{font-family:var(--f-num);font-size:11px;opacity:.75}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.banner{background:var(--bad-soft);color:var(--bad);font-size:13px;padding-block:10px;font-weight:700}
.banner.info{background:var(--accent-soft);color:var(--accent-soft-ink)}
main{padding-block:20px 56px;max-width:1400px;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.pad{padding:20px}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-size:18px}
h3{font-size:15px}
.sub{color:var(--ink-2);font-size:13px;margin:4px 0 0}
.note{color:var(--ink-3);font-size:12px;margin:0}
.lb{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:14px 0 6px}
.in{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:0 11px;min-width:0}
.range{display:flex;gap:8px;align-items:center}
.range .in{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 18px;border-radius:8px;border:1px solid transparent;background:var(--btn);color:var(--btn-ink);font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none;font-size:13.5px}
.btn.acc{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.sm{min-height:30px;padding:0 11px;font-size:12px}
.btn.big{min-height:48px;font-size:15px;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--line-2);color:var(--ink-2);white-space:nowrap}
.chip.new{background:var(--accent-soft);color:var(--accent-soft-ink)}
.chip.ok{background:var(--good-soft);color:var(--good)}
.chip.ng{background:var(--bad-soft);color:var(--bad)}
.chipbtn{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 11px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.chipbtn[aria-pressed="true"]{background:var(--good-soft);color:var(--good);border-color:transparent}
.sortbtn{border:0;background:var(--line-2);color:var(--ink-2);border-radius:99px;padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer}
.sortbtn[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
.switch{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;margin:8px 0;cursor:pointer}
.switch input{appearance:none;width:36px;height:21px;border-radius:99px;background:var(--line);position:relative;flex:none;cursor:pointer;margin:0}
.switch input::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--surface);transition:left .15s}
.switch input:checked{background:var(--btn)}
.switch input:checked::after{left:18px}
.layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;align-items:start}
.rail{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto}
.sec{border-top:1px solid var(--line-2);margin-top:16px;padding-top:4px}
.sec-t{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);margin:12px 0 0}
.estimate{background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;font-size:12.5px;margin:14px 0 10px}
.estimate b{font-size:14px}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}
.stat{padding:14px 16px}
.stat .k{font-size:12px;color:var(--ink-2)}
.stat .v{font-size:23px;font-weight:700;margin-top:2px}
.stat .v small{font-size:12.5px;color:var(--ink-3);font-weight:500}
.tbl-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{font-size:11.5px;color:var(--ink-2);text-align:left;font-weight:700;padding:10px 8px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle;font-size:13px}
th.r,td.r{text-align:right}
td.sm2{font-size:11.5px;color:var(--ink-3)}
tr.row{cursor:pointer}
tr.row:hover td{background:var(--surface-2)}
.prod{display:flex;gap:10px;align-items:center;min-width:240px;max-width:380px}
.thumb{width:46px;height:46px;border-radius:8px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--line-2)}
.thumb.ph{display:grid;place-items:center;font-size:10px;color:var(--ink-3);background:var(--line-2)}
.pname{font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.asin{font-size:11px;color:var(--ink-3)}
.profit{font-weight:700;color:var(--good)}
.loss{font-weight:700;color:var(--bad)}
.empty{padding:48px 20px;text-align:center;color:var(--ink-2)}
.detail{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.kv{width:100%}
.kv td{padding:8px 2px;font-size:13.5px}
.kv tr.total td{border-top:2px solid var(--ink);border-bottom:0;font-weight:700;font-size:15.5px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--btn);color:var(--btn-ink);padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;z-index:20;max-width:calc(100vw - 32px)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ftoggle{all:unset;display:flex;justify-content:space-between;align-items:center;width:100%}
.ftoggle span{display:none}
svg text{font-family:var(--f-ui)}
@media (max-width:900px){
  .layout,.detail,.grid2{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;max-height:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftoggle{cursor:pointer}
  .ftoggle span{display:inline;font-size:12.5px;color:var(--ink-2);font-weight:700}
  .rail:not(.open) .fbody{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.btn.stack{flex-direction:column;gap:0;line-height:1.25;padding-block:6px}
.btn.stack small{font-size:10.5px;font-weight:500;opacity:.8}
.btn.sm.stack{min-height:36px}
.req,.opt{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:1px}
.req{background:var(--bad-soft);color:var(--bad)}
.opt{background:var(--line-2);color:var(--ink-2)}

/* v0.5.3 ロゴとヘッダー下のグラデーション罫線 */
.logo img{display:block;height:30px;width:auto;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.loginlogo{display:inline-block;background:#14213d;border-radius:10px;padding:14px 20px}
.loginlogo img{display:block;height:40px;width:auto}
.bar::before,.bar::after{content:"";position:absolute;left:0;right:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(34,211,238,0),#22d3ee 22%,#38bdf8 50%,#3b82f6 78%,rgba(59,130,246,0))}
.bar::after{bottom:-2px;height:2px}
.bar::before{bottom:-7px;height:10px;filter:blur(7px);opacity:.6}