:root {
  --bg: #f6f7f9; --panel: #fff; --ink: #1c2330; --muted: #6b7686; --line: #e3e7ee;
  --accent: #1f6feb; --good: #1a8f4a; --bad: #d1344a; --warn: #b7791f; --mid: #6b7686;
  --good-bg: #e3f5ea; --bad-bg: #fbe6e9; --warn-bg: #fdf3dc; --mid-bg: #eceff4;
  --own: #1f6feb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161d; --panel: #1a2029; --ink: #e6eaf0; --muted: #8b95a5; --line: #2a323f;
    --accent: #5b9bff; --good: #4cc27c; --bad: #ff6b81; --warn: #e0b25a; --mid: #8b95a5;
    --good-bg: #17301f; --bad-bg: #3a1a21; --warn-bg: #33290f; --mid-bg: #242b36; --own: #5b9bff;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.pad { padding: 24px 16px; }

.top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 16px; }
.brand .sub { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { padding: 6px 10px; border-radius: 6px; color: var(--ink); }
nav a.on { background: var(--mid-bg); font-weight: 600; }
nav a:hover { text-decoration: none; background: var(--mid-bg); }
.refresh { margin-left: auto; display: flex; gap: 10px; align-items: center; }

main { max-width: 1280px; margin: 0 auto; padding: 16px; }
h1 { font-size: 20px; margin: 4px 0 14px; }
h2 { font-size: 15px; margin: 0 0 10px; }
.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
@media (max-width: 480px) { .g2 { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; overflow: hidden; }
.kpi .v { font-size: 26px; font-weight: 700; }
.kpi .l { color: var(--muted); font-size: 12px; }
.kpi.good .v { color: var(--good); } .kpi.bad .v { color: var(--bad); }

.btn { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn.sm { padding: 2px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
input, select { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; min-width: 0; }
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }

.bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.bar .grow { flex: 1 1 200px; }

table { width: 100%; border-collapse: collapse; }
.tw { overflow-x: auto; }
th, td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; user-select: none; }
th.s { cursor: pointer; } th.s:hover { color: var(--ink); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--mid-bg); }
tr.click { cursor: pointer; }
tr.own td { background: color-mix(in srgb, var(--own) 7%, transparent); }

.chip { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; white-space: nowrap; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.mid { background: var(--mid-bg); color: var(--mid); }
.pos { color: var(--bad); } .neg { color: var(--good); }

.bars .row { display: grid; grid-template-columns: 120px 1fr 56px; gap: 8px; align-items: center; margin: 5px 0; font-size: 13px; }
.bars .track { background: var(--mid-bg); border-radius: 4px; height: 14px; position: relative; }
.bars .fill { height: 100%; border-radius: 4px; background: var(--accent); }
.bars .fill.good { background: var(--good); } .bars .fill.bad { background: var(--bad); }

svg text { fill: var(--muted); font-size: 11px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

.cands .c { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.err { color: var(--bad); font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 8px; z-index: 20; max-width: 90vw; }
.hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.pick { max-height: 360px; overflow: auto; }
.pick label { display: flex; gap: 8px; padding: 4px 2px; align-items: baseline; cursor: pointer; }

.nowrap { white-space: nowrap; }
details.add { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
details.add summary { cursor: pointer; font-weight: 600; color: var(--accent); margin-bottom: 8px; }

.small { font-size: 11px; }
.mtw { max-height: 75vh; overflow: auto; }
table.mt thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }
table.mt td { vertical-align: top; min-width: 90px; }
table.mt td:first-child { min-width: 220px; max-width: 320px; }
.cellin { width: 100%; min-width: 150px; font-size: 12px; padding: 4px 6px; border-style: dashed; }
.mc { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: baseline; padding: 3px 0; }
.mc .small { grid-column: 1 / -1; }
.mc .btn { margin-top: 2px; justify-self: start; display: inline-block; }
.an { border-bottom: 1px solid var(--line); padding: 4px 0; }
textarea { width: 100%; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 8px; }

/* simplified matrix */
table.mt td { padding: 5px 8px; }
table.mt td:first-child { min-width: 230px; }
a.nm { color: var(--ink); font-weight: 600; }
a.nm:hover { color: var(--accent); }
.mc { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; }
.mc .px { font-weight: 600; font-variant-numeric: tabular-nums; }
.mc .df { font-size: 12px; font-variant-numeric: tabular-nums; }
.mc .acts { opacity: 0; margin-left: auto; white-space: nowrap; }
tr:hover .mc .acts, .mc:focus-within .acts { opacity: 1; }
.ib { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 3px; font-size: 13px; }
.ib:hover { color: var(--accent); }
.plus { border: 1px dashed var(--line); background: none; color: var(--muted); border-radius: 6px; padding: 2px 10px; cursor: pointer; font: inherit; }
.plus:hover { border-color: var(--accent); color: var(--accent); }
.an { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.an .mc { flex: 0 0 auto; }

/* analog table */
table.mt tr.grp td { border-top: 2px solid var(--line); }
table.mt tr.addrow td { border-bottom: 0; padding-top: 2px; padding-bottom: 8px; }
table.mt td.gcell { background: color-mix(in srgb, var(--own) 5%, transparent); vertical-align: top; }
.acts2 { opacity: 0; }
tr:hover .acts2 { opacity: 1; }
table.mt tbody tr:hover { background: transparent; }

table.mt td.gcell { min-width: 170px; max-width: 220px; }
table.mt td { min-width: 0; }

/* hierarchy */
tr.phead { cursor: pointer; background: color-mix(in srgb, var(--mid) 9%, transparent); }
tr.phead td { border-top: 2px solid var(--line); padding-top: 7px; padding-bottom: 7px; }
tr.phead:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.car { display: inline-block; width: 14px; color: var(--muted); }
td.child { padding-left: 26px !important; border-left: 3px solid var(--line); }
table.mt tr.phead td.pname { min-width: 230px; }

/* sections + drag & drop */
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pill { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 99px; padding: 5px 13px; cursor: pointer; }
.pill:hover { border-color: var(--accent); }
.pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill.on .muted { color: rgba(255,255,255,.75); }
.grab { cursor: grab; color: var(--muted); user-select: none; }
tr.item[draggable="true"] { cursor: default; }
tr.dragging { opacity: .45; }
tr.drop > td { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; outline: none; }
tr.drop { box-shadow: inset 3px 0 0 var(--accent); }
.cellin.wide { min-width: 320px; }
.ib[data-kind], .ib[data-move] { font-size: 12px; }

table.mt td.gcell { max-width: 280px; min-width: 200px; }

/* direct tab: compact matrix cells with a drag handle */
.mc .grab { font-size: 11px; opacity: 0; cursor: grab; }
.mc:hover .grab { opacity: 1; }
.mc[draggable="true"] { border-radius: 6px; padding: 2px 4px; margin-left: -4px; }
.mc.dragging { opacity: .4; }
tr.mrow td { vertical-align: top; }
tr.mrow td:not(:first-child):not(:nth-child(2)) { min-width: 130px; }

.mc .df, .mc .px { white-space: nowrap; }
tr.mrow td:first-child { min-width: 270px; }

/* owner dashboard */
.kp { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi.bad .v { color: var(--bad); } .kpi.good .v { color: var(--good); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tab { font: inherit; border: 1px solid transparent; background: none; color: var(--ink); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.tab:hover { background: var(--mid-bg); }
.tab.on { background: var(--mid-bg); border-color: var(--line); font-weight: 600; }
.cnt { display: inline-block; min-width: 22px; text-align: center; padding: 0 7px; border-radius: 99px; font-size: 12px; background: var(--mid-bg); color: var(--mid); }
.cnt.bad { background: var(--bad-bg); color: var(--bad); } .cnt.good { background: var(--good-bg); color: var(--good); } .cnt.warn { background: var(--warn-bg); color: var(--warn); }
ul.plain { list-style: none; margin: 0; padding: 0; } ul.plain li { padding: 5px 0; border-bottom: 1px solid var(--line); }
pre.digest { white-space: pre-wrap; font: 13px/1.5 ui-monospace, Consolas, monospace; background: var(--mid-bg); border-radius: 8px; padding: 12px; margin: 0 0 10px; max-height: 320px; overflow: auto; }
.setgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.setgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.setgrid input { width: 100%; }

.chk { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.chk input { width: auto; }

/* page explainer */
details.about { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 10px; padding: 8px 14px; margin: 0 0 14px; }
details.about summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent); }
details.about div { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }

/* competitor without stock: price stays, flagged */
.chip.avail { font-size: 11px; padding: 0 6px; white-space: nowrap; }
.mc.oos .px { color: var(--muted); }
.mc.oos .df { opacity: .55; }

/* read-only role */
body.ro #refBtn, body.ro #mimp, body.ro .plus, body.ro .acts, body.ro .acts2, body.ro .grab, body.ro [data-rename], body.ro [data-parent], body.ro #gnew, body.ro .addrow { display: none !important; }

.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card.click { cursor: pointer; }
.card.click:hover { border-color: var(--accent); }
.kpi .v .small { font-size: 13px; font-weight: 400; }