/* ============ KNU × T&L — Обзор тендера ============ */
:root{
  --bg:#f3f2ee; --surface:#ffffff; --surface-2:#faf9f6; --surface-3:#f0eee8;
  --line:#e5e2db; --line-2:#d4d0c6; --line-strong:#c3beb1;
  --ink:#161c25; --ink-2:#586271; --ink-3:#8b929c; --ink-4:#aab0b9;
  --navy:#0e2340; --navy-2:#163355; --navy-grad-1:#102843; --navy-grad-2:#0a1b30;
  --blue:#2f6db0; --blue-2:#255a96; --blue-soft:#e7eff8; --blue-line:#bcd2ea;
  --red:#dd4f38; --red-soft:#fbe9e4;
  --amber:#bf8526; --amber-soft:#f6eddb;
  --teal:#357d73; --teal-soft:#e2efec;
  --warm:#8a7a64; --warm-soft:#efe9df;
  --cat-equip:#2f6db0; --cat-cons:#357d73; --cat-reag:#bf8526; --cat-furn:#8a7a64;
  --r:10px; --r-sm:7px; --r-lg:16px;
  --shadow:0 1px 2px rgba(16,30,54,.05), 0 6px 20px -10px rgba(16,30,54,.14);
  --shadow-lg:0 2px 6px rgba(16,30,54,.06), 0 24px 48px -22px rgba(16,30,54,.28);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1, "cv05" 1;
}
.wrap{ max-width:1280px; margin:0 auto; padding:0 28px }
a{color:var(--blue);text-decoration:none}
::selection{background:#cfe0f3}

/* ---------- Top bar ---------- */
.topbar{
  background:linear-gradient(120deg,var(--navy-grad-1),var(--navy-grad-2));
  color:#eaf0f8; position:relative; overflow:hidden;
}
.topbar::after{ content:""; position:absolute; right:-60px; top:-40px; width:340px; height:340px;
  background:radial-gradient(circle at center, rgba(47,109,176,.30), transparent 62%); pointer-events:none }
.topbar__inner{ display:flex; align-items:center; gap:22px; padding:20px 28px; position:relative; z-index:1;
  max-width:1280px; margin:0 auto }
.brand{ display:flex; align-items:center; gap:13px }
.brand img.tl{ width:54px; height:54px; border-radius:11px; background:#fff; padding:5px; box-shadow:0 2px 10px rgba(0,0,0,.25) }
.brand__txt{ line-height:1.1 }
.brand__txt b{ font-size:16px; font-weight:700; letter-spacing:.2px; display:block }
.brand__txt span{ font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:#9db5d3 }
.top__title{ flex:1; min-width:0; text-align:center }
.top__title .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#7fa8d6 }
.top__title h1{ margin:3px 0 2px; font-size:21px; font-weight:600; letter-spacing:.2px }
.top__title .sub{ font-size:12px; color:#a9bdd8 }
.top__buyer{ display:flex; align-items:center; gap:12px; text-align:right }
.top__buyer .b__txt{ font-size:11px; color:#a9bdd8; max-width:190px; line-height:1.35 }
.top__buyer .b__txt b{ color:#eaf0f8; font-weight:600; font-size:12px }
.top__buyer img.knu{ width:50px; height:50px; border-radius:50%; background:#fff; padding:2px }

.ribbon{ background:rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.09);
  position:relative; z-index:1 }
.ribbon__inner{ max-width:1280px; margin:0 auto; padding:9px 28px; display:flex; align-items:center; gap:18px;
  font-size:11.5px; color:#bcccdf; flex-wrap:wrap }
.ribbon b{ color:#eaf0f8 }
.ribbon .dot{ width:4px;height:4px;border-radius:50%;background:#5e7fa6 }
.ribbon .note{ margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.3px; color:#86a0c2 }

/* ---------- Hero / KPIs ---------- */
.hero{ padding:26px 0 6px }
.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px;
  position:relative; box-shadow:var(--shadow) }
.kpi .n{ font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-1px; line-height:1; color:var(--ink) }
.kpi .l{ margin-top:7px; font-size:11.5px; color:var(--ink-2) }
.kpi .s{ font-size:10.5px; color:var(--ink-3); margin-top:2px }
.kpi.accent{ background:linear-gradient(150deg,#16335a,#0e2340); border-color:#0e2340; color:#eaf0f8 }
.kpi.accent .n{ color:#fff } .kpi.accent .l{ color:#b8cae0 } .kpi.accent .s{ color:#8aa4c6 }
.kpi .bar{ position:absolute; left:0; top:13px; bottom:13px; width:3px; border-radius:3px; background:var(--blue) }

/* breakdown panels */
.breakdowns{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow) }
.panel h3{ margin:0 0 13px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); font-weight:600;
  display:flex; align-items:center; gap:8px }
.panel h3 .cnt{ margin-left:auto; font-family:var(--mono); color:var(--ink-3); letter-spacing:0; font-size:11px }
.brow{ display:flex; align-items:center; gap:11px; padding:5px 0 }
.brow .name{ width:172px; font-size:12px; color:var(--ink); display:flex; align-items:center; gap:8px; flex-shrink:0 }
.brow .name .sw{ width:9px;height:9px;border-radius:2.5px;flex-shrink:0 }
.brow .track{ flex:1; height:8px; background:var(--surface-3); border-radius:5px; overflow:hidden }
.brow .fill{ height:100%; border-radius:5px }
.brow .v{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); width:34px; text-align:right }

/* ---------- Controls ---------- */
.controls{ position:sticky; top:0; z-index:20; background:rgba(243,242,238,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); margin-top:22px }
.controls__inner{ max-width:1280px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.search{ position:relative; flex:1; min-width:210px; max-width:340px }
.search input{ width:100%; border:1px solid var(--line-2); background:var(--surface); border-radius:8px;
  padding:9px 12px 9px 34px; font-family:var(--sans); font-size:13px; color:var(--ink) }
.search input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft) }
.search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-3) }
.chips{ display:flex; gap:6px; flex-wrap:wrap }
.chip{ border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); border-radius:20px;
  padding:6px 12px; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:7px; user-select:none; transition:.12s }
.chip .sw{ width:8px;height:8px;border-radius:2.5px }
.chip:hover{ border-color:var(--line-strong) }
.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink) }
.chip.on .sw{ box-shadow:0 0 0 2px rgba(255,255,255,.4) }
select.f{ border:1px solid var(--line-2); background:var(--surface); border-radius:8px; padding:8px 30px 8px 11px;
  font-family:var(--sans); font-size:12.5px; color:var(--ink); cursor:pointer;
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b929c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center }
select.f:focus{ outline:none; border-color:var(--blue) }
.toggle{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2); cursor:pointer; user-select:none }
.toggle input{ display:none }
.toggle .tk{ width:34px; height:19px; border-radius:11px; background:var(--line-2); position:relative; transition:.15s; flex-shrink:0 }
.toggle .tk::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.2) }
.toggle input:checked + .tk{ background:var(--blue) }
.toggle input:checked + .tk::after{ transform:translateX(15px) }
.spacer{ flex:1 }
.seg{ display:flex; background:var(--surface-3); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px }
.seg button{ border:0; background:transparent; font-family:var(--sans); font-size:12px; color:var(--ink-2); padding:6px 13px;
  border-radius:6px; cursor:pointer; font-weight:500 }
