/* ═══════════════════════════════════════════════════════════
   GalisOnline – Povezave (prototip)
   Vizualni jezik prevzet iz ngWebGalis (Inter + slate + ena modra)
   ═══════════════════════════════════════════════════════════ */

:root{
  --primary-50:#eff6ff; --primary-100:#dbeafe; --primary-200:#bfdbfe;
  --primary-300:#93c5fd; --primary-500:#3b82f6; --primary-600:#2563eb;
  --primary-700:#1d4ed8; --primary-800:#1e40af;

  --bg:#f1f5f9; --surface:#fff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
  --border:#e2e8f0; --border-soft:#f1f5f9; --border-strong:#cbd5e1;

  --t-strong:#0f172a; --t-primary:#1e293b; --t-body:#334155;
  --t-secondary:#475569; --t-muted:#64748b; --t-faint:#94a3b8;

  --ok:#16a34a; --ok-bg:#f0fdf4; --ok-bd:#bbf7d0;
  --warn:#f59e0b; --err:#dc2626; --err-bg:#fef2f2; --err-bd:#fecaca;

  --sh-card:0 1px 2px rgba(0,0,0,.05);
  --sh-drop:0 4px 12px rgba(0,0,0,.10);
  --sh-pop:0 8px 24px rgba(0,0,0,.10);
  --sh-float:0 8px 28px rgba(15,23,42,.16);
  --focus:0 0 0 3px rgba(59,130,246,.10);
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* sicer display:flex povozi atribut hidden */
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,"Helvetica Neue",sans-serif;
  font-size:14px; line-height:1.5; color:var(--t-body);
  background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{color:var(--primary-600);text-decoration:none}
a:hover{color:var(--primary-700);text-decoration:underline}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}

.ms{
  font-family:'Material Symbols Outlined'; font-weight:300; font-style:normal;
  font-size:20px; line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;
  -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
  user-select:none; flex:none;
}
.icon-fill{font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 20}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
*:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15)}

/* ═════════ SIDEBAR ═════════ */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:256px; background:var(--surface);
  border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:30;
}
.sb-logo{height:56px;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--border-soft)}
.sb-mark{
  width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--primary-600),var(--primary-500));
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;letter-spacing:.02em;
}
.sb-name{font-size:13px;font-weight:700;color:var(--t-strong);letter-spacing:-.01em;line-height:1.15}
.sb-sub{font-size:10px;font-weight:500;color:var(--t-faint);letter-spacing:.04em}
.sb-nav{flex:1;padding:12px;overflow-y:auto}
.sb-group{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--t-faint);padding:12px 10px 6px;
}
.sb-group:first-child{padding-top:2px}
.sb-item{
  display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--t-secondary);margin-bottom:2px;cursor:pointer;
  transition:background-color .15s,color .15s;
}
.sb-item .ms{font-size:18px;color:var(--t-muted)}
.sb-item:hover{background:var(--surface-3);text-decoration:none}
.sb-item.active{background:var(--primary-100);color:var(--primary-500);font-weight:600}
.sb-item.active .ms{color:var(--primary-500)}
.sb-count{margin-left:auto;font-size:11px;font-weight:500;color:var(--t-faint);font-variant-numeric:tabular-nums}
.sb-item.active .sb-count{color:var(--primary-500)}
.sb-foot{padding:10px 12px;background:var(--surface-2);border-top:1px solid var(--border-soft);font-size:10px;color:var(--t-faint)}

/* ═════════ SHELL ═════════ */
.shell{margin-left:256px;min-height:100vh;display:flex;flex-direction:column}

.hdr{
  height:56px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:16px;position:sticky;top:0;z-index:20;
}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--t-muted)}
.crumbs b{color:var(--t-strong);font-weight:600}
.crumbs .sep{font-size:16px;color:var(--t-faint)}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.ibtn{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  color:var(--t-faint);position:relative;transition:background-color .15s,color .15s;
}
.ibtn:hover{background:var(--surface-3);color:var(--t-secondary)}
.has-dot::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--err);border:2px solid #fff}
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--primary-100);color:var(--primary-700);
  font-size:11px;font-weight:700;display:grid;place-items:center;margin-left:8px;
}

