:root{
  --bg1:#eaf2ff; --bg2:#f6f9ff;
  --card:#ffffff; --card2:#f3f6fb;
  --text:#0d1b2a; --muted:#5b6f8c;
  --line:rgba(13,27,42,.10);
  --blue:#1f6feb; --blue2:#0b5bd3;
  --green:#18a957; --green2:#22b07d; --orange:#ff8a1c; --red:#d83b3b;
  --chip:rgba(31,111,235,.08);
  --shadow:0 10px 25px rgba(18,38,63,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));color:var(--text)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.wrap{max-width:none;width:calc(100vw - 24px);margin:0 auto;padding:16px 12px}
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.3px;color:#134b9b}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);
  background:rgba(255,255,255,.65);border-radius:999px;color:var(--text);font-size:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(31,111,235,.08);color:var(--text);cursor:pointer}
.btn:hover{background:rgba(31,111,235,.12)}
.btn.primary{background:linear-gradient(180deg,var(--blue),var(--blue2));border-color:rgba(31,111,235,.35);color:#fff}
.btn.primary:hover{filter:brightness(1.03)}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.card .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.card .bd{padding:14px}

.controls{display:flex;gap:10px;flex-wrap:wrap}
.input, select{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);outline:none}
.input::placeholder{color:rgba(13,27,42,.45)}
.small{font-size:12px;color:var(--muted)}

.layout{display:grid;grid-template-columns: 320px 1fr 340px; gap:14px; align-items:start}
@media (max-width: 1200px){.layout{grid-template-columns:1fr}}
.stickyPanel{position:sticky; top:86px; height:calc(100vh - 110px); overflow:auto}
.centerPanel{min-height:calc(100vh - 110px); display:flex; flex-direction:column; gap:14px}
.tablewrap{overflow:auto;border-radius:14px;border:1px solid var(--line); background:var(--card2)}
.tablewrap.scrollCenter{max-height:calc(100vh - 260px)} /* central scroll area */

table{border-collapse:separate;border-spacing:0;width:max(100%,900px);font-size:13px}
th,td{padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{position:sticky;top:0;background:rgba(246,249,255,.95);z-index:3;text-transform:uppercase;font-size:11px;color:var(--muted);letter-spacing:.08em}
tr:hover td{background:rgba(31,111,235,.06)}
.stickyL{position:sticky;left:0;z-index:2;background:rgba(255,255,255,.92)}
.stickyR{position:sticky;right:0;z-index:2;background:rgba(255,255,255,.92)}

.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;border:1px solid var(--line);background:rgba(255,255,255,.75)}
.badge.best{border-color:rgba(24,169,87,.35);background:rgba(24,169,87,.10);color:var(--green)}
.badge.ref{border-color:rgba(255,138,28,.40);background:rgba(255,138,28,.12);color:var(--orange)}
.cellbest{outline:2px solid rgba(24,169,87,.55);border-radius:10px}
.cellrefauto{outline:2px solid rgba(34,176,125,.40);border-radius:10px}
.cellrefman{outline:2px solid rgba(255,138,28,.55);border-radius:10px}

.toast{position:fixed;bottom:16px;right:16px;background:#fff;border:1px solid var(--line);padding:10px 12px;border-radius:14px;box-shadow:var(--shadow);display:none;z-index:99}
.context{position:fixed;z-index:99;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:none}
.context button{width:100%;text-align:left;padding:10px 12px;background:transparent;border:none;color:var(--text);cursor:pointer}
.context button:hover{background:rgba(31,111,235,.08)}
.list{display:flex;flex-direction:column;gap:10px}
.item{padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:#fff}
.item.red{border-color:rgba(216,59,59,.35);background:rgba(216,59,59,.06)}
.item .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}


/* v8: top import bar + excel-like tighter table */
.layout{grid-template-columns: 1fr 340px;}
@media (max-width: 1200px){.layout{grid-template-columns:1fr}}
.topImport{position:sticky; top:56px; z-index:45; margin-bottom:14px}
.topImport .bd{padding:12px}
.centerPanel{min-height:auto}
.tablewrap.scrollCenter{max-height:calc(100vh - 280px)} /* account for top import + filters */
th,td{padding:9px 10px}
.price-input{padding:8px 10px}

.item.ok{border-color:rgba(24,169,87,.35);background:rgba(24,169,87,.06)}

.outlier{background:rgba(80,180,255,.18) !important}

.bestfill{background:rgba(24,169,87,.18) !important}

.codetext{max-width:210px;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}

.pricecol{width:160px}


/* Match (right sidebar) */
.radio-line{display:flex;align-items:center;gap:8px;margin:6px 0;}
.radio-line input{transform:scale(1.05);}
.canon-search{margin-top:8px; position:relative;}
.canon-results{position:absolute; left:0; right:0; top:42px; background:#fff; border:1px solid #d8e3f3; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:220px; overflow:auto; display:none; z-index:50;}
.canon-results .item{padding:10px 12px; cursor:pointer; border-bottom:1px solid #eef3fb;}
.canon-results .item:last-child{border-bottom:none;}
.canon-results .item:hover{background:#f3f7ff;}

/* ===== workspace restore: sidebar right without ruining layout ===== */
.workspaceTopCard{margin-bottom:14px}
.workspaceTopRow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.workspaceTitle{margin:0 0 8px 0;font-size:32px;line-height:1.1}
.workspaceSub{font-size:14px;color:var(--text);margin-bottom:6px}
.workspaceCounters{display:flex;gap:10px;flex-wrap:wrap}
.badgeCounter{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700}
.badgeCounterAlert{color:#b02a2a;border-color:rgba(216,59,59,.22);background:rgba(216,59,59,.06)}
.workspaceFiltersRow{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:8px}
.workspaceField{display:flex;flex-direction:column;gap:6px;min-width:220px}
.workspaceField label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.workspaceFieldGrow{flex:1;min-width:360px}
.workspaceField .input{width:100%}
.workspaceActions{display:flex;gap:10px;flex-wrap:wrap}
.workspaceHelp{margin-top:12px;font-size:12px;color:var(--text)}
.layout.layoutWorkspace{grid-template-columns:minmax(0,1fr) 360px;gap:14px}
.layout.layoutWorkspace .centerPanel{min-width:0}
.layout.layoutWorkspace .matchSidebar{min-width:0}
.tableCard .bd{padding-top:10px}
.priceBox{padding:6px;border-radius:12px;display:inline-flex;align-items:center;gap:8px}
.referenceBox{padding:8px 10px;border-radius:12px;display:inline-flex;align-items:center;gap:8px}
.matchPanelSimple .hd{align-items:flex-start}
.matchPanelSimple .bd{padding:12px}
@media (max-width: 1200px){.layout.layoutWorkspace{grid-template-columns:1fr}.layout.layoutWorkspace .matchSidebar{order:-1}.stickyPanel{position:relative;top:0;height:auto;overflow:visible}}
@media (max-width: 860px){.workspaceFieldGrow,.workspaceField{min-width:100%}.workspaceFiltersRow{align-items:stretch}.workspaceTitle{font-size:28px}}


/* patch8 workspace right sidebar */
.tableCard{width:100%}
.layout.layoutWorkspace .tablewrap.scrollCenter{width:100%;max-height:calc(100vh - 290px)}
.matchPanelSimple .list{gap:12px}
.matchPanelSimple .item{padding:12px}
@media (max-width: 860px){.wrap{width:calc(100vw - 12px);padding:10px 6px}}