.seg button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow) }
.btn{ border:1px solid var(--line-2); background:var(--surface); color:var(--ink); border-radius:8px; padding:8px 13px;
  font-family:var(--sans); font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-weight:500 }
.btn:hover{ border-color:var(--line-strong) }
.btn.primary{ background:var(--blue); border-color:var(--blue); color:#fff }
.btn.primary:hover{ background:var(--blue-2) }

/* ---------- Lots / table ---------- */
main{ padding:18px 0 90px }
.pkg-head{ display:flex; align-items:baseline; gap:13px; margin:26px 0 12px; padding-bottom:9px; border-bottom:2px solid var(--ink) }
.pkg-head .code{ font-family:var(--mono); font-size:12px; font-weight:600; color:#fff; background:var(--ink); padding:4px 9px; border-radius:6px; letter-spacing:.5px }
.pkg-head h2{ margin:0; font-size:17px; font-weight:600 }
.pkg-head .meta{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3) }

.lot{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow) }
.lot__head{ display:flex; align-items:center; gap:13px; padding:13px 16px; cursor:pointer; user-select:none; border-bottom:1px solid transparent }
.lot.open .lot__head{ border-bottom-color:var(--line) }
.lot__head .lc{ font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--blue); background:var(--blue-soft); border:1px solid var(--blue-line); padding:3px 8px; border-radius:6px; flex-shrink:0 }
.lot__head .lt{ font-weight:600; font-size:14px; min-width:0 }
.lot__head .lab{ font-size:11px; color:var(--ink-2); background:var(--surface-3); border:1px solid var(--line); padding:3px 9px; border-radius:20px; white-space:nowrap }
.lot__head .rt{ margin-left:auto; display:flex; align-items:center; gap:14px; flex-shrink:0 }
.lot__head .cnt{ font-family:var(--mono); font-size:12px; color:var(--ink-2) }
.lot__head .sub{ font-family:var(--mono); font-size:12px; color:var(--ink-3) }
.lot__head .sub b{ color:var(--teal) }
.lot__head .chev{ color:var(--ink-3); transition:.18s }
.lot.open .lot__head .chev{ transform:rotate(90deg) }
.lot__body{ display:none }
.lot.open .lot__body{ display:block }