.toolbar{
  min-height:44px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:2px;padding:4px 16px;position:sticky;top:56px;z-index:19;
}
.tb{
  display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:6px;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;
  color:var(--t-secondary);transition:background-color .15s;
}
.tb .ms{font-size:16px;color:var(--t-muted)}
.tb:hover{background:var(--surface-3)}
.tb-new{color:var(--primary-600)} .tb-new .ms{color:var(--primary-600)}
.tb-del{color:var(--err)} .tb-del .ms{color:var(--err)}
.tb-div{width:1px;height:20px;background:var(--border);margin:0 6px}
.tb-spacer{flex:1}

.content{flex:1;padding:24px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--sh-card);overflow:hidden;max-width:1560px;
}

/* ═════════ RECORD HEADER + CONTEXT ═════════ */
.rec-head{display:flex;align-items:center;gap:14px;padding:20px 24px 16px}
.rec-tile{width:40px;height:40px;border-radius:10px;background:var(--primary-100);display:grid;place-items:center}
.rec-tile .ms{font-size:22px;color:var(--primary-700)}
.rec-title{font-size:18px;font-weight:700;color:var(--t-strong);margin:0;line-height:1.2;letter-spacing:-.01em}
.rec-meta{font-size:13px;color:var(--t-muted);margin-top:3px}
.rec-meta b{color:var(--t-secondary);font-weight:600}
.dot-sep{margin:0 7px;color:var(--t-faint)}
.rec-badges{margin-left:auto}
.pill{padding:3px 9px;border-radius:9999px;font-size:11px;font-weight:500;border:1px solid var(--border);color:var(--t-muted)}
.pill-on{background:var(--ok-bg);border-color:var(--ok-bd);color:#15803d}

.rec-body{display:flex;gap:24px;padding:0 24px 20px;border-bottom:1px solid var(--border-soft)}
.rec-photo{
  width:132px;height:132px;flex:none;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);overflow:hidden;display:grid;place-items:center;
}
.rec-photo img{width:100%;height:100%;object-fit:cover}
.rec-fields{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 24px;align-content:start;min-width:0}
.f label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t-muted);margin-bottom:4px}
.f>div{font-size:13px;color:var(--t-strong)}
.f.wide{grid-column:1/-1}
.f.wide>div{color:var(--t-body);line-height:1.55}

/* ═════════ TABS ═════════ */
.tabs{display:flex;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border)}
.tab{
  padding:12px 16px;border-bottom:2px solid transparent;font-size:13px;font-weight:500;
  color:var(--t-muted);transition:background-color .15s,border-color .15s,color .15s;
}
.tab:hover{background:var(--surface-2);border-bottom-color:var(--border-strong)}
.tab.active{border-bottom-color:var(--primary-600);color:var(--primary-600);font-weight:600;background:transparent}
.tab-badge{
  display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:9999px;
  background:var(--primary-100);color:var(--primary-700);font-size:10px;font-weight:700;
  line-height:16px;text-align:center;vertical-align:1px;font-variant-numeric:tabular-nums;
}

/* ═════════ PANEL ═════════ */
.panel{padding:20px 24px 32px;position:relative}
.panel.dragover .dropzone{display:flex}

/* — add bar — */
.addbar{margin-bottom:22px}
.chips{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.chip{
  padding:4px 11px;border-radius:9999px;font-size:11px;font-weight:500;
  background:var(--surface);border:1px solid var(--border);color:var(--t-muted);
  transition:background-color .15s,border-color .15s,color .15s;
}
.chip:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--t-secondary)}
.chip.active{background:var(--primary-600);border-color:var(--primary-600);color:#fff;font-weight:600}
.addrow{display:flex;gap:10px;align-items:stretch}
.searchwrap{position:relative;flex:1;min-width:0}
.searchwrap .s-ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:20px;color:var(--t-faint);pointer-events:none;transition:color .15s;
}
.searchwrap:focus-within .s-ico{color:var(--primary-500)}
#q{
  width:100%;height:44px;padding:0 96px 0 42px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);font:400 14px 'Inter',sans-serif;color:var(--t-strong);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
