/* LITE（Python なし版・2026-10-29）。今の /lite/（Streamlit）の見た目を素の HTML で写したもの。
   色・角丸・影は lite-web/app/app.py の CUSTOM_CSS・LISTA_CSS・_HEADER_CSS と同じ値 */
:root {
  --ink: #1a2333; --sub: #5a6577; --mute: #8a94a6; --line: #e3e8f1; --line2: #cfd7e3; --bg: #eef2f9; --soft: #f3f5fb;
  --purple: #7c4dff; --purple-deep: #5b34d6; --purple-soft: #f6f2ff; --purple-line: #cdbcff;
  --green: #0a7a43; --rainbow: linear-gradient(90deg, #2f6bff, #7c4dff, #c86dd7, #f6588a, #ff9a3d);
  --shadow: 0 4px 18px rgba(30, 50, 90, 0.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ink); font-size: 16px; line-height: 1.6;
  background: var(--rainbow) top / 100% 4px no-repeat, var(--bg); min-height: 100vh;
}
a { color: #1f4fd6; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { font: inherit; color: var(--ink); }
.hidden { display: none !important; }

/* ---------- 全体の枠（左のサイドバー＋本文） ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 300px; flex: 0 0 300px; background: var(--bg); border-right: 1px solid var(--line); padding: 64px 24px 32px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-toggle { position: fixed; top: 14px; left: 14px; z-index: 50; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--sub); font-size: 18px; line-height: 1; box-shadow: var(--shadow); }
body.sb-closed .sidebar { display: none; }
.main { flex: 1 1 auto; min-width: 0; padding: 48px 56px 96px; }
.main-inner { max-width: 1180px; margin: 0 auto; }
@media (max-width: 900px) {
  .app { display: block; }
  .sidebar { position: static; width: auto; height: auto; padding: 60px 16px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .main { padding: 24px 16px 80px; }
}

/* ---------- 部品 ---------- */
.card { background: var(--rainbow) top / 100% 3px no-repeat, #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; }
.box { background: #fff; border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 2px 10px rgba(30, 50, 90, .08); padding: 14px 16px; }
.lx-label { font-size: .8rem; font-weight: 800; letter-spacing: 1px; color: var(--purple); margin: 2px 0 6px; }
.caption { font-size: .95rem; color: #3b4657; line-height: 1.7; margin: 4px 0; }
.small { font-size: .82rem; color: var(--sub); }
.field-label { font-size: .875rem; font-weight: 600; color: #1f2937; margin: 10px 0 4px; display: flex; align-items: center; gap: 6px; }
.help { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #9aa3b2; color: #6b7280; font-size: 11px; font-weight: 700;
  align-items: center; justify-content: center; cursor: help; margin-left: auto; position: relative; }
.help:hover::after, .tip:hover::after { content: attr(data-tip); position: absolute; z-index: 60; right: 0; top: 22px; width: 300px; white-space: pre-line;
  background: #1f2937; color: #fff; font-size: .78rem; font-weight: 400; line-height: 1.6; padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.2); text-align: left; }
.tip { position: relative; cursor: help; margin-left: 6px; color: #6b7280; font-size: .85rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; padding: 8px 14px; min-height: 40px;
  font-weight: 700; border: 1px solid var(--purple-line); background: var(--purple-soft); color: var(--purple-deep); }
.btn:hover:not(:disabled) { background: #ece4ff; border-color: var(--purple); }
.btn.plain { background: #fff; border: 1px solid #d4dae6; color: #31333f; font-weight: 400; border-radius: 8px; }
.btn.plain:hover:not(:disabled) { border-color: #ff4b4b; color: #ff4b4b; background: #fff; }
.btn.primary { background: linear-gradient(90deg, #2f6bff, #7c4dff 70%, #c86dd7); color: #fff; border: none; font-weight: 800; min-height: 44px;
  box-shadow: 0 4px 14px rgba(124, 77, 255, .30); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.05); background: linear-gradient(90deg, #2f6bff, #7c4dff 70%, #c86dd7); }
.btn.green { background: #0f9d58; color: #fff; border: none; font-weight: 800; box-shadow: 0 3px 10px rgba(15, 157, 88, .3); }
.btn.green:hover:not(:disabled) { background: #0b8043; }
.btn.block { width: 100%; }
.btn.pill { border-radius: 999px; }

.input, .select { width: 100%; background: #fff; border: 1px solid #c5cedb; border-radius: 10px; padding: 8px 12px; min-height: 40px; }
.input:focus, .select:focus, textarea:focus { outline: 2px solid rgba(124, 77, 255, .35); border-color: var(--purple); }
textarea.input { min-height: 80px; resize: vertical; }
.stepper { display: flex; align-items: stretch; background: var(--soft); border: 1px solid #c5cedb; border-radius: 10px; overflow: hidden; }
.stepper input { flex: 1; min-width: 0; border: 0; background: #fff; padding: 8px 12px; }
.stepper button { width: 34px; border: 0; background: var(--soft); color: #31333f; font-size: 18px; }
.stepper button:hover { background: #ff4b4b; color: #fff; }

.radio { display: flex; flex-wrap: wrap; gap: 4px 0; }
.radio label { background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--sub); padding: 3px 14px 3px 8px; margin: 0 6px 4px 0;
  font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.radio label:has(input:checked) { border-color: var(--purple); background: rgba(124, 77, 255, .08); color: var(--ink); box-shadow: 0 0 0 2px rgba(124, 77, 255, .12); }
.radio input { accent-color: #ff4b4b; }

details.exp { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); margin: 10px 0; }
details.exp > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-size: .95rem; display: flex; gap: 8px; align-items: center; }
details.exp > summary::-webkit-details-marker { display: none; }
details.exp > summary::before { content: "›"; font-size: 1.2rem; color: var(--sub); transition: transform .15s; width: 12px; }
details.exp[open] > summary::before { transform: rotate(90deg); }
details.exp > .exp-body { padding: 4px 14px 14px; }
.card details.exp { box-shadow: none; }

.alert { border-radius: 8px; padding: 12px 16px; margin: 8px 0; font-size: .95rem; line-height: 1.6; }
.alert.info { background: #e8f0fe; color: #1a4fb8; }
.alert.ok { background: #e6f4ea; color: #137333; }
.alert.warn { background: #fff8e6; color: #7a4b00; }
.alert.err { background: #fdecea; color: #b42318; }

/* ---------- 見出し ---------- */
.jtc-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 2px 0 4px; }
.jtc-text { flex: 1 1 360px; min-width: 0; }
.jtc-flag { position: relative; flex: 0 0 auto; border-radius: 10px; line-height: 0; margin-top: -3px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 6px 18px rgba(222,41,16,.35); }
.jtc-flag img { width: 66px; height: auto; border-radius: 10px; display: block; }
.jtc-flag::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 55%, rgba(0,0,0,.10) 100%); }
.jtc-title { font-size: 2.05rem; font-weight: 800; letter-spacing: .5px; line-height: 1.15;
  background: linear-gradient(90deg,#2f6bff,#7c4dff,#c86dd7,#f6588a,#ff9a3d,#c86dd7,#7c4dff,#2f6bff); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: jtc-flow 6s linear infinite;
  filter: drop-shadow(0 2px 10px rgba(124,77,255,.22)); }
@keyframes jtc-flow { to { background-position: 200% center; } }
.jtc-tag { display: inline-block; font-size: .68rem; font-weight: 700; color: var(--mute); -webkit-text-fill-color: var(--mute); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; margin-left: 10px; background: #fff; vertical-align: middle; white-space: nowrap; letter-spacing: 0; }
.jtc-ver { display: inline-block; font-size: .68rem; font-weight: 800; color: var(--purple-deep); -webkit-text-fill-color: var(--purple-deep); background: #f1ebff;
  border-radius: 999px; padding: 1px 9px; margin-left: 8px; vertical-align: middle; white-space: nowrap; letter-spacing: 0; }
.jtc-sub { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--mute); font-size: .82rem; }
.jtc-chip { padding: 1px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: #4a5568; font-weight: 600; }
.jtc-x { font-weight: 800; font-size: 1rem; background: linear-gradient(90deg,#7c4dff,#f6588a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jtc-line { height: 2px; margin: 8px 0 6px; border-radius: 2px; opacity: .7; background: linear-gradient(90deg,#2f6bff,#7c4dff,#c86dd7,#f6588a,#ff9a3d 70%,rgba(255,154,61,0)); }
.status-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 16px; white-space: nowrap; }
.status-badge .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.status-badge .t { font-size: .85rem; font-weight: 600; }
.status-badge.running .dot { animation: jtc-pulse 1.4s ease-out infinite; }
@keyframes jtc-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,168,83,.55); } 70% { box-shadow: 0 0 0 8px rgba(52,168,83,0); } 100% { box-shadow: 0 0 0 0 rgba(52,168,83,0); } }
.running-banner { display: flex; align-items: center; gap: 10px; background: #fff7e6; border: 1px solid #ffd591; border-radius: 10px; padding: 10px 16px;
  margin: 4px 0 12px; color: #7a4b00; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .jtc-title { animation: none; } }

/* ---------- 見守り ---------- */
.watch { border: 1px solid var(--line2); border-radius: 10px; background: #fff; margin: 12px 0; }
.watch-head { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.spin { width: 16px; height: 16px; border: 2px solid #c5cedb; border-top-color: var(--purple); border-radius: 50%; animation: spin 1s linear infinite; flex: 0 0 16px; margin-top: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.watch-body { padding: 14px 16px; }
.bar { height: 8px; border-radius: 4px; background: #f0f2f6; overflow: hidden; margin-bottom: 10px; }
.bar > i { display: block; height: 100%; background: #2f6bff; border-radius: 4px; transition: width .4s; }

/* ---------- 結果 ---------- */
.hr { border: 0; border-top: 1px solid #e6e9ef; margin: 24px 0 16px; }
.res-head { display: flex; gap: 16px; align-items: center; }
.res-head .t { flex: 1; }
.lx-res-title { font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.4; }
.lx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 2px; }
.lx-kpi { border-radius: 14px; padding: 14px 16px; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.lx-kpi .l { font-size: .78rem; font-weight: 700; opacity: .92; }
.lx-kpi .v { font-size: 1.7rem; font-weight: 800; line-height: 1.25; }
.lx-kpi .v small { font-size: .85rem; margin-left: 2px; }
.lx-kpi .s { font-size: .72rem; opacity: .9; }
.lx-kpi.blue { background: linear-gradient(135deg, #2f6bff 0%, #55a4ff 100%); }
.lx-kpi.purple { background: linear-gradient(135deg, #7c4dff 0%, #c86dd7 100%); }
.lx-kpi.orange { background: linear-gradient(135deg, #f6588a 0%, #ff9a3d 100%); }
@media (max-width: 720px) { .lx-kpis { grid-template-columns: 1fr; } .res-head { flex-direction: column; align-items: stretch; } }
.pop { position: relative; }
.pop-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(520px, 90vw); background: #fff; border: 1px solid var(--line2);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(30,50,90,.18); padding: 12px 16px; }
.pop-panel.left { left: 0; right: auto; }

.tabs { display: flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; box-shadow: var(--shadow); margin: 18px 0 14px; }
.tabs button { flex: 1 1 0; border: 0; background: transparent; border-radius: 999px; padding: 8px 14px; color: var(--sub); font-weight: 800; font-size: .95rem; }
.tabs button.on { background: linear-gradient(135deg, #7c4dff 0%, #c86dd7 100%); color: #fff; box-shadow: 0 3px 10px rgba(124, 77, 255, .35); }
.ctl { display: grid; grid-template-columns: 1.5fr 2.2fr 2.6fr; gap: 16px; align-items: end; margin-bottom: 8px; }
@media (max-width: 720px) { .ctl { grid-template-columns: 1fr; } }

/* 一覧の行（カード） */
.row { background: var(--rainbow) top / 100% 3px no-repeat, #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; margin: 0 0 16px; }
.row.active { background: linear-gradient(90deg, #2fae2f, #2fae2f) top / 100% 4px no-repeat, #f3fbf3; border: 2px solid #2fae2f; box-shadow: 0 0 0 3px rgba(47, 174, 47, .14); }
.row-grid { display: grid; grid-template-columns: 1.2fr 1.15fr 1.15fr 5.4fr; gap: 16px; }
@media (max-width: 900px) { .row-grid { grid-template-columns: 1fr 1fr; } .row-grid > .r-main { grid-column: 1 / -1; } .row-grid > .r-pick { grid-column: 1 / -1; } }
.thumb { display: block; text-decoration: none; }
.thumb img, .thumb .noimg { width: 100%; max-width: 180px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line2); display: block; margin: 0 auto; }
.thumb .noimg { border-style: dashed; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #6b7280; }
.sp-src { display: block; width: fit-content; margin: 6px auto 0; border-radius: 999px; font-size: .78rem; font-weight: 800; padding: 1px 10px; }
.sp-src-ebay { background: #fff4e6; color: #b45309; }
.sp-src-sup { background: #eaf0ff; color: #1f4fd6; }
.r-title { font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.pill { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 800; margin: 2px 0 2px 6px; vertical-align: middle; white-space: nowrap; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 720px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metric { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.metric .l { font-size: .78rem; font-weight: 700; color: var(--sub); }
.metric .v { font-size: clamp(1.05rem, 1.55vw, 1.45rem); font-weight: 800; color: #111827; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric.profit { background: #e9f7ef; border-color: #c6ead4; }
.metric.profit .l { color: #0a6b3a; } .metric.profit .v { color: var(--green); }
.metric.rate { background: var(--purple-soft); border-color: #e3d9ff; }
.metric.rate .l, .metric.rate .v { color: var(--purple-deep); }
.sp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.sp-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--soft); border-radius: 999px; padding: 3px 10px; font-size: .8rem; color: var(--sub); }
.sp-tag .k { color: #6b7280; font-size: .8rem; }
.sp-tag b { font-weight: 700; color: #1f2937; }
.ai-note { font-size: .82rem; color: var(--sub); background: var(--purple-soft); border-left: 3px solid #8b5cf6; border-radius: 6px; padding: 4px 10px; margin-top: 6px; }
.pick { width: 100%; min-height: 36px; border-radius: 12px; padding: 0 6px; font-size: .8rem; font-weight: 800; white-space: nowrap;
  background: #eef8ee; border: 1px solid #bfe3bf; color: #0a8a0a; }
.pick:hover { background: #e2f3e2; border-color: #0ca30c; }
.pick.on { background: #2fae2f; border-color: #2fae2f; color: #fff; }
.pick.bottom { min-height: 42px; font-size: .9rem; margin-top: 12px; }
.row-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.chev { min-width: 120px; min-height: 40px; border: 1.5px solid var(--purple); border-radius: 999px; background: var(--purple-soft); color: var(--purple-deep); font-weight: 700; }
.dismiss { min-width: 140px; min-height: 40px; border: 1px solid #d4dae6; border-radius: 999px; background: #fff; color: var(--sub); font-size: .85rem; white-space: nowrap; }
.dismiss:hover { border-color: #d03b3b; color: #d03b3b; }
.gone { background: #f6f7fb; border: 1px dashed #c9d1e3; border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; display: flex; gap: 12px; align-items: center;
  overflow: hidden; animation: jtcGone 5s ease forwards; }
.gone .msg { flex: 1; font-size: .88rem; color: #475569; }
@keyframes jtcGone { 0%, 80% { opacity: 1; max-height: 90px; } 100% { opacity: 0; max-height: 0; padding: 0; margin: 0; border-width: 0; } }

/* 詳細 */
.detail { background: #fbfcff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 12px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.bd { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.bd-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; padding: 8px 12px; border-bottom: 1px solid #eef1f6; align-items: center; }
.bd-row:last-child { border-bottom: 0; }
.bd-row.hdr { background: var(--soft); font-size: .82rem; color: var(--sub); font-weight: 700; }
.bd-row.strong { background: #f8f6ff; color: var(--purple-deep); font-weight: 800; }
.bd-v { overflow-wrap: anywhere; }
.alt-box { border: 1px solid var(--line2); border-radius: 10px; background: #fff; padding: 10px 12px; margin: 8px 0; }
.alt { display: grid; grid-template-columns: 1fr 3.2fr 1.2fr; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #eef1f6; }
.alt:first-of-type { border-top: 0; }
.alt .thumb img, .alt .thumb .noimg { max-width: 90px; }
.reg { border: 1px solid var(--line2); border-radius: 10px; background: #fff; padding: 12px; margin-top: 8px; display: grid; grid-template-columns: 1fr 2.4fr; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px 10px; font-size: .85rem; margin: 4px 0; }
.chip button { border: 1px solid var(--line); background: var(--soft); border-radius: 6px; font-size: .78rem; padding: 2px 8px; }
.mt { margin-top: 12px; } .mb { margin-bottom: 12px; }

/* 履歴（サイドバー） */
.hist { width: 100%; text-align: left; justify-content: flex-start; padding: 6px 11px; font-size: .8rem; line-height: 1.45; margin: 4px 0; border-radius: 8px;
  background: #fff; border: 1px solid #d4dae6; color: #31333f; display: block; }
.hist:hover { border-color: #ff4b4b; color: #ff4b4b; }
.hist.cur { border: 2px solid var(--purple); background: #f3efff; }
.account { font-size: .85rem; color: var(--sub); margin-bottom: 1.4rem; }
.account .chip2 { margin-left: 8px; background: #e6f4ea; color: #137333; border-radius: 999px; padding: 1px 9px; font-size: .75rem; }
.account .em { font-size: .75rem; color: #8a93a3; margin-top: 2px; }

/* 拡張の状態・中止（右上） */
#extBadge { position: fixed; top: 10px; right: 14px; z-index: 90; font: 600 12px/1.2 system-ui, sans-serif; padding: 6px 12px; border-radius: 999px; border: 1px solid;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
#extBadge.on { color: #137333; background: #e8f5ec; border-color: #9fd3ad; }
#extBadge.off { color: #b42318; background: #fdecea; border-color: #f3b4ad; }
#extBadge small { display: block; font-weight: 400; margin-top: 2px; }
#stopBtn { position: fixed; top: 52px; right: 14px; z-index: 90; font: 600 13px/1 system-ui, sans-serif; color: #fff; background: linear-gradient(135deg, #ef4444, #f97316);
  border: 0; border-radius: 10px; padding: 9px 14px; box-shadow: 0 4px 12px rgba(239, 68, 68, .3); }
#extNotice { position: fixed; top: 52px; right: 14px; max-width: 360px; z-index: 91; font: 500 13px/1.5 system-ui, sans-serif; color: #7a4a00; background: #fff7e6;
  border: 1px solid #f5c26b; border-radius: 10px; padding: 10px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* ログイン */
.login { max-width: 460px; margin: 40px auto 0; padding: 0 16px; }
.login-tabs { display: flex; gap: 20px; border-bottom: 1px solid #e6e9ef; margin: 18px 0 8px; }
.login-tabs button { border: 0; background: none; padding: 8px 2px; color: #31333f; border-bottom: 2px solid transparent; }
.login-tabs button.on { color: #ff4b4b; border-bottom-color: #ff4b4b; }