table.tbl{ width:100%; border-collapse:collapse; font-size:13px }
table.tbl thead th{ text-align:left; font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); position:sticky; top:0 }
table.tbl th.num, table.tbl td.num{ text-align:right }
table.tbl th.c, table.tbl td.c{ text-align:center }
table.tbl tbody td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top }
table.tbl tbody tr:last-child td{ border-bottom:0 }
table.tbl tbody tr:hover{ background:var(--surface-2) }
.col-idx{ width:34px; font-family:var(--mono); color:var(--ink-4); font-size:12px; text-align:right }
.pname{ font-weight:500; color:var(--ink) }
.pname .specs-btn{ margin-top:4px; font-family:var(--mono); font-size:10.5px; color:var(--blue); cursor:pointer; display:inline-flex; align-items:center; gap:5px; user-select:none }
.pname .specs-btn:hover{ text-decoration:underline }
.specs{ display:none; margin-top:8px; border-left:2px solid var(--blue-line); padding:3px 0 3px 12px }
.specs.show{ display:block }
.specs .srow{ display:flex; gap:10px; padding:2px 0; font-size:11.5px }
.specs .sk{ color:var(--ink-2); flex:1 }
.specs .sv{ font-family:var(--mono); color:var(--ink); text-align:right; max-width:48%; }
.qty{ font-family:var(--mono); font-weight:600; white-space:nowrap }
.qty .u{ color:var(--ink-3); font-weight:400; font-size:11px }
.tag{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-2); white-space:nowrap }
.tag .sw{ width:8px;height:8px;border-radius:2.5px }
.big-flag{ display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.5px; color:var(--red); border:1px solid var(--red); border-radius:4px; padding:1px 4px; margin-left:6px; vertical-align:middle; text-transform:uppercase }

/* editable supplier fields */
.fcell{ padding:5px 8px !important }
.in{ width:100%; border:1px solid transparent; background:var(--surface-3); border-radius:6px; padding:6px 8px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink); transition:.12s }
.in::placeholder{ color:var(--ink-4); font-family:var(--sans) }
.in:hover{ background:#eceae3 }
.in:focus{ outline:none; background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft) }
.in.txt{ text-align:left }
.in.num{ text-align:right }
.sum{ font-family:var(--mono); font-size:12.5px; color:var(--ink); text-align:right; white-space:nowrap; padding-top:11px }
.sum.zero{ color:var(--ink-4) }

.col-w-prod{ width:160px } .col-w-price{ width:118px } .col-w-sum{ width:120px } .col-w-term{ width:104px }

.lot__foot{ display:flex; align-items:center; gap:16px; padding:11px 16px; background:var(--surface-2); border-top:1px solid var(--line); font-size:12px; color:var(--ink-2) }
.lot__foot .ls{ margin-left:auto; font-family:var(--mono); color:var(--ink) }
.lot__foot .ls b{ color:var(--blue) }