#q::placeholder{color:var(--t-faint)}
.searchwrap:focus-within #q{border-color:var(--primary-300);box-shadow:var(--focus)}
.hint{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font:500 10px 'Inter',sans-serif;color:var(--t-faint);background:var(--surface-2);
  border:1px solid var(--border);border-radius:5px;padding:3px 7px;pointer-events:none;
  opacity:0;transition:opacity .15s;
}
.searchwrap:focus-within .hint{opacity:1}
.btn-basket{
  display:flex;align-items:center;gap:7px;height:44px;padding:0 18px;border-radius:12px;
  background:var(--surface);border:1.5px solid var(--primary-200);color:var(--primary-700);
  font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .15s,border-color .15s,opacity .15s;
}
.btn-basket .ms{font-size:19px}
.btn-basket:hover:not(:disabled){background:var(--primary-50);border-color:var(--primary-300)}
.btn-basket:disabled{opacity:.4;cursor:default;border-color:var(--border);color:var(--t-faint)}

/* — results dropdown — */
.results{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--sh-pop);max-height:404px;overflow-y:auto;display:none;
}
.results.open{display:block}
.rg-head{
  position:sticky;top:0;background:var(--surface-2);border-bottom:1px solid var(--border-soft);
  padding:7px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t-muted);display:flex;gap:8px;align-items:center;z-index:1;
}
.rg-head .ms{font-size:14px;color:var(--t-faint)}
.rg-head span{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;font-size:11px;color:var(--t-faint)}
.ritem{
  display:flex;align-items:center;gap:11px;padding:8px 14px;cursor:pointer;
  border-bottom:1px solid var(--border-soft);transition:background-color .12s;
}
.ritem:hover,.ritem.sel{background:var(--primary-50)}
.ritem.linked{opacity:.45;cursor:default}
.ritem.linked:hover{background:transparent}
.thumb{
  width:36px;height:36px;flex:none;border-radius:4px;border:1px solid var(--border);
  background:var(--surface-2);overflow:hidden;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--t-faint);
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .ms{font-size:18px;color:var(--t-faint)}
.rtxt{min-width:0;flex:1}
.rtitle{font-size:13px;font-weight:500;color:var(--t-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsub{font-size:11px;color:var(--t-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.rsub b{font-weight:600;color:var(--t-secondary);font-variant-numeric:tabular-nums}
.radd{font-size:18px;color:var(--t-faint);opacity:0;transition:opacity .12s;flex:none}
.ritem:hover .radd,.ritem.sel .radd{opacity:1;color:var(--primary-600)}
.rempty{padding:22px 14px;text-align:center;font-size:13px;color:var(--t-muted)}
.rnone{padding:12px 14px;font-size:12px;color:var(--t-faint);font-style:italic;border-bottom:1px solid var(--border-soft)}
mark{background:#fef3c7;color:inherit;border-radius:2px;padding:0 1px}

/* — dropzone — */
.dropzone{
  display:none;position:absolute;inset:8px;z-index:35;
  align-items:center;justify-content:center;gap:10px;
  background:rgba(239,246,255,.94);border:2px dashed var(--primary-500);border-radius:12px;
  font-size:15px;font-weight:600;color:var(--primary-700);pointer-events:none;
}
.dropzone .ms{font-size:26px}

/* ═════════ SECTIONS ═════════ */
.sect{margin-bottom:22px}
.sect-h{display:flex;align-items:center;gap:8px;padding:0 0 10px}
.sect-h.clickable{cursor:pointer;user-select:none}
.sh-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t-muted)}
.sh-title.strong{
  color:var(--t-strong);font-size:12px;letter-spacing:.1em;
  padding-right:10px;border-right:1px solid var(--border);
}
.sect.main>.sect-h{padding-bottom:12px}
.sh-ico{font-size:17px;color:var(--warn)}
.sh-count{font-size:11px;font-weight:600;color:var(--t-faint);font-variant-numeric:tabular-nums}
.sh-note{font-size:11px;color:var(--t-faint);font-style:italic}
.sh-summary{font-size:12px;color:var(--t-muted);font-variant-numeric:tabular-nums}
.sh-summary b{color:var(--t-secondary);font-weight:600}
.chev{font-size:18px;color:var(--t-faint);transition:transform .2s}
.chev.open{transform:rotate(90deg)}

/* — suggestions — */
.sugg-list{
  border:1px dashed var(--border-strong);border-radius:10px;
  background:repeating-linear-gradient(-45deg,#fcfdfe,#fcfdfe 10px,#f8fafc 10px,#f8fafc 20px);
  overflow:hidden;
}
.sugg-row{
  display:flex;align-items:center;gap:11px;padding:9px 14px;
  border-bottom:1px dashed var(--border);transition:background-color .15s,opacity .25s,transform .25s;
}
.sugg-row:last-child{border-bottom:none}
.sugg-row:hover{background:rgba(255,255,255,.85)}
.sugg-row.gone{opacity:0;transform:translateY(10px)}
.conf{
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:9999px;
  background:var(--surface);border:1px solid var(--border);color:var(--t-muted);
  font-variant-numeric:tabular-nums;flex:none;
}
.conf.hi{background:var(--ok-bg);border-color:var(--ok-bd);color:#15803d}
.why{font-size:11px;color:var(--t-faint);font-style:italic;margin-top:1px}
.sugg-acts{display:flex;gap:4px;margin-left:auto;flex:none}
.sbtn{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface);transition:all .15s}
.sbtn .ms{font-size:18px}
.sbtn.yes{color:var(--ok)} .sbtn.yes:hover{background:var(--ok-bg);border-color:var(--ok-bd)}
.sbtn.no{color:var(--t-faint)} .sbtn.no:hover{background:var(--err-bg);border-color:var(--err-bd);color:var(--err)}

/* — groups — */
.grp{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;background:var(--surface)}
.grp-h{
  display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--border);cursor:pointer;user-select:none;transition:background-color .15s;
}
.grp.closed .grp-h{border-bottom:none}
.grp-h:hover{background:var(--surface-3)}
.grp-h .ms.tico{font-size:17px;color:var(--t-muted)}
.grp-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t-secondary)}
.grp-n{
  font-size:10px;font-weight:700;padding:1px 7px;border-radius:9999px;
  background:var(--primary-100);color:var(--primary-700);font-variant-numeric:tabular-nums;
}
.grp-body{padding:12px 14px}
.grp.closed .grp-body{display:none}

/* thumbnail grid (visual types) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}
.tile{
  border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface);
  position:relative;transition:border-color .15s,box-shadow .15s,transform .18s,opacity .18s;
}
.tile:hover{border-color:var(--primary-300);box-shadow:0 2px 10px rgba(37,99,235,.10)}
.tile-img{aspect-ratio:4/3;background:var(--surface-2);overflow:hidden;display:grid;place-items:center}
.tile-img img{width:100%;height:100%;object-fit:cover}
.tile-txt{padding:7px 9px 8px;border-top:1px solid var(--border-soft)}
.tile-t{font-size:12px;font-weight:500;color:var(--t-strong);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.tile-s{font-size:10.5px;color:var(--t-faint);margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-acts{
  position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s;
}
.tile:hover .tile-acts{opacity:1}
.act{
  width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
  background:rgba(255,255,255,.96);border:1px solid var(--border);color:var(--t-secondary);
  box-shadow:0 1px 4px rgba(0,0,0,.10);transition:all .15s;
}
.act .ms{font-size:15px}
.act:hover{background:var(--primary-50);border-color:var(--primary-300);color:var(--primary-700)}
.act.del:hover{background:var(--err-bg);border-color:var(--err-bd);color:var(--err)}

/* compact list (textual types) */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:11px;padding:8px 4px;border-bottom:1px solid var(--border-soft);
  transition:background-color .15s,opacity .18s,transform .18s;
}
.row:last-child{border-bottom:none}
.row:hover{background:var(--surface-2)}
.row-acts{display:flex;gap:4px;margin-left:auto;opacity:0;transition:opacity .15s;flex:none}
.row:hover .row-acts{opacity:1}

/* label */
.lbl{
  font-size:10px;font-weight:600;padding:2px 8px;border-radius:9999px;flex:none;
  background:var(--primary-50);border:1px solid var(--primary-200);color:var(--primary-800);
  letter-spacing:.01em;
}
.lbl-add{
  font-size:10px;font-weight:500;padding:2px 8px;border-radius:9999px;flex:none;
  background:transparent;border:1px dashed var(--border-strong);color:var(--t-faint);
  opacity:0;transition:opacity .15s,color .15s,border-color .15s;
}
.tile:hover .lbl-add,.row:hover .lbl-add,.lbl-add:focus{opacity:1}
.lbl-add:hover{color:var(--primary-600);border-color:var(--primary-300)}
.tile-lbls{display:flex;gap:4px;margin-top:5px;min-height:18px;flex-wrap:wrap}

/* show more */
.more{
  width:100%;margin-top:12px;padding:8px;border-radius:8px;border:1px dashed var(--border-strong);
  font-size:12px;font-weight:600;color:var(--t-muted);background:var(--surface-2);transition:all .15s;
}
.more:hover{background:var(--primary-50);border-color:var(--primary-300);color:var(--primary-700)}

/* empty */
.empty{padding:44px 20px;text-align:center;border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface-2)}
.empty .ms{font-size:34px;color:var(--t-faint)}
.empty p{margin:10px 0 4px;font-size:14px;font-weight:600;color:var(--t-secondary)}
.empty span{font-size:12px;color:var(--t-faint)}