/* ---------- Sticky totals ---------- */
.totals{ position:fixed; left:0; right:0; bottom:0; z-index:30; background:linear-gradient(0deg,var(--navy-grad-2),var(--navy-grad-1));
  color:#eaf0f8; box-shadow:0 -6px 30px -12px rgba(0,0,0,.45) }
.totals__inner{ max-width:1280px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.totals .t{ display:flex; flex-direction:column; gap:1px }
.totals .t .tl{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#86a0c2 }
.totals .t .tv{ font-family:var(--mono); font-size:18px; font-weight:600 }
.totals .t .tv small{ font-size:11px; color:#9db5d3; font-weight:400 }
.totals .prog{ flex:1; min-width:140px; max-width:300px }
.totals .prog .track{ height:7px; background:rgba(255,255,255,.14); border-radius:5px; overflow:hidden; margin-top:6px }
.totals .prog .fill{ height:100%; background:linear-gradient(90deg,var(--blue),#4d8fd6); border-radius:5px; transition:.3s }
.totals .acts{ margin-left:auto; display:flex; gap:9px }
.totals .btn{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#eaf0f8 }
.totals .btn:hover{ background:rgba(255,255,255,.18) }
.totals .btn.primary{ background:var(--blue); border-color:var(--blue) }

.empty{ text-align:center; padding:60px 20px; color:var(--ink-3) }
.empty b{ color:var(--ink-2); display:block; font-size:15px; margin-bottom:4px }

/* ============ STYLE: dashboard (default already above) ============ */
/* ============ STYLE: register — dense, official ============ */
body[data-style="register"]{ --bg:#eef0ee }
body[data-style="register"] .hero{ padding:18px 0 2px }
body[data-style="register"] .breakdowns{ grid-template-columns:1fr 1fr }
body[data-style="register"] .kpi{ border-radius:var(--r-sm) }
body[data-style="register"] .lot{ border-radius:var(--r-sm); box-shadow:none }
body[data-style="register"] .lot__body{ display:block } /* always open feel; JS still toggles */
body[data-style="register"] table.tbl{ font-size:12.5px }
body[data-style="register"] table.tbl tbody td{ padding:6px 10px }
body[data-style="register"] table.tbl tbody tr:nth-child(even){ background:var(--surface-2) }
body[data-style="register"] .in{ background:#fff; border-color:var(--line-2); border-radius:4px }

/* ============ STYLE: compact / print ============ */
body[data-style="compact"]{ --bg:#fff; font-size:12.5px }
body[data-style="compact"] .hero{ display:none }
body[data-style="compact"] .breakdowns{ display:none }
body[data-style="compact"] .lot{ box-shadow:none; border-radius:0; border-left:0; border-right:0; margin-bottom:0; border-top:0 }
body[data-style="compact"] .lot__body{ display:block }
body[data-style="compact"] table.tbl{ font-size:11.5px }
body[data-style="compact"] table.tbl tbody td{ padding:4px 8px }
body[data-style="compact"] .pname .specs-btn{ display:none }
body[data-style="compact"] .in{ background:#fff; border:1px solid var(--line-2); border-radius:3px }
body[data-style="compact"] .kpis{ grid-template-columns:repeat(5,1fr) }

/* ---------- print ---------- */
@media print{
  .controls,.totals,.specs-btn{ display:none !important }
  .topbar::after{ display:none }
  body{ background:#fff }
  .lot,.kpi,.panel{ box-shadow:none !important; break-inside:avoid }
  .lot__body{ display:block !important }
  main{ padding-bottom:20px }
  .in{ border:1px solid #ccc !important; background:#fff !important }
}

/* ---------- embed (variant comparison) ---------- */
body.embed #styleSeg{ display:none }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .kpis{ grid-template-columns:repeat(3,1fr) }
  .breakdowns{ grid-template-columns:1fr }
  .col-w-prod,.col-w-price,.col-w-sum,.col-w-term{ width:auto }
}
@media (max-width:720px){
  .wrap,.controls__inner,.topbar__inner,.ribbon__inner,.totals__inner{ padding-left:16px; padding-right:16px }
  .kpis{ grid-template-columns:repeat(2,1fr) }
  .top__title{ display:none }
  table.tbl{ display:block; overflow-x:auto; white-space:nowrap }
}