/* — auto section: namerno potisnjena v ozadje —
   Vdolbeno sivo polje + levo vodilo = na prvi pogled druga raven kot Povezave. */
.sect.auto{
  margin-top:28px;padding:12px 16px 4px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border-soft);
  border-left:3px solid var(--border-strong);
}
.sect.auto .sect-h{padding-bottom:6px}
.sect.auto .sh-title{color:var(--t-faint)}
#autoBody{padding:6px 0 12px}
.auto-grp{margin-bottom:12px}
.auto-name{
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--t-faint);margin-bottom:5px;display:flex;gap:6px;align-items:center;
}
.auto-name .ms{font-size:14px;color:var(--border-strong)}
.auto-n{
  margin-left:2px;font-size:9.5px;font-weight:700;padding:0 6px;border-radius:9999px;
  background:#e8edf3;color:var(--t-faint);line-height:15px;font-variant-numeric:tabular-nums;
}
.auto-rows{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.auto-row{
  display:flex;align-items:center;gap:10px;padding:5px 8px;
  border-bottom:1px solid rgba(226,232,240,.7);
}
.auto-row:hover{background:rgba(255,255,255,.75)}
.auto-row .thumb{width:24px;height:24px;filter:grayscale(.55) opacity(.75);border-color:var(--border-soft)}
.auto-row .tico{font-size:15px;color:var(--t-faint);flex:none}
.auto-t{font-size:12px;color:var(--t-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.auto-inv{font-size:10.5px;color:var(--t-faint);font-variant-numeric:tabular-nums;flex:none}
.lock{font-size:14px;color:#c3cbd6;flex:none}
.auto-row .act{width:24px;height:24px;background:transparent;border-color:transparent;color:var(--t-faint);box-shadow:none}
.auto-row .act .ms{font-size:14px}
.auto-row:hover .act{background:var(--surface);border-color:var(--border)}

/* ═════════ BASKET ═════════ */
.basket{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.basket-pill{
  display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:9999px;
  background:var(--t-strong);color:#fff;font-size:13px;font-weight:600;
  box-shadow:var(--sh-float);transition:transform .15s,background-color .15s;
}
.basket-pill:hover{background:#1e293b;transform:translateY(-1px)}
.basket-pill .ms{font-size:19px}
.basket-pill .chev{color:rgba(255,255,255,.65);transition:transform .2s}
.basket-pill .chev.open{transform:rotate(180deg)}
.basket-pill.bump{animation:bump .4s ease}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.07)}}
.basket-panel{
  width:352px;max-height:400px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--sh-pop);display:flex;flex-direction:column;overflow:hidden;
}
.bp-head{
  display:flex;align-items:center;padding:10px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--border);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--t-muted);
}
.bp-clear{margin-left:auto;font-size:11px;font-weight:600;color:var(--err);text-transform:none;letter-spacing:0}
.bp-clear:hover{text-decoration:underline}
.bp-list{overflow-y:auto;flex:1;padding:6px}
.bp-row{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px;cursor:grab}
.bp-row:hover{background:var(--surface-2)}
.bp-row:active{cursor:grabbing}
.bp-row .thumb{width:28px;height:28px}
.bp-t{font-size:12px;color:var(--t-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.bp-x{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;color:var(--t-faint);flex:none}
.bp-x .ms{font-size:15px}
.bp-x:hover{background:var(--err-bg);color:var(--err)}
.bp-foot{padding:9px 14px;border-top:1px solid var(--border-soft);font-size:10.5px;color:var(--t-faint);line-height:1.45}
.bp-empty{padding:26px 14px;text-align:center;font-size:12px;color:var(--t-faint)}

/* ═════════ SPLIT VIEW ═════════ */
.split{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,44vw);background:var(--surface);
  border-left:1px solid var(--border);box-shadow:-8px 0 28px rgba(15,23,42,.10);z-index:70;
  display:flex;flex-direction:column;animation:slidein .22s ease;
}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.split-head{
  height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;
  border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--t-strong);
}
.split-head>span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chipsq{
  height:26px;padding:0 9px;border-radius:6px;background:var(--primary-50);
  border:1px solid var(--primary-200);display:flex;align-items:center;flex:none;
}
.chipsq b{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--primary-800)}
.split-body{flex:1;overflow-y:auto;padding:18px}
.sv-img{width:100%;max-height:300px;object-fit:contain;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;margin-bottom:16px}
.sv-title{font-size:16px;font-weight:700;color:var(--t-strong);line-height:1.3;margin:0 0 12px}
.sv-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}

/* ═════════ TOAST ═════════ */
.toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  display:flex;align-items:center;gap:12px;padding:10px 12px 10px 15px;border-radius:10px;
  background:var(--t-strong);color:#fff;font-size:13px;box-shadow:var(--sh-float);
  animation:tin .2s ease;max-width:min(600px,88vw);
}
@keyframes tin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.toast.out{animation:tout .2s ease forwards}
@keyframes tout{to{transform:translateY(8px);opacity:0}}
.toast .ms{font-size:18px;color:#4ade80}
.toast b{font-weight:600}
.toast-undo{
  padding:5px 11px;border-radius:7px;background:rgba(255,255,255,.13);
  font-size:12px;font-weight:600;color:#fff;transition:background-color .15s;flex:none;
}
.toast-undo:hover{background:rgba(255,255,255,.24)}

/* ═════════ LABEL MENU ═════════ */
.labelmenu{
  position:fixed;z-index:90;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--sh-pop);padding:5px;min-width:186px;
}
.lm-h{padding:6px 10px 5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t-faint)}
.lm-i{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:7px;font-size:13px;color:var(--t-body);transition:background-color .12s}
.lm-i:hover{background:var(--surface-3)}
.lm-i.cur{color:var(--primary-600);font-weight:600;background:var(--primary-50)}
.lm-i.clear{color:var(--err);border-top:1px solid var(--border-soft);border-radius:0;margin-top:4px;padding-top:9px}

/* ═════════ ANIMATIONS ═════════ */
.pop-in{animation:popin .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popin{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
.fade-out{opacity:0;transform:scale(.94)}
.drag-src{opacity:.4}

/* ═════════ RESPONSIVE (≥1200 primarno) ═════════ */
@media (max-width:1400px){ .rec-fields{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1200px){
  .sidebar{width:64px}
  .sb-name,.sb-sub,.sb-count,.sb-group,.sb-foot{display:none}
  .sb-logo{justify-content:center;padding:0}
  .sb-item{justify-content:center;padding:8px}
  .shell{margin-left:64px}
  .rec-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content{padding:16px}
  .panel{padding:16px}
  .tabs{padding:0 16px;overflow-x:auto}
  .rec-head,.rec-body{padding-left:16px;padding-right:16px}
  .split{width:min(460px,90vw)}
}
@media (max-width:900px){
  .addrow{flex-wrap:wrap}
  .btn-basket{width:100%;justify-content:center}
  .rec-body{flex-direction:column}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}