:root{
  /* Global UI scale.
     User request: уменьшить масштаб интерфейса на 30%.
     Implemented via CSS zoom (works in Chromium-based browsers: Chrome/Edge).
     If you ever need to revert: set to 1.
  */
  --ui-scale: .7;

  /* Topbar height (scaled up ~25% per request) */
  --topbar-h: 65px;

  --bg:#0b0f14;
  --panel:#0f1620;
  --panel2:#0c121b;
  --line:#223040;
  --text:#e7edf5;
  --muted:#9aa7b4;
  --muted2:#7f8b96;
  --primary:#2b6cff;
  --primary2:#255ee0;
  --danger:#e5484d;
  --ok:#2ea043;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:22px;

  --shadow-sm:0 6px 18px rgba(0,0,0,.30);
  --shadow-md:0 16px 40px rgba(0,0,0,.45);
  --shadow-lg:0 28px 80px rgba(0,0,0,.60);

  --ring:0 0 0 3px rgba(43,108,255,.22);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* Scale the entire interface (pages, modals, fonts, spacing) */
html{ zoom: var(--ui-scale); }

body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(43,108,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(46,160,67,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  background-attachment: fixed, fixed, fixed;
  /* Topbar is fixed; reserve space so content doesn't slide under it */
  padding-top: var(--topbar-h);
}

/*
  Dark scrollbars (site style)
  - Chrome/Edge/Safari: ::-webkit-scrollbar
  - Firefox: scrollbar-color
*/
/* Firefox */
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06); }
/* WebKit */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.26); }

/* Topbar */
.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 18px;
  /* Must not show content behind while scrolling */
  background: linear-gradient(180deg, rgba(11,15,20,.98), rgba(11,15,20,.94));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(11,15,20,.94);
  z-index:-1;
}

/* Lighter gradient under the topbar to make it stand out */
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:96px;
  pointer-events:none;
  /* keep the decorative gradient behind interactive elements (e.g. history dropdown) */
  z-index:-1;
  /* brighter band fading into the page background */
  background:
    linear-gradient(180deg,
      rgba(43,108,255,.22) 0%,
      rgba(43,108,255,.14) 35%,
      rgba(43,108,255,0) 100%);
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  letter-spacing:.2px;
}
.brand-mark{ display:none; }

.brand-logo{
  /* Match the topbar burger icon button size for visual balance */
  width:48px;
  height:48px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(90,160,255,1), rgba(43,108,255,1));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  font-size:19px;
  letter-spacing:-.6px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 14px 24px rgba(0,0,0,.35),
    0 10px 20px rgba(43,108,255,.24),
    0 2px 0 rgba(255,255,255,.18) inset,
    0 -10px 22px rgba(0,0,0,.25) inset;
}

/* Courier topbar uses a slightly smaller burger button (44px). Keep the logo aligned. */
body.role-courier .brand-logo{
  width:44px;
  height:44px;
  border-radius:14px;
  font-size:18px;
}

/* Supplier branding: keep the platform "logo shape" but fill it with supplier logo */
.brand-logo--img{
  background: rgba(255,255,255,.06);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

.top-avatar{
  /* Increase by 25% (35px -> ~44px) */
  width:44px;
  height:44px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}

/* Increase brand text size by 20% (22px -> 26.4px) */
.brand-text{ font-size:26.4px; }

/* Top nav */
.topnav{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
}
.topnav a{
  text-decoration:none;
  color:var(--muted);
  padding:8px 10px;
  border:1px solid transparent;
}
.topnav a:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}
.topnav a.active{
  color:var(--text);
  border-color:rgba(43,108,255,.35);
  background:rgba(43,108,255,.08);
}

.topbar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

/* FX rates (USD/EUR) — typography-only, aligned to topbar scale (v20260128-05) */
.topbar-rates{
  display:inline-flex;
  align-items:center;
  gap:0;
  /* No pill/background: keep it clean like brand text */
  padding:0 2px;
  height:48px;              /* match other topbar controls */
  border:0;
  background:transparent;
  box-shadow:none;
  white-space:nowrap;
  user-select:none;
  line-height:1;
  /* match enlarged topbar */
  font-size:17px;
  opacity:.92;
}
.topbar-rate{
  display:inline-flex;
  align-items:baseline;     /* keep USD/EUR and digits on the same baseline */
  gap:8px;
  line-height:1;
}
.topbar-rate-code{
  font-size:.88em;          /* closer to the digits (not tiny) */
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(255,255,255,.70);
  line-height:1;
}
.topbar-rate-val{
  font-size:1em;
  font-weight:900;
  color: rgba(255,255,255,.96);
  font-variant-numeric: tabular-nums;
  line-height:1;
}
.topbar-rate-sep{
  display:inline-block;
  width:4px;                /* thick divider, not a hairline */
  height:26px;
  margin:0 12px;
  border-radius:3px;
  background: rgba(255,255,255,.38);
  align-self:center;        /* optically centered between the two rates */
}
.topbar-rates.is-stale{ opacity:.78; }

@media (max-width: 920px){
  .topbar-rates{ display:none !important; }
}

/* Topbar search (search page only) */
.topbar-search{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  max-width: 833px;
}
.topbar-search-label{
  font-weight:900;
  font-size:12px;
  color:var(--muted);
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  line-height:1;
  user-select:none;
}
.topbar-search-input{
  flex:1;
  min-width:260px;
}
.topbar-search-select{
  width:120px;
}
.topbar-search-btn{
  min-width:68px;
  /* height reduced further (~30%) */
  padding:1px 10px;
  min-height:13px;
  font-size:12px;
  line-height:1;
}


/* Compact for smaller screens */
@media (max-width: 980px){
  .topbar-search-select{ width:105px; }
}
@media (max-width: 820px){
  .topbar-search-label{ display:none; }
  .topbar-search-select{ width:98px; }
}
@media (max-width: 720px){
  .topbar-search-select{ display:none; }
  .topbar-search-input{ min-width:0; }
}

/* Topbar icon buttons (cart, etc.) */
.btn.topbar-iconbtn{
  width:48px;
  height:48px;
  padding:0;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)),
    rgba(255,255,255,.03);
  box-shadow:
    0 16px 30px rgba(0,0,0,.38),
    0 2px 0 rgba(255,255,255,.10) inset,
    0 -10px 22px rgba(0,0,0,.25) inset;
  transition: background .12s ease, border-color .12s ease, transform .06s ease, box-shadow .12s ease;
}
.btn.topbar-iconbtn.topbar-cartbtn
{
  /* Cart icon button: always yellow icon, no hover color jump */
  border-color: rgba(255, 210, 90, .26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)),
    rgba(255, 210, 90, .06);
  color: rgba(255, 210, 90, .98);
  box-shadow:
    0 16px 30px rgba(0,0,0,.38),
    0 2px 0 rgba(255,255,255,.10) inset,
    0 -10px 22px rgba(0,0,0,.25) inset;

}
.btn.topbar-iconbtn.topbar-cartbtn:hover
{
  border-color: rgba(255, 210, 90, .32);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)),
    rgba(255, 210, 90, .06);
  box-shadow:
    0 18px 34px rgba(0,0,0,.42),
    0 2px 0 rgba(255,255,255,.10) inset,
    0 -10px 22px rgba(0,0,0,.25) inset;

}

.btn.topbar-iconbtn.topbar-cartbtn:active,
.btn.topbar-iconbtn.topbar-cartbtn.is-open{
  /* pressed/open: slightly darker */
  border-color: rgba(255, 190, 55, .38);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22)),
    rgba(255, 190, 55, .07);
  color: rgba(255, 190, 55, .98);
  transform: translateY(1px);
}

.btn.topbar-iconbtn.topbar-cartbtn .topbar-cart-badge
{
  /* Count badge: royal blue */
  background: #4169E1;
  color: #fff;
  border-color: rgba(255,255,255,.22);

}
.btn.topbar-iconbtn:hover{
  border-color: rgba(61,129,255,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.18)),
    rgba(43,108,255,.10);
  box-shadow:
    0 18px 34px rgba(0,0,0,.42),
    0 0 0 3px rgba(43,108,255,.14);
}
.btn.btn.topbar-iconbtn:active{
  transform: translateY(1px);
}
.topbar-icon{ display:block; width:22px; height:22px; }

.topbar-cart-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background: var(--danger);
  border:2px solid rgba(11,15,20,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* Container */
.container{
  width:100%;
  /* Full-width shell: sidebar to the left edge, filters to the right edge */
  max-width: none;
  margin: 0;
  padding: 14px;
}

/* Basics */
a{ color:inherit; }
.muted{ color:var(--muted); }
.tiny{ font-size:12px; }
.strong{ font-weight:800; }
.mono{ font-family:var(--mono); }
.right{ text-align:right; }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; gap:12px; }

/* Utilities */
.mt6{ margin-top:6px; }
.mt10{ margin-top:10px; }
.mt14{ margin-top:14px; }
.gap8{ gap:8px; }
.gap10{ gap:10px; }
.grow{ flex:1 1 auto; min-width:0; }
.end{ justify-content:flex-end; }
.between{ justify-content:space-between; }

.row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.wrap{ flex-wrap:wrap; }
.narrow{ max-width: 1100px; margin:0 auto; }
.narrow-profile{ max-width: 760px; margin:0 auto; }

/* When the left sidebar is present, do NOT center page blocks.
   The main content should sit close to the sidebar with a small gap.
*/
.layout .main .narrow,
.layout .main .narrow-profile{
  margin: 0;
}
.w160{ width:160px; }

/* Cards */
.card{
  display:block;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0)) , var(--panel);
  border:1px solid rgba(255,255,255,.08);
  padding:14px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card.mini{ padding:12px; background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0)), var(--panel2); border-radius: var(--radius-md); box-shadow: none; }

/* Make <button class="card ..."> look identical to card links (no native button styles) */
button.card{ border:0; outline:0; background: transparent; color: inherit; font: inherit; text-align: inherit; }
button.card{ -webkit-appearance:none; appearance:none; }
button.card.mini{ width:100%; cursor:pointer; }
button.card:focus-visible{ box-shadow: 0 0 0 2px rgba(74, 144, 226, .45); }
.card-title{
  font-size:15px;
  font-weight:900;
  margin:0;
}

/* Layout helpers */
.shell{ width:100%; }
.grid2{ display:grid; grid-template-columns: minmax(0, 1fr) 420px; gap:12px; }
@media (max-width: 1100px){ .grid2{ grid-template-columns: 1fr; } }

/* Dashboard */
.dashboard-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width: 520px;
}

/* Profile page */
.profile-page{ display:flex; flex-direction:column; gap:12px; }

.profile-card-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:12px;
  align-items:start;
}
@media (max-width: 720px){
  .narrow-profile{ max-width: 560px; }
  .profile-card-grid{ grid-template-columns: 1fr; }
}

.profile-avatar{
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.08);
  background: transparent;
  border-radius: 0;
}
.profile-avatar-row{ display:flex; gap:12px; align-items:flex-start; }
.avatar-profile{
  width:78px;
  height:78px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  object-fit:cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.profile-avatar input[type="file"]{ width:100%; }
.profile-avatar input[type="file"]::-webkit-file-upload-button{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  padding:8px 10px;
  border-radius: 10px;
  margin-right:10px;
  cursor:pointer;
}

@media (max-width: 720px){
  .profile-avatar{
    padding-left:0;
    padding-top:12px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.08);
  }
}

.form.compact{ gap:10px; }
.fieldrow{ display:grid; grid-template-columns: 150px minmax(0, 1fr); gap:12px; align-items:center; }
.fieldrow .label{ color:var(--muted); font-size:13px; font-weight:900; }
@media (max-width: 720px){
  .fieldrow{ grid-template-columns: 1fr; gap:6px; }
}

.grid3{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width: 1100px){ .grid3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px){ .grid3{ grid-template-columns: 1fr; } }
code{ font-family:var(--mono); font-size:12px; padding:2px 6px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.20); }

/* Forms (legacy) */
.pad{ padding:14px; }
.form{ display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Inputs (text-like only)
   IMPORTANT: do NOT style checkbox/radio like text inputs. */
.input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea{
  background:#0a0f16;
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  padding:9px 10px;
  outline:none;
  font-size:13px;
  min-height:34px;
  border-radius: var(--radius-md);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

textarea{ min-height:90px; resize:vertical; }
.input:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus{
  border-color:rgba(43,108,255,.55);
  box-shadow: var(--ring);
}

/* Checkbox / Radio (keep native, just size + accent) */
input[type="checkbox"],
input[type="radio"]{
  width:18px;
  height:18px;
  padding:0;
  min-height:auto;
  accent-color: var(--primary);
}

/* Buttons */
.btn, button{
  border:1px solid rgba(255,255,255,.08);
  background:transparent;
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  min-height:34px;
  cursor:pointer;
  font-weight:800;
  border-radius: var(--radius-md);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

/* Topbar buttons: look like real buttons (no "sad" underlined links) */
.btn.topbar-btn{
  padding:10px 14px;
  min-height:40px;
  font-size:1em;

  /* same accent as "Админка" */
  border:1px solid rgba(61,129,255,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)),
    rgba(43,108,255,.18);

  box-shadow:
    0 14px 26px rgba(0,0,0,.38),
    0 2px 0 rgba(255,255,255,.12) inset,
    0 -10px 22px rgba(0,0,0,.25) inset;
}
.btn.topbar-btn:hover{
  border-color: rgba(61,129,255,.65);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.18)),
    rgba(43,108,255,.22);
}
.btn.topbar-btn:active{
  transform: translateY(1px);
  box-shadow:
    0 10px 18px rgba(0,0,0,.34),
    0 2px 0 rgba(255,255,255,.10) inset,
    0 -10px 18px rgba(0,0,0,.22) inset;
}
.btn.topbar-btn.top-admin{
  border-color: rgba(61,129,255,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)),
    rgba(43,108,255,.18);
}
.btn.topbar-btn.top-admin:hover{
  border-color: rgba(61,129,255,.65);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.18)),
    rgba(43,108,255,.22);
}

.btn:hover, button:hover{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
}
.btn:active, button:active{ transform: translateY(1px); }
.btn.primary, .btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)), var(--primary);
  border-color:transparent;
  color:#fff;
  box-shadow: 0 10px 24px rgba(43,108,255,.28);
}
.btn.primary:hover, .btn-primary:hover{ background:var(--primary2); }
.btn.ghost, .btn-ghost{
  background:transparent;
}
.btn.danger{
  background:var(--danger);
  border-color:transparent;
  color:#fff;
}

/* Button size helper (used in search results) */
.btn-sm{
  padding:6px 8px;
  min-height:30px;
  font-size:12px;
  font-weight:800;
}

/* Alerts */
.alert{ border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.12); padding:10px; color:var(--text); font-weight:700; }

/* Badges / pills */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.02);
}
.badge.muted{ color:var(--muted); }
.pill{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.02);
}
.pill.ok{ border-color:rgba(46,160,67,.35); color:var(--ok); background:rgba(46,160,67,.08); }
.pill.warn{ border-color:rgba(240,178,50,.35); color:#f0b232; background:rgba(240,178,50,.10); }
.pill.bad{ border-color:rgba(229,72,77,.35); color:var(--danger); background:rgba(229,72,77,.10); }

/* Reservation countdown (20 min TTL) */
.reserve-timer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:66px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.12);
  background: radial-gradient(140% 180% at 20% 10%, rgba(80,160,255,.35), rgba(20,30,60,.25));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -10px 24px rgba(0,0,0,.35),
    0 10px 22px rgba(0,0,0,.35);
  color:rgba(255,255,255,.92);
}
.reserve-timer.expired{
  background: radial-gradient(140% 180% at 20% 10%, rgba(255,120,120,.35), rgba(50,10,10,.25));
  border-color:rgba(255,120,120,.25);
}

/* Dividers */
.divider{
  height:1px;
  background:var(--line);
  margin:12px 0;
}

/* Tables (div-based) */
.table{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.15);
  overflow:auto;
  border-radius: var(--radius-lg);
}
/*
  IMPORTANT:
  .tr is used across multiple pages as a "div table" row.
  Previously it had no grid-template-columns, which caused cells to stack vertically.
  The auto-fit template keeps layout readable without requiring per-page inline styles.
*/
.tr{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  align-items:center;
  padding:10px;
  border-bottom:1px solid var(--line);
}
.tr:last-child{ border-bottom:none; }
.tr.head{
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:900;
}

/* Cart table: fixed, readable columns inside a narrow modal */
.cart-table .tr{
  /*
    Cart modal is intentionally narrow (see .cart-curtain-panel max-width).
    Keep numeric columns compact to preserve enough space for "Поставщик"
    in the header and prevent awkward truncation like "П..".
  */
  grid-template-columns: 110px 1fr 80px 72px 80px 30px;
  gap: 12px;

}

.cart-table .tr > div{
  padding: 0 4px;
  min-width: 0;
}

.cart-table .tr.head > div{
  text-align:left;
  white-space: nowrap;
}

/* Keep header labels readable (no truncation). */
.cart-table .tr.head > div{ overflow: visible; }

/* Body supplier cell: truncate long names so the grid stays aligned. */
.cart-table .tr:not(.head) > div:nth-child(2){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Match header alignment to body cells so columns look locked. */
.cart-table .tr.head > div:nth-child(3),
.cart-table .tr.head > div:nth-child(4),
.cart-table .tr.head > div:nth-child(5){
  text-align:right;
}

.cart-table .tr:not(.head) > div:nth-child(3),
.cart-table .tr:not(.head) > div:nth-child(4),
.cart-table .tr:not(.head) > div:nth-child(5){
  text-align:right;
  font-variant-numeric: tabular-nums;
}
.cart-table .tr > div:nth-child(1){
  font-family: var(--mono);
}


.cart-qty-input{
  width:72px;
  padding:6px 8px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  font-weight:900;
  font-family: var(--mono);
  text-align:right;
  outline:none;
}
.cart-qty-input:focus{ box-shadow: var(--ring); border-color: rgba(43,108,255,.35); }

.cart-actions{
  display:flex;
  justify-content:flex-end;
}
.cart-remove-btn{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(229,72,77,.35);
  background: rgba(229,72,77,.12);
  color: var(--danger);
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.cart-remove-btn:hover{ background: rgba(229,72,77,.18); }
.cart-remove-btn:active{ transform: translateY(1px); }
@media (max-width: 640px){
  .cart-table .tr{
    grid-template-columns: 1fr 1fr;
  }
  .cart-table .tr.head{ display:none; }
  .cart-table .tr > div{ text-align:left !important; }
  .cart-table .tr > div:nth-child(1)::before{ content:'Код: '; color:var(--muted); font-weight:800; }
  .cart-table .tr > div:nth-child(2)::before{ content:'Поставщик: '; color:var(--muted); font-weight:800; }
  .cart-table .tr > div:nth-child(3)::before{ content:'Цена: '; color:var(--muted); font-weight:800; }
  .cart-table .tr > div:nth-child(4)::before{ content:'Кол-во: '; color:var(--muted); font-weight:800; }
  .cart-table .tr > div:nth-child(5)::before{ content:'Сумма: '; color:var(--muted); font-weight:800; }
}

/* Lists */
.list{
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.list a{
  text-decoration:none;
}
.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.10);
}
.item:hover{ background:rgba(255,255,255,.03); }
.item:last-child{ border-bottom:none; }

/* Orders */
.order-block{
  border:1px solid rgba(255,255,255,.08);
  padding:12px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , rgba(0,0,0,.14);
  box-shadow: var(--shadow-sm);
  overflow:visible;
  margin-top:12px;
}




/* Inset window for order items table */
.order-table-window{
  /*
    Make the inset effect visible:
    - add inner padding so rows don't sit flush on the edges (otherwise they cover the inset shadow)
    - deepen gradients + multi-layer inset shadows
  */
  padding:10px;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--radius-xl) !important;
  background:
    radial-gradient(120% 140% at 18% 10%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 85% 95%, rgba(0,0,0,.70), rgba(0,0,0,0) 60%),
    rgba(0,0,0,.42) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 18px 34px rgba(0,0,0,.55),
    inset 0 -24px 48px rgba(0,0,0,.78);
}

/* Orders: aligned single-line grid table inside order card */
.order-table-window.table{
  /* Do not show inner scrollbars on orders page */
  overflow: visible;
}

/* Compact, non-floating columns (no horizontal scroll) */
.order-items-table{
  font-size: 14px;
  line-height: 1.15;
}
.order-items-table .tr{
  /* Артикул, Производитель, Описание, Поставщик, Количество, Цена, Статус, Таймер, Действия */
  grid-template-columns:
    minmax(110px, 1.05fr)
    minmax(120px, 1fr)
    minmax(260px, 2.55fr)
    minmax(140px, 1.25fr)
    96px
    96px
    86px
    92px
    46px;
  gap:10px;
  padding:10px 12px;
}

.order-title-line{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-wrap:nowrap;
}
.order-comment-inline{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
  max-width: 100%;
  overflow:hidden;
  white-space:nowrap;
}
.order-comment-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.order-action-cell{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

.order-items-table .tr > div{
  min-width:0;
  padding:0 4px; /* consistent inner spacing without huge column gaps */
}

.order-items-table .tr.head > div{
  white-space:nowrap;
  letter-spacing:.1px;
  font-weight:900;
  font-size:13px;
  color:rgba(255,255,255,.62);
  overflow:hidden;
  text-overflow:ellipsis;
}

.order-items-table .tr:not(.head) > div:nth-child(1),
.order-items-table .tr:not(.head) > div:nth-child(5),
.order-items-table .tr:not(.head) > div:nth-child(6){
  font-variant-numeric: tabular-nums;
}

/* Keep body content strictly one-line and aligned to headers */
.cell-clip{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Tooltips:
   - We do NOT show full-row overlays (they cover соседние строки).
   - For descriptions we use native browser tooltip (title) only when text is visually clipped.
*/

/* Status cell: center align must lock onto the main icon so that all ✅/❌ line up.
   Extra controls (like 📜 reason button) must appear to the right WITHOUT shifting the main icon. */
.order-status-cell{
  position:relative;
  text-align:center;
  white-space:nowrap;
}
.order-status-cell .status-wrap{
  position:relative;
  display:inline-block;
  width:22px; /* anchor width = icon width */
  height:22px;
}
.order-status-cell .status-main{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.order-status-cell .status-reason{
  position:absolute;
  left:calc(100% + 4px);
  top:50%;
  transform:translateY(-50%);
}

.order-timer-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.status-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.status-icon.muted{ opacity:.65; }

.icon-btn{
  width:28px;
  height:26px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  line-height:1;
  position:relative;
}

/* Small numeric badge for icon buttons (like cart counter) */
.icon-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  color:#fff;
  background:#4169E1;
  border:2px solid rgba(11,15,20,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.items-table{
  border:1px solid rgba(255,255,255,.08);
  margin-top:10px;
}
.items-tr{
  display:grid;
  grid-template-columns: 120px 160px 1fr 180px 120px 90px;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.items-tr.head{ background:rgba(255,255,255,.03); color:var(--muted); font-weight:900; }
.items-tr:last-child{ border-bottom:none; }

/* Chat */
.chat{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  padding:10px;
  max-height:520px;
  overflow:auto;
}


/* Messages: dark scrollbars in chat window and emoji panel */
.chat, .emoji-panel{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) rgba(0,0,0,.22);
}
.chat::-webkit-scrollbar,
.emoji-panel::-webkit-scrollbar{
  width:10px;
}
.chat::-webkit-scrollbar-thumb,
.emoji-panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius:999px;
  border:2px solid rgba(0,0,0,.20);
}
.chat::-webkit-scrollbar-track,
.emoji-panel::-webkit-scrollbar-track{
  background: rgba(0,0,0,.18);
  border-radius:999px;
}
.bubble{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  padding:10px;
  margin:8px 0;

  border-radius: var(--radius-lg);
}
.bubble.mine{ border-color:rgba(43,108,255,.35); background:rgba(43,108,255,.10); }
.bubble-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}


.bubble-text{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.35;
}
.bubble-attachments{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}
.att-file{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chat-img{
  max-width:280px;
  max-height:240px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
}
.emoji-panel{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.12);
  padding:8px;
  border-radius:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.emoji{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
}
.emoji:hover{ filter:brightness(1.1); }

/* Messenger: emoji modal (opens from 😊 button) */
.emoji-modal-overlay{
  position:fixed;
  inset:0;
  z-index: 2200;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.emoji-modal{
  width: min(520px, calc(100vw - 28px));
  max-height: min(420px, calc(100vh - 120px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0)), var(--panel2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.emoji-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.emoji-modal-title{ font-weight: 800; }
.emoji-modal-close{ width:44px; height:44px; }
.emoji-modal-body{
  padding: 12px;
  overflow:auto;
}
.emoji-modal-body .emoji-panel{
  margin:0;
  padding:0;
  border:0;
  background: transparent;
}


/* Messages (VK-like split view) */
/* v6: wider (+25%) and left-aligned (no "empty" gap between left sidebar and messages) */
.messages-wide{
  max-width: 1320px; /* 1056 * 1.25 */
  margin:0; /* align to the left edge of the content column */
  /* +20% vertical space to reduce "empty" area under the messages card */
  height: 90vh; /* 75vh * 1.2 */
  max-height: calc(100vh - 58px);
  min-height: 560px;
  display:flex;
  flex-direction:column;
}
.messages-wide > .card{ display:flex; flex-direction:column; flex:1; min-height:0; }
.messages-split{
  display:flex;
  gap:14px;
  flex:1;
  min-height:0;
  overflow:hidden;
  align-items:stretch;
}
.dialogs-panel{
  flex:0 0 320px;
  min-width:300px;
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  background:rgba(0,0,0,.10);
  padding:12px;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.dialogs-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:4px;
}
.dialog-item{
  display:block;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  padding:10px;

  border-radius: var(--radius-md);
}
.dialog-item:hover{ background:rgba(255,255,255,.03); }
.dialog-item.active{
  border-color: rgba(43,108,255,.45);
  background: rgba(43,108,255,.10);
}
.one-line{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-panel{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.messages-wide .chat-panel{
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  background:rgba(0,0,0,.10);
  padding:12px;
}
.chat-head{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  padding:10px;
  border-radius: var(--radius-lg);
}
.messages-wide .chat-head{
  border:none;
  background:transparent;
  padding:0 0 10px;
  border-bottom:1px solid var(--line);
  border-radius:0;
}
.chat-flex{
  flex:1;
  min-height:0;
  overflow:auto;

  overflow-x:hidden;
}

.chat-panel .chat{
  border-radius: var(--radius-lg);
}

/* Presence (online/offline) */
.presence-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.presence-text{ font-size:12px; color: var(--muted); white-space:nowrap; }
.presence-dot{
  width:10px;
  height:10px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
  flex:0 0 auto;
}
.presence-dot.sm{ width:8px; height:8px; }
.presence-dot.online{
  background: rgba(60, 205, 120, .95);
  box-shadow: 0 0 0 2px rgba(60, 205, 120, .12), inset 0 1px 2px rgba(0,0,0,.45);
}
.presence-dot.offline{
  background: rgba(255,255,255,.18);
}

/* --- WebRTC calls (messages) --- */
.call-btn{
  width:36px;
  height:36px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.call-btn:hover{ background: rgba(255,255,255,.05); }
.call-btn:active{ transform: translateY(1px); }

.call-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.call-window{
  width:min(920px, 100%);
  background: rgba(15,15,15,.90);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.call-top{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.call-top-left{ min-width:0; }
.call-top-right{ flex:0 0 auto; display:flex; align-items:center; }
.call-title{ font-weight:900; letter-spacing:.2px; }
.call-subtitle{ margin-top:4px; font-size:12px; color: var(--muted); }

.call-timer{
  font-weight:900;
  letter-spacing:.6px;
  font-variant-numeric: tabular-nums;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.call-media{
  position:relative;
  background: rgba(0,0,0,.45);
  min-height: 380px;
  pointer-events: none;
}

/* Permission helper inside call overlay */
.call-perm{
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  pointer-events: auto;
}
.call-perm-title{ font-weight: 900; letter-spacing: .2px; }
.call-perm-text{ margin-top:6px; color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.35; }
.call-perm-actions{ margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.call-perm-hint{ margin-top:10px; color: var(--muted); font-size: 12px; line-height:1.35; }

.call-overlay.mode-audio .call-media{
  min-height: 220px;
}
.call-overlay.mode-audio .call-remote{
  height: 220px;
  max-height: 220px;
}
.call-remote{
  width:100%;
  height: 520px;
  max-height: calc(100vh - 280px);
  object-fit: cover;
  background: #000;
}
.call-local{
  position:absolute;
  right:14px;
  bottom:14px;
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.50);
  background:#000;
}

.call-actions{
  padding:14px 16px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(255,255,255,.10);
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.call-audio-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color: rgba(255,255,255,.85);
}
.call-audio-placeholder .icon{ font-size:48px; opacity:.95; }
.call-audio-placeholder .text{ font-weight:900; letter-spacing:.2px; }
.call-act{
  height:40px;
  padding:0 16px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  font-weight:800;
}
.call-act.accept{ background: rgba(0,180,90,.25); border-color: rgba(0,180,90,.35); }
.call-act.reject{ background: rgba(255,60,60,.20); border-color: rgba(255,60,60,.30); }
.call-act.hangup{ background: rgba(255,60,60,.20); border-color: rgba(255,60,60,.30); }
.call-act:hover{ filter: brightness(1.08); }
.call-act:active{ transform: translateY(1px); }

.call-mini{
  width:40px;
  height:40px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.call-mini:hover{ background: rgba(255,255,255,.10); }
.call-mini:active{ transform: translateY(1px); }

@media (max-width: 680px){
  .call-local{ width: 140px; height: 94px; }
  .call-remote{ height: 420px; }
}

/* make the message list scroll,

/* Messages: separator between chat list and composer */
.messages-wide #msgSendForm{
  margin-top:0; /* override .mt10 so divider stays attached */
  padding-top:12px;
  border-top:1px solid var(--line);
}
 not the whole page */
.messages-wide .chat{ max-height:none; min-height:0; }
.messages-wide .chat{ border:none; background:transparent; padding:0; }
.messages-wide .chat-panel form{ flex:0 0 auto; align-items:flex-end; }
.messages-wide .chat-panel form.row{ flex-wrap:nowrap; }


.messages-wide .chat-panel form .grow{ flex:1 1 auto; min-width:0; }

/* Message compose: compact toolbar (emoji/attach) + autosize textarea + send button */
.messages-wide .msg-compose{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:nowrap;
}
.messages-wide .msg-compose-left{
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.messages-wide .msg-compose-center{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.messages-wide .msg-iconbtn{
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  font-size:18px;
}
.messages-wide .msg-send{
  min-width:140px;
  height:44px;
  min-height:44px;
  padding:0 16px;
}

.messages-wide .msg-compose #fileList{ line-height:1.2; }
#msg{
  width:100%;
  height:auto;
  min-height:44px;
  max-height:140px;
  resize:none;
  overflow:auto;
}

.messages-wide .emoji-panel{ max-height:160px; overflow:auto; }

@media (max-width: 980px){
  .messages-wide{ height:auto; }
  .messages-split{ flex-direction:column; overflow:visible; }
  .dialogs-panel{ padding:12px; }
  .dialogs-list{ max-height: 260px; }
}

/* Roles grid in admin */
.roles-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px 10px;
  margin-top:10px;
}
.chk{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.08);
  padding:6px 8px;
  background:rgba(0,0,0,.12);
  border-radius: var(--radius-md);
  min-height:34px;
}
.chk input{ min-height:auto; }

/* Chip grid (for radio/checkbox options) */
.chipgrid{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* Custom radios inside chipgrid: always perfect circles */
.chipgrid .chk input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.12);
  display:inline-block;
  flex:0 0 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}
.chipgrid .chk input[type="radio"]:checked{
  border-color: rgba(61,129,255,.95);
  background: rgba(61,129,255,.95);
  box-shadow: 0 0 0 4px rgba(61,129,255,.18);
}

/* Admin/User edit: tighter form layout */
.form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px 14px; }
.form-grid .field{ margin:0; }
.form-grid .field > label{ font-weight:800; color:var(--muted); font-size:12px; }
@media (max-width: 900px){ .form-grid{ grid-template-columns: 1fr; } }

/* Dialog unread dot */
.dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); flex:0 0 auto; }
.dot.hot{ background: var(--primary); box-shadow:0 0 0 3px rgba(43,108,255,.18); }
.roles-form{ margin-top:8px; }
@media (max-width: 1000px){
  .roles-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .roles-grid{ grid-template-columns: 1fr; }
}

/* Search results: dense one-line rows (B2B-friendly) */
.product-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Default card styles exist elsewhere; this variant is a compact row (no table-like grid boxes). */
/* Default card styles exist elsewhere; this variant is a compact row (no table-like grid boxes). */
.product-card.product-row{
  border:0;
  border-radius:14px;
  background:transparent;
  padding:10px 10px;
  margin:2px 0;
  transition: background .12s ease, box-shadow .12s ease;
  overflow:hidden;
  display:grid;
  /* Column order (left -> right): supplier, code, manufacturer, description, tip, stock, price, add */
  grid-template-columns:
    minmax(120px, 190px)  /* supplier */
    minmax(120px, 170px)  /* code */
    minmax(90px, 140px)   /* manufacturer */
    minmax(220px, 1fr)    /* description */
    34px                  /* supplier tip */
    72px                  /* stock */
    92px                  /* price */
    84px;                 /* actions */
  gap:10px;
  align-items:center;
}

.product-card.product-row .product-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}

.product-card.product-row .product-actions .btn{
  width:34px;
  height:28px;
  padding:0;
  line-height:1;
}


.card.mini.supplier-block{ padding:0; position:relative; }

/* Supplier block collapse toggle (triangle on the left edge) */
.supplier-toggle{
  position:absolute;
  left:6px;
  top:10px;
  width:22px;
  height:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
}

.supplier-toggle .tri{
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid rgba(255,255,255,.75);
  transform:rotate(0deg);
  transition:transform .12s ease;
}

.supplier-block:not(.is-collapsed) .supplier-toggle .tri{
  transform:rotate(-180deg);
}

/* Give the first column a bit of breathing room so the toggle doesn't overlap text */
.supplier-block .product-list{ padding-left:28px; }

.product-card.product-row .product-tip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card.product-row .info-scroll{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:8px;
  padding:0;
  cursor:pointer;
}

.product-card.product-row .info-scroll svg{
  width:15px;
  height:15px;
  fill:rgba(255,255,255,.78);
}

.product-card.product-row .product-tip.is-open .info-scroll{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.07);
}

.product-card.product-row .info-bubble{
  position:absolute;
  z-index:50;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  max-width:320px;
  min-width:220px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(18,22,30,.98);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  color:rgba(255,255,255,.9);
  font-size:12px;
  line-height:1.25;
  display:none;
}

.product-card.product-row .info-bubble::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid rgba(18,22,30,.98);
}

.product-card.product-row .info-bubble::after{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid rgba(255,255,255,.18);
}

.product-card.product-row .product-tip.is-open .info-bubble{ display:block; }

.product-card.product-row:hover{
  background:rgba(255,255,255,.055);
  box-shadow: 0 0 0 1px rgba(43,108,255,.22), 0 0 22px rgba(43,108,255,.20);
}

.product-card.product-row .product-code{
  font-weight:950;
  letter-spacing:.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
}

.product-card.product-row .product-mfg{
  font-weight:900;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}

.product-card.product-row .product-desc{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.1;
  /* Add a clear gap between "Производитель" and "Описание" (~1cm). */
  padding-left:36px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.product-card.product-row .product-tip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card.product-row .info-scroll{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:8px;
  padding:0;
  cursor:pointer;
}

.product-card.product-row .info-scroll svg{
  width:15px;
  height:15px;
  fill:rgba(255,255,255,.78);
}

.product-card.product-row .product-tip.is-open .info-scroll{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.07);
}

.product-card.product-row .info-bubble{
  position:absolute;
  z-index:50;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  max-width:320px;
  min-width:220px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(18,22,30,.98);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  color:rgba(255,255,255,.9);
  font-size:12px;
  line-height:1.25;
  display:none;
}

.product-card.product-row .info-bubble::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid rgba(18,22,30,.98);
}

.product-card.product-row .info-bubble::after{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid rgba(255,255,255,.18);
}

.product-card.product-row .product-tip.is-open .info-bubble{ display:block; }

.product-card.product-row .product-tip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card.product-row .info-scroll{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:8px;
  cursor:pointer;
  padding:0;
}

.product-card.product-row .info-scroll:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
}

.product-card.product-row .info-scroll svg{
  width:15px;
  height:15px;
  fill:rgba(255,255,255,.78);
}

.product-card.product-row .info-bubble{
  display:none;
  position:absolute;
  z-index:60;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-30%);
  min-width:200px;
  max-width:320px;
  padding:10px 12px;
  background:rgba(12,16,26,.97);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-size:12px;
  line-height:1.25;
  color:rgba(255,255,255,.88);
  white-space:normal;
}

/* comic tail */
.product-card.product-row .info-bubble::before{
  content:"";
  position:absolute;
  top:-7px;
  left:34px;
  width:14px;
  height:14px;
  background:rgba(12,16,26,.97);
  /* visible divider like YouTube */
  border-left:1px solid rgba(255,255,255,.22);
  border-top:1px solid rgba(255,255,255,.14);
  transform:rotate(45deg);
}

.product-card.product-row .product-tip.is-open .info-bubble{
  display:block;
}

.product-card.product-row .product-supplier{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color:rgba(255,255,255,.88);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.product-card.product-row .product-stock{
  display:flex;
  justify-content:center;
  align-items:center;
}

.product-card.product-row .stock-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:3px 10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  color:rgba(255,255,255,.82);
}

.product-card.product-row .product-price{
  text-align:right;
  font-weight:950;
  font-size:19px; /* +35% emphasis */
}

.product-card.product-row .product-add{
  width:40px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:18px;
  line-height:1;
}

/* Ensure column order stays consistent on responsive breakpoints (file contains legacy duplicates). */
@media (max-width: 1100px){
  .product-card.product-row{
    grid-template-columns:
      minmax(120px, 190px)  /* supplier */
      minmax(120px, 170px)  /* code */
      minmax(90px, 140px)   /* manufacturer */
      minmax(220px, 1fr)    /* description */
      34px                  /* supplier tip */
      72px                  /* stock */
      92px                  /* price */
      84px;                 /* actions */
  }
}

@media (max-width: 1100px){
  /* Default card styles exist elsewhere; this variant is a compact row (no table-like grid boxes). */
.product-card.product-row{
  border:0;
  border-radius:16px;
  background:transparent;
  padding:12px 12px;
  margin:4px 0;
  transition: background .12s ease, box-shadow .12s ease;
  /* Tooltips must be able to render outside the row */
  overflow:visible;
  display:grid;
  /* Column order (left -> right): supplier, code, manufacturer, description, tip, stock, price, add */
  grid-template-columns:
    minmax(120px, 190px)  /* supplier */
    minmax(120px, 170px)  /* code */
    minmax(90px, 140px)   /* manufacturer */
    minmax(220px, 1fr)    /* description */
    34px                  /* supplier tip */
    72px                  /* stock */
    92px                  /* price */
    84px;                 /* actions */
  gap:10px;
  align-items:center;
}

.product-card.product-row .product-supplier{ display:none; }
}

@media (max-width: 820px){
  /* Default card styles exist elsewhere; this variant is a compact row (no table-like grid boxes). */
.product-card.product-row{
  border:0;
  border-radius:14px;
  background:transparent;
  padding:10px 10px;
  margin:2px 0;
  transition: background .12s ease, box-shadow .12s ease;
  overflow:hidden;
  display:grid;
  grid-template-columns:
    minmax(120px, 190px)  /* supplier */
    minmax(120px, 170px)  /* code */
    minmax(220px, 1fr)    /* description */
    34px                  /* supplier tip */
    72px                  /* stock */
    92px                  /* price */
    84px;                 /* actions */
  gap:10px;
  align-items:center;
}

.product-card.product-row .product-mfg{ display:none; }
}

/* Supplier header in search results */
.card.mini.supplier-block{
  padding:0;
}

.supplier-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.supplier-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}
.supplier-left .muted{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 520px;
}

@media (max-width: 720px){
  .product-main{
    grid-template-columns: 1fr;
  }
  .product-price{
    text-align:left;
  }
  .product-supplier{
    min-width: unset;
  }
  .supplier-left .muted{
    max-width: unset;
    white-space:normal;
  }
}

/* Supplier blocks */
.supplier-block{
  border:1px solid rgba(255,255,255,.08);
  padding:10px;
  background:rgba(0,0,0,.10);
  margin-top:10px;
}

/* Supplier marker dot (used in search results) */
.supplier-dot{
  display:inline-block;
  width:14px;
  height:14px;
  flex:0 0 auto;
  border-radius:50% !important; /* override global no-rounding */
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  vertical-align:middle;
}

/* Curtain */
.curtain{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:64px 14px 14px;
  z-index:100;
}
.curtain.show{ display:flex; }
.curtain-panel{
  width:min(980px, 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-xl);
  padding:18px;
  box-shadow: var(--shadow-lg);
}

/* Partners: requests modal */
.partners-requests-panel{
  max-width: 760px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  padding:0;
  display:flex;
  flex-direction:column;
}

/* Partners: requests modal polish */
.partners-requests-panel .requests-modal-head{
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.partners-requests-panel .requests-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  min-width:20px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background: rgba(43,108,255,.95);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.partners-requests-panel .requests-section-title{
  margin-top:14px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.35px;
  text-transform:uppercase;
  color: var(--muted);
  font-weight:800;
}

.partners-requests-panel .partner-row{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding:10px 12px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.partners-requests-panel .partner-row:hover{
  background: rgba(255,255,255,.045);
  border-color: rgba(43,108,255,.22);
}
.partners-requests-panel .partner-row:active{
  transform: translateY(1px);
}

.partners-requests-panel .avatar{
  border-radius:50% !important;
  object-fit: cover;
}

.partners-requests-panel .icon-btn{
  width:32px;
  height:30px;
  border-radius:12px;
}

/* Partners: requests modal (make it look like a real modal, not a pasted card) */
#requestsCurtain{ align-items:center; padding:28px 14px 14px; }

.partners-requests-panel{
  /* override generic curtain-panel padding */
  padding:0;
  overflow:hidden;
  width:min(760px, 100%);
}

/* Partners: requests modal frame (strong border + inset depth like other blocks) */
.partners-requests-panel{
  position:relative;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(43,108,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 90% 110%, rgba(0,0,0,.75), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--panel);
  box-shadow:
    0 26px 70px rgba(0,0,0,.70),
    0 0 0 1px rgba(0,0,0,.55) inset;
}
.partners-requests-panel > *{ position:relative; z-index:1; }
.partners-requests-panel::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: calc(var(--radius-xl) - 10px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -18px 36px rgba(0,0,0,.55);
  pointer-events:none;
  z-index:0;
  opacity:.95;
}

.partners-requests-panel .requests-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(43,108,255,.18), rgba(255,255,255,0));
}

.partners-requests-panel .requests-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.partners-requests-panel .requests-title-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.partners-requests-panel .requests-title-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.partners-requests-panel .badge-pill{
  margin-left:10px;
}

.partners-requests-panel .requests-tabs{
  display:flex;
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.partners-requests-panel .requests-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.partners-requests-panel .requests-tab:hover{ border-color: rgba(43,108,255,.28); background: rgba(255,255,255,.045); }
.partners-requests-panel .requests-tab:active{ transform: translateY(1px); }
.partners-requests-panel .requests-tab.active{
  color:#fff;
  background: rgba(43,108,255,.20);
  border-color: rgba(43,108,255,.42);
}

.partners-requests-panel .tab-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.partners-requests-panel .requests-tab.active .tab-count{ background: rgba(43,108,255,.65); border-color: rgba(255,255,255,.16); }

.partners-requests-panel .requests-body{
  /* just a scroll container — no extra “pit” around the list */
  margin: 12px 16px 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  max-height: 66vh;
  overflow:auto;
}

.partners-requests-panel .request-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
}
.partners-requests-panel .request-item:hover{ border-color: rgba(43,108,255,.30); background: linear-gradient(180deg, rgba(43,108,255,.10), rgba(255,255,255,.03)); }
.partners-requests-panel .request-item:active{ transform: translateY(1px); }

.partners-requests-panel .request-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.partners-requests-panel .request-avatar{
  width:40px;
  height:40px;
  border-radius:50% !important;
  object-fit: cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
  flex:0 0 auto;
}

.partners-requests-panel .request-meta{ min-width:0; }
.partners-requests-panel .request-name{
  font-weight:900;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.partners-requests-panel .request-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.partners-requests-panel .request-status{ flex:0 0 auto; }
.partners-requests-panel .status-pill{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
}

.partners-requests-panel .requests-empty{
  border:1px dashed rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding:18px;
  background: rgba(0,0,0,.14);
  text-align:center;
}
.partners-requests-panel .requests-empty-icon{
  font-size:26px;
  margin-bottom:8px;
  opacity:.9;
}
.partners-requests-panel .requests-empty-title{ font-weight:900; margin-bottom:6px; }

.partners-requests-panel::-webkit-scrollbar{
  width:10px;
}
.partners-requests-panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius:999px;
}


/* Partners page: place Search and My Partners cards in one row with equal width */
.partners-grid{
  display:flex;
  gap:14px;
  align-items:stretch;
  flex-wrap:wrap;
}
.partners-card{
  flex:1 1 470px;
  min-width:360px;
}
@media (max-width: 920px){
  .partners-card{ min-width:320px; }
}

/* Cart curtain panel: make it ~25% narrower than the previous 820px max */
.cart-curtain-panel{
  max-width: 610px;
  border-radius: var(--radius-xl);
}

/* Cart curtain panel: ~25% narrower than before (820px -> ~610px) */
.cart-curtain-panel{
  max-width: 610px;
  border-radius: var(--radius-xl);
}

/* Cart drawer (search page) */
.cart-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.cart-drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:90;
}
.cart-drawer-overlay.show{ display:block; }

.cart-drawer{
  position:fixed;
  top:var(--topbar-h); /* below topbar */
  right:0;
  width:420px;
  max-width:92vw;
  height:calc(100vh - var(--topbar-h));
  background:var(--panel);
  border-left:1px solid var(--line);
  border-top-left-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
  box-shadow: -18px 0 40px rgba(0,0,0,.55);
  transform:translateX(100%);
  transition:transform .18s ease;
  z-index:100;
  display:flex;
  flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }

.cart-drawer-head{
  border-top-left-radius: var(--radius-xl);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.cart-drawer-body{
  padding:14px;
  overflow:auto;
  flex:1;
  border-bottom-left-radius: var(--radius-xl);
}

body.noscroll{ overflow:hidden; }

/* Cart modal (curtain) */
.cart-modal-body{
  max-height: 72vh;
  overflow:auto;
}

/* Avatars */
.avatar{
  width:34px;
  height:34px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:#0a0f16;
  border-radius:9999px;
}
.avatar-xl{
  width:88px;
  height:88px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:#0a0f16;
  border-radius: var(--radius-lg);
}

/* Sidebar layout (VK/Facebook-like left column) */
.layout{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.sidebar{
  width: 280px;
  flex: 0 0 280px;
  position: sticky;
  top: 58px; /* below topbar */
  height: auto;
  overflow: visible;
  align-self: flex-start;
  padding-bottom: 16px;
}
.main{
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 980px){
  /* Default: hide sidebar on small screens */
  body:not(.role-courier) .sidebar{ display:none; }
  body:not(.role-courier) .layout{ display:block; }
  /* Courier: no legacy sidebar on small screens (menu is a separate overlay) */
  body.role-courier .layout{ display:block; }
  body.role-courier .sidebar{ display:none; }

}

/* User card */
.usercenter{text-align:center;}
.chips-center{justify-content:center;}
.userrow{
  display:flex;
  gap:12px;
  align-items:center;
}
.avatar-lg{
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  object-fit:cover;
}
.username{
  font-weight:800;
  letter-spacing:.2px;
}

.company-badge{
  display:inline-block;
  max-width:100%;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.80);
}

.role-circle{
  display:none;
  /* tighter ring around role icon (≈1–2mm padding) */
  width:38px;
  height:38px;
  margin-left:auto;
  margin-right:auto;
  border-radius: 9999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  align-items:center;
  justify-content:center;
}
.role-circle svg{
  width:22px;
  height:22px;
  display:block;
}
.userlink{display:inline-block;font-weight:800;letter-spacing:.2px;text-decoration:none;}
.userlink:hover{text-decoration:underline;}
.usertext{ min-width:0; }
.usertext .muted{ word-break:break-all; }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  font-size:12px;
  line-height:1;
}
.w100{ width:100%; }

/* Role badge under avatar (single highest role) */
.chip-role{
  /* force style even if other rules/cached styles conflict */
  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;

  /* насыщенный светло‑зелёный (яркий), лёгкий объём */
  background: linear-gradient(180deg, #8BFF73 0%, #2EDB4D 100%) !important;
  color: #000 !important; /* чёрная надпись */

  font-size: 10px !important;   /* ~20% smaller than default 12px */
  font-weight: 900 !important;  /* заметно жирнее */
  letter-spacing: .3px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 14px rgba(46,219,77,.25) !important;
}

/* Small role icon inside role badge */
.chip-role{
  gap:6px;
}
.chip-role .role-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.chip-role .role-icon svg{
  width:12px;
  height:12px;
  display:block;
}

/* Role badge wrapper: keep badge centered; place icon to the right without affecting layout */
.role-badge{
  position:relative;
  display:inline-block; /* width == badge only */
}
.role-badge-icon{
  position:absolute;
  left:100%;
  top:50%;
  transform: translate(6px, -50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex:0 0 auto;
  pointer-events:none; /* purely decorative */
}
.role-badge-icon svg{
  width:16px;
  height:16px;
  display:block;
}
/* Enlarge SUPER_ADMIN crown icon by ~20% */
.role-icon--crown{
  transform: scale(1.2);
  transform-origin: 50% 50%;
}
/* Sidebar nav */
.navcol{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.navitem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  border:1px solid transparent;
  background: rgba(255,255,255,.02);
  text-decoration:none;
  border-radius: var(--radius-md);
}

.navitem:hover{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.navitem.active{
  border-color: rgba(43,108,255,.35);
  background: rgba(43,108,255,.10);
}

/* --- Sidebar v6: no extra gap, bigger avatar, uniform spacing --- */
.avatar.avatar-xl{
  /* +15% (was 154px) */
  width: 177px;
  height: 177px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  object-fit:cover;
    border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.40);
}

.navcol{ display:flex; flex-direction:column; gap:10px; }

/* Sidebar quick search */
.sidebar-search{
  display:flex;
  gap:10px;
  align-items:center;
}
.sidebar-search-input{
  flex:1;
  min-width:0;
  height:38px;
}
.sidebar-search-btn{
  height:38px;
  padding:0 12px;
}

.sidebarbox .navitem{
  height:44px;
  display:flex;
  align-items:center;
  width:100%;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  color: inherit;
  border-radius: var(--radius-md);
}

.sidebarbox .navitem:hover{ background: rgba(255,255,255,.06); }
.sidebarbox .navitem.active{
  border-color: rgba(61,129,255,.60);
  background: rgba(61,129,255,.16);
}
.sidebarbox .navitem .badge{ margin-left:auto; }

/* =========================
   Auth (login/register) card
   ========================= */

/* Auth page (no topbar) */
body.auth-page .topbar{ display:none; }
body.auth-page{ padding-top: 0; }
body.auth-page .container{ padding-top:0; max-width:1100px; margin:0 auto; }
body.auth-page .center-shell{
  min-height: 100vh;
  padding: 0;
}

.center-shell{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
}

.auth-card{
  width: min(504px, 92vw);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.16));
  padding: 14px 14px 12px;
  border-radius: 10px;
  box-shadow: 0 28px 90px rgba(0,0,0,.70);
}

.auth-card:hover{
  box-shadow: 0 34px 110px rgba(0,0,0,.78);
}

.auth-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.logo.big{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(43,108,255,.10);
  font-weight:900;
  letter-spacing:.4px;
}
.h1{ font-size:17px; font-weight:900; margin:0; }
.tabs{
  display:flex;
  gap:8px;
  margin: 10px 0 12px;
  flex-wrap:wrap;
}
.tab{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-weight:900;
  cursor:pointer;
}
.tab:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
}
.tab.active{
  color: var(--text);
  border-color: rgba(43,108,255,.55);
  background: rgba(43,108,255,.12);
}
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }
.form label{
  color: var(--muted);
  font-weight:900;
}
.form input, .form select, .form textarea{ width:100%; }

/* Orders: toolbar, filters dropdown, pagination */
.orders-toolbar{ display:flex; gap:10px; align-items:center; }
.orders-perpage{ display:flex; align-items:center; }
.orders-perpage-select{
  /* компактный селект: без "дыры" между цифрой и стрелкой */
  width:56px;
  min-width:56px;
  max-width:56px;
  padding-left:10px;
  padding-right:18px;
}

/* Orders: filters dropdown (smaller, one-line options) */
#ordersFilter .dropdown-menu{
  padding:6px;
  min-width: 210px;
}
#ordersFilter .dropdown-item{
  padding:6px 8px;
  font-size:12px;
  line-height:1.1;
  white-space:nowrap;
}
@media (max-width: 760px){ .hide-sm{ display:none; } }

.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width: 230px;
  padding:10px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0)), rgba(6,10,16,.88);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:none;
  z-index: 60;
}
.dropdown.open .dropdown-menu{ display:block; }
.dropdown-item{
  width:100%;
  text-align:left;
  padding:9px 10px;
  border-radius: var(--radius-md);
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  font-size:13px;
}
.dropdown-item:hover{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.dropdown-item.active{ background: rgba(43,108,255,.14); border-color: rgba(43,108,255,.35); }

.orders-pager{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0; }
.orders-pager .pages{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.orders-pager .pages .btn{
  min-width:24px;
  justify-content:center;
}
.orders-pager .pages .btn-sm{
  padding:2px 5px;
  min-height:18px;
  font-size:10px;
}
.orders-pager .pages .pager-arrow{
  /* стрелки без огромного круга */
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 6px !important;
  min-height:auto !important;
  min-width:auto !important;
  border-radius:0 !important;
  font-size:14px !important;
  line-height:1 !important;
}
.orders-pager .pages .pager-arrow:hover{
  color: var(--primary);
}
.btn.disabled, a.btn.disabled{ pointer-events:none; opacity:.45; }

/* Toast notifications (messenger) */
.toast-container{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, 92vw);
  z-index: 9999;
}

/* System toasts (flash messages): same style, opposite side */
.toast-container--left{
  left: 18px;
  right: auto;
}

.toast{
  border: 1px solid rgba(255,255,255,.18);
  /* Royal-blue solid-ish background (no transparency) */
  background: linear-gradient(145deg, #4a78ff, #2b5be6);
  border-radius: 14px;
  padding: 12px 12px 10px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.toast:hover{
  border-color: rgba(43,108,255,.35);
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
}

.toast-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.toast-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.toast-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.24);
  flex: 0 0 auto;
}

.toast-title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-close{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toast-close:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

.toast-meta{
  color: rgba(255,255,255,.78);
  font-size: 12px;
  margin-bottom: 6px;
}

.toast-body{
  font-size: 13px;
  color: rgba(255,255,255,.92);
  line-height: 1.25;
  word-break: break-word;
}


.top-admin{ padding:6px 10px; }


/* Small print button (yellow printer icon) */
.btn.print{
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)), #f4c542;
  border-color: rgba(0,0,0,.10);
  color:#1b1b1b;
  box-shadow: 0 10px 18px rgba(244,197,66,.22);
  border-radius:999px;
  width:32px;
  min-width:32px;
  padding:0;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn.print:hover{
  background:#ffd060;
  border-color: rgba(0,0,0,.14);
}

/* Alerts */
.alert{ border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.12); padding:10px; color:var(--text); font-weight:700; }

/* Badges / pills */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.02);
}
.badge.muted{ color:var(--muted); }
.pill{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.02);
}
.pill.ok{ border-color:rgba(46,160,67,.35); color:var(--ok); background:rgba(46,160,67,.08); }

/* Dividers */
.divider{
  height:1px;
  background:var(--line);
  margin:12px 0;
}

/* Tables (div-based) */
.table{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.15);
  overflow:auto;
  border-radius: var(--radius-lg);
}
/*
  IMPORTANT:
  .tr is used across multiple pages as a "div table" row.
  Previously it had no grid-template-columns, which caused cells to stack vertically.
  The auto-fit template keeps layout readable without requiring per-page inline styles.
*/
.tr{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  align-items:center;
  padding:10px;
  border-bottom:1px solid var(--line);
}
.tr:last-child{ border-bottom:none; }
.tr.head{
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:900;
}

/* Lists */
.list{
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.list a{
  text-decoration:none;
}
.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.10);
}
.item:hover{ background:rgba(255,255,255,.03); }
.item:last-child{ border-bottom:none; }

/* Orders */
.order-block{
  border:1px solid rgba(255,255,255,.08);
  padding:12px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , rgba(0,0,0,.14);
  box-shadow: var(--shadow-sm);
  overflow:visible;
  margin-top:12px;
}
.items-table{
  border:1px solid rgba(255,255,255,.08);
  margin-top:10px;
}
.items-tr{
  display:grid;
  grid-template-columns: 120px 160px 1fr 180px 120px 90px;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.items-tr.head{ background:rgba(255,255,255,.03); color:var(--muted); font-weight:900; }
.items-tr:last-child{ border-bottom:none; }

/* Chat */
.chat{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  padding:10px;
  max-height:520px;
  overflow:auto;
}
.bubble{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  padding:10px;
  margin:8px 0;

  border-radius: var(--radius-lg);
}
.bubble.mine{ border-color:rgba(43,108,255,.35); background:rgba(43,108,255,.10); }
.bubble-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}


.bubble-text{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.35;
}
.bubble-attachments{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}
.att-file{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chat-img{
  max-width:280px;
  max-height:240px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
}
.emoji-panel{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.12);
  padding:8px;
  border-radius:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.emoji{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
}
.emoji:hover{ filter:brightness(1.1); }

/* Messenger: emoji modal (opens from 😊 button) */
.emoji-modal-overlay{
  position:fixed;
  inset:0;
  z-index: 2200;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.emoji-modal{
  width: min(520px, calc(100vw - 28px));
  max-height: min(420px, calc(100vh - 120px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0)), var(--panel2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.emoji-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.emoji-modal-title{ font-weight: 800; }
.emoji-modal-close{ width:44px; height:44px; }
.emoji-modal-body{
  padding: 12px;
  overflow:auto;
}
.emoji-modal-body .emoji-panel{
  margin:0;
  padding:0;
  border:0;
  background: transparent;
}


/* Messages (VK-like split view) */
/* v6: wider (+25%) and left-aligned (no "empty" gap between left sidebar and messages) */
.messages-wide{
  max-width: 1320px; /* 1056 * 1.25 */
  margin:0; /* align to the left edge of the content column */
  /* make the messages card taller ("down"), to reduce empty space below */
  height: 90vh; /* 75vh * 1.2 */
  max-height: calc(100vh - 58px);
  min-height: 560px;
  display:flex;
  flex-direction:column;
}
.messages-wide > .card{ display:flex; flex-direction:column; flex:1; min-height:0; }
.messages-split{
  display:flex;
  gap:14px;
  flex:1;
  min-height:0;
  overflow:hidden;
  align-items:stretch;
}
.dialogs-panel{
  flex:0 0 320px;
  min-width:300px;
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  background:rgba(0,0,0,.10);
  padding:12px;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.dialogs-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:4px;
}
.dialog-item{
  display:block;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  padding:10px;

  border-radius: var(--radius-md);
}
.dialog-item:hover{ background:rgba(255,255,255,.03); }
.dialog-item.active{
  border-color: rgba(43,108,255,.45);
  background: rgba(43,108,255,.10);
}
.one-line{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-panel{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.messages-wide .chat-panel{
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  background:rgba(0,0,0,.10);
  padding:12px;
}
.chat-head{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  padding:10px;
  border-radius: var(--radius-lg);
}
.messages-wide .chat-head{
  border:none;
  background:transparent;
  padding:0 0 10px;
  border-bottom:1px solid var(--line);
  border-radius:0;
}
.chat-flex{
  flex:1;
  min-height:0;
  overflow:auto;

  overflow-x:hidden;
}

.chat-panel .chat{
  border-radius: var(--radius-lg);
}

/* make the message list scroll, not the whole page */
.messages-wide .chat{ max-height:none; min-height:0; }
.messages-wide .chat{ border:none; background:transparent; padding:0; }
.messages-wide .chat-panel form{ flex:0 0 auto; align-items:flex-end; }



.messages-wide .chat-panel form .grow{ flex:1 1 auto; min-width:0; }

/* Message compose: compact toolbar (emoji/attach) + autosize textarea + send button */
.messages-wide .msg-compose{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:nowrap;
}
.messages-wide .msg-compose-left{
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.messages-wide .msg-compose-center{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.messages-wide .msg-iconbtn{
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  font-size:18px;
}
.messages-wide .msg-send{
  min-width:140px;
  height:44px;
  min-height:44px;
  padding:0 16px;
}

.messages-wide .msg-compose #fileList{ line-height:1.2; }
#msg{
  width:100%;
  height:auto;
  min-height:44px;
  max-height:140px;
  resize:none;
  overflow:auto;
}

.messages-wide .emoji-panel{ max-height:160px; overflow:auto; }

@media (max-width: 980px){
  .messages-wide{ height:auto; }
  .messages-split{ flex-direction:column; overflow:visible; }
  .dialogs-panel{ padding:12px; }
  .dialogs-list{ max-height: 260px; }
}

/* Roles grid in admin */
.roles-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px 10px;
  margin-top:10px;
}
.chk{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.08);
  padding:6px 8px;
  background:rgba(0,0,0,.12);
  border-radius: var(--radius-md);
  min-height:34px;
}
.chk input{ min-height:auto; }

/* Chip grid (for radio/checkbox options) */
.chipgrid{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* Custom radios inside chipgrid: always perfect circles */
.chipgrid .chk input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.12);
  display:inline-block;
  flex:0 0 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}
.chipgrid .chk input[type="radio"]:checked{
  border-color: rgba(61,129,255,.95);
  background: rgba(61,129,255,.95);
  box-shadow: 0 0 0 4px rgba(61,129,255,.18);
}

/* Admin/User edit: tighter form layout */
.form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px 14px; }
.form-grid .field{ margin:0; }
.form-grid .field > label{ font-weight:800; color:var(--muted); font-size:12px; }
@media (max-width: 900px){ .form-grid{ grid-template-columns: 1fr; } }

/* Dialog unread dot */
.dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); flex:0 0 auto; }
.dot.hot{ background: var(--primary); box-shadow:0 0 0 3px rgba(43,108,255,.18); }
.roles-form{ margin-top:8px; }
@media (max-width: 1000px){
  .roles-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .roles-grid{ grid-template-columns: 1fr; }
}

/* Search results: dense one-line rows (B2B-friendly) */
.product-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Default card styles exist elsewhere; this variant is a compact row (no table-like grid boxes). */
/* Default card styles exist elsewhere; this variant is a compact row (no table-like grid boxes). */
.product-card.product-row{
  border:0;
  border-radius:14px;
  background:transparent;
  padding:10px 10px;
  margin:2px 0;
  transition: background .12s ease, box-shadow .12s ease;
  overflow:hidden;
  display:grid;
  /* Column order (left -> right): supplier, code, manufacturer, description, tip, stock, price, add */
  grid-template-columns:
    minmax(120px, 190px)  /* supplier */
    minmax(120px, 170px)  /* code */
    minmax(90px, 140px)   /* manufacturer */
    minmax(220px, 1fr)    /* description */
    34px                  /* supplier tip */
    72px                  /* stock */
    92px                  /* price */
    84px;                 /* actions */
  gap:10px;
  align-items:center;
}

.product-card.product-row:hover{
  background:rgba(255,255,255,.055);
  box-shadow: 0 0 0 1px rgba(43,108,255,.22), 0 0 22px rgba(43,108,255,.20);
}

.product-card.product-row .product-code{
  font-weight:950;
  letter-spacing:.2px;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.product-card.product-row .product-mfg{
  font-weight:900;
  color:var(--muted);
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.product-card.product-row .product-desc{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.1;
  /* Add a clear gap between "Производитель" and "Описание" (~1cm). */
  padding-left:36px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.product-card.product-row .product-tip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card.product-row .info-scroll{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:8px;
  padding:0;
  cursor:pointer;
}

.product-card.product-row .info-scroll svg{
  width:15px;
  height:15px;
  fill:rgba(255,255,255,.78);
}

.product-card.product-row .product-tip.is-open .info-scroll{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.07);
}

.product-card.product-row .info-bubble{
  position:absolute;
  z-index:50;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  max-width:320px;
  min-width:220px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(18,22,30,.98);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  color:rgba(255,255,255,.9);
  font-size:12px;
  line-height:1.25;
  display:none;
}

.product-card.product-row .info-bubble::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid rgba(18,22,30,.98);
}

.product-card.product-row .info-bubble::after{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid rgba(255,255,255,.18);
}

.product-card.product-row .product-tip.is-open .info-bubble{ display:block; }

.product-card.product-row .product-supplier{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color:rgba(255,255,255,.88);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.product-card.product-row .product-stock{
  display:flex;
  justify-content:center;
  align-items:center;
}

.product-card.product-row .stock-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:3px 10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  color:rgba(255,255,255,.82);
}

.product-card.product-row .product-price{
  text-align:right;
  font-weight:950;
  font-size:19px; /* +35% emphasis */
}

.product-card.product-row .product-add{
  width:40px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:18px;
  line-height:1;
}

@media (max-width: 1100px){
  /* Default card styles exist elsewhere; this variant is a compact row (no table-like grid boxes). */
.product-card.product-row{
  border:0;
  border-radius:14px;
  background:transparent;
  padding:10px 10px;
  margin:2px 0;
  transition: background .12s ease, box-shadow .12s ease;
  overflow:hidden;
  display:grid;
  grid-template-columns:
    minmax(120px, 170px)  /* code */
    minmax(90px, 140px)   /* manufacturer */
    minmax(220px, 1fr)    /* description */
    34px                  /* supplier tip */
    minmax(120px, 190px)  /* supplier */
    72px                  /* stock */
    92px                  /* price */
    84px;                 /* actions */
  gap:10px;
  align-items:center;
}

.product-card.product-row .product-supplier{ display:none; }
}

@media (max-width: 820px){
  /* Default card styles exist elsewhere; this variant is a compact row (no table-like grid boxes). */
.product-card.product-row{
  border:0;
  border-radius:14px;
  background:transparent;
  padding:10px 10px;
  margin:2px 0;
  transition: background .12s ease, box-shadow .12s ease;
  overflow:hidden;
  display:grid;
  grid-template-columns:
    minmax(120px, 170px)  /* code */
    minmax(90px, 140px)   /* manufacturer */
    minmax(220px, 1fr)    /* description */
    34px                  /* supplier tip */
    minmax(120px, 190px)  /* supplier */
    72px                  /* stock */
    92px                  /* price */
    84px;                 /* actions */
  gap:10px;
  align-items:center;
}

.product-card.product-row .product-mfg{ display:none; }
}

/* Supplier header in search results */
.supplier-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.supplier-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}
.supplier-left .muted{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 520px;
}

@media (max-width: 720px){
  .product-main{
    grid-template-columns: 1fr;
  }
  .product-price{
    text-align:left;
  }
  .product-supplier{
    min-width: unset;
  }
  .supplier-left .muted{
    max-width: unset;
    white-space:normal;
  }
}

/* Supplier blocks */
.supplier-block{
  border:1px solid rgba(255,255,255,.08);
  padding:10px;
  background:rgba(0,0,0,.10);
  margin-top:10px;
}

/* Supplier marker dot (used in search results) */
.supplier-dot{
  display:inline-block;
  width:14px;
  height:14px;
  flex:0 0 auto;
  border-radius:50% !important; /* override global no-rounding */
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  vertical-align:middle;
}

/* Curtain */
.curtain{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:64px 14px 14px;
  z-index:100;
}
.curtain.show{ display:flex; }
.curtain-panel{
  width:min(980px, 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-xl);
  padding:18px;
  box-shadow: var(--shadow-lg);
}

/* Cart drawer (search page) */
.cart-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.cart-drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:90;
}
.cart-drawer-overlay.show{ display:block; }

.cart-drawer{
  position:fixed;
  top:var(--topbar-h); /* below topbar */
  right:0;
  width:420px;
  max-width:92vw;
  height:calc(100vh - var(--topbar-h));
  background:var(--panel);
  border-left:1px solid var(--line);
  border-top-left-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
  box-shadow: -18px 0 40px rgba(0,0,0,.55);
  transform:translateX(100%);
  transition:transform .18s ease;
  z-index:100;
  display:flex;
  flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }

.cart-drawer-head{
  border-top-left-radius: var(--radius-xl);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.cart-drawer-body{
  padding:14px;
  overflow:auto;
  flex:1;
  border-bottom-left-radius: var(--radius-xl);
}

body.noscroll{ overflow:hidden; }

/* Avatars */
.avatar{
  width:34px;
  height:34px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:#0a0f16;
  border-radius:9999px;
}
.avatar-xl{
  width:88px;
  height:88px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:#0a0f16;
  border-radius: var(--radius-lg);
}

/* Sidebar layout (VK/Facebook-like left column) */
.layout{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.sidebar{
  width: 280px;
  flex: 0 0 280px;
  position: sticky;
  top: 58px; /* below topbar */
  height: auto;
  overflow: visible;
  align-self: flex-start;
  padding-bottom: 16px;
}
.main{
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 980px){
  .sidebar{ display:none; }
  .layout{ display:block; }
}

/* User card */
.usercenter{text-align:center;}
.chips-center{justify-content:center;}
.userrow{
  display:flex;
  gap:12px;
  align-items:center;
}
.avatar-lg{
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.08);
}
.username{
  font-weight:800;
  letter-spacing:.2px;
}
.userlink{display:inline-block;font-weight:800;letter-spacing:.2px;text-decoration:none;}
.userlink:hover{text-decoration:underline;}
.usertext{ min-width:0; }
.usertext .muted{ word-break:break-all; }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  font-size:12px;
  line-height:1;
}
.w100{ width:100%; }

/* Sidebar nav */
.navcol{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.navitem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  border:1px solid transparent;
  background: rgba(255,255,255,.02);
  text-decoration:none;
  border-radius: var(--radius-md);
}

.navitem:hover{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.navitem.active{
  border-color: rgba(43,108,255,.35);
  background: rgba(43,108,255,.10);
}

/* --- Sidebar v6: no extra gap, bigger avatar, uniform spacing --- */
.avatar.avatar-xl{
  /* +15% (was 154px) */
  width: 177px;
  height: 177px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  object-fit:cover;
    border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.40);
}

.navcol{ display:flex; flex-direction:column; gap:10px; }

.sidebarbox .navitem{
  height:44px;
  display:flex;
  align-items:center;
  width:100%;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  color: inherit;
  border-radius: var(--radius-md);
}

.sidebarbox .navitem:hover{ background: rgba(255,255,255,.06); }
.sidebarbox .navitem.active{
  border-color: rgba(61,129,255,.60);
  background: rgba(61,129,255,.16);
}
.sidebarbox .navitem .badge{ margin-left:auto; }

/* =========================
   Auth (login/register) card
   ========================= */

/* Auth page (no topbar) */
body.auth-page .topbar{ display:none; }
body.auth-page .container{ padding-top:0; max-width:1100px; margin:0 auto; }
body.auth-page .center-shell{
  min-height: 100vh;
  padding: 0;
}

.center-shell{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
}

.auth-card{
  width: min(504px, 92vw);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.16));
  padding: 14px 14px 12px;
  border-radius: 10px;
  box-shadow: 0 28px 90px rgba(0,0,0,.70);
}

.auth-card:hover{
  box-shadow: 0 34px 110px rgba(0,0,0,.78);
}

.auth-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.logo.big{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(43,108,255,.10);
  font-weight:900;
  letter-spacing:.4px;
}
.h1{ font-size:17px; font-weight:900; margin:0; }
.tabs{
  display:flex;
  gap:8px;
  margin: 10px 0 12px;
  flex-wrap:wrap;
}
.tab{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-weight:900;
  cursor:pointer;
}
.tab:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
}
.tab.active{
  color: var(--text);
  border-color: rgba(43,108,255,.55);
  background: rgba(43,108,255,.12);
}
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }
.form label{
  color: var(--muted);
  font-weight:900;
}
.form input, .form select, .form textarea{ width:100%; }

/* =====================
   System toasts (Flask flash)
   ===================== */
#system-toast-container{
  position: fixed;
  /* mirror message toasts: bottom-left */
  bottom: 22px;
  left: 22px;
  top: auto;
  right: auto;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 380px;
  max-width: calc(100vw - 36px);
  pointer-events: none;
}
#system-toast-container .toast{
  pointer-events: auto;
  border-radius: 14px;
  /* тонкая чёрная рамка должна быть видимой */
  border: 1px solid #000;
  /* насыщенный светло‑зелёный, без "салатового" желтого оттенка */
  background: linear-gradient(135deg, rgba(108,255,122,.98), rgba(46,235,166,.98));
  color: #0a0a0a;
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.40);
}
#system-toast-container .toast-top{ color:#0a0a0a; }
#system-toast-container .toast-user{ color:#0a0a0a; }
#system-toast-container .toast-meta{
  color: rgba(0,0,0,.72);
  font-weight: 800;
}
#system-toast-container .toast-body{ color: rgba(0,0,0,.86); }
#system-toast-container .toast-close{
  border: 1px solid rgba(0,0,0,.45);
  background: rgba(0,0,0,.10);
  color: rgba(0,0,0,.90);
}
#system-toast-container .toast-close:hover{ background: rgba(0,0,0,.16); }

/* error variant */
#system-toast-container .toast[data-level="error"]{
  background: linear-gradient(135deg, rgba(255,130,130,.97), rgba(255,84,84,.97));
}
#system-toast-container .toast[data-level="warning"]{
  background: linear-gradient(135deg, rgba(255,214,109,.98), rgba(255,176,68,.98));
}

/* Search page: the main scrollbar must start *under* the fixed topbar.
   We achieve this by making .container a fixed scroll area below the topbar.
   This also eliminates body-scroll jitter during the search block resize drag.
*/
body.page-search{
  padding-top: 0;
  overflow: hidden;
}
body.page-search .container{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Keep default gutter behavior: no reserved left/right space when scrollbar is absent */
  scrollbar-gutter: auto;
  /* Avoid scroll anchoring jumps while the embedded search block resizes */
  overflow-anchor: none;
  /* Dark scrollbar (site style) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.40);
  padding: 14px;
  /* Right edge spacing: 1.5mm from the scrollbar (when present) or from the page edge (when absent) */
  padding-right: 1.5mm;
}
body.page-search .container::-webkit-scrollbar-track{ background: rgba(0,0,0,.38); }
body.page-search .container::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.page-search .container::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.22);
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.page-search .layout,
body.page-search .main,
body.page-search .shell{
  height: auto;
  overflow: visible;
}

/* Search page: sidebar must be HARD pinned (never slides while resizing the terminal/results).
   Sticky inside a scroll container can visually "jump" when the container scrollTop changes
   (native drag auto-scroll, anchoring, etc). Fixed removes it from that flow completely. */
body.page-search .sidebar{
  position: fixed;
  top: calc(var(--topbar-h) + 14px); /* under topbar + container padding */
  left: 14px; /* equals .container padding */
  bottom: 14px;
  overflow: auto;
  z-index: 90; /* under topbar (100), above content */
}

/* Reserve space for the fixed sidebar so main content never overlaps it.
   IMPORTANT: keep the visual gap identical to other pages (layout gap = 14px).
   We reserve space via .layout padding (not main margin) to avoid double-spacing
   across browsers where fixed-positioned flex children may still affect layout.
*/
body.page-search .layout{
  display: block;
  padding-left: calc(280px + 14px); /* sidebar width + layout gap */
}
body.page-search.sidebar-collapsed .layout{
  padding-left: calc(84px + 14px); /* collapsed sidebar width + gap */
}
body.page-search .main{
  margin-left: 0;
}

/* On small screens the sidebar is hidden; remove the offset */
@media (max-width: 980px){
  /* On small screens the sidebar is hidden; remove the reserved offset */
  body.page-search .layout{ padding-left: 0; }
  body.page-search .main{ margin-left: 0; }
}

/* Search page: Filters (right column)
   We do NOT use CSS sticky here.
   Reason: if the filters block is taller than the viewport, sticky will let it scroll away.
   Instead, the JS "smart sticky" logic keeps the block visible between:
   - the bottom of the topbar (top)
   - the bottom edge of the viewport (bottom)
   without introducing an inner scrollbar for the whole block.
*/
body.page-search .search-filters{
  position: static;
  top: auto;
  align-self: flex-start;
  overflow: visible;
  max-height: none;
  will-change: transform;
}

.search-layout{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Search bar should stay visible; content scrolls under it */
.search-header-card{
  position: sticky;
  top: var(--topbar-h); /* stick right under topbar */
  z-index: 95;
  /* Must fully mask results behind (no see-through) */
  background: linear-gradient(180deg, rgba(11,15,20,.98), rgba(11,15,20,.96));
  backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 44px rgba(0,0,0,.50);
}

/* Extra safety: give the sticky header an opaque backing layer */
.search-header-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(11,15,20,.96);
  z-index:-1;
}

/* Main row: results + filters */
.search-body{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

/* Main (left) column stacks blocks vertically (e.g., PartsAPI terminal + results) */
.search-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Results: normal flow (page scroll) */
.search-results-card{
  flex:1 1 auto;
  min-width:0;
}
.search-results-scroll{
  overflow: visible;
  padding-right: 0;
}

/* Filters: separate block on the right (no inner scroll) */
.search-right{
  /* Filters column should NOT bloat: keep it narrow & fixed */
  width: 300px;
  flex: 0 0 300px;
  min-width: 280px;
  max-width: 300px;
  flex-shrink: 0;
  overflow: visible;
  position: static;
  top: auto;
  z-index: 1;
}

@media (max-width: 1100px){
  .search-header-card{ position: static; top:auto; }
  .search-body{ display:block; }
  .search-right{ width:auto; flex:0 0 auto; min-width:0; position:static; top:auto; }
}


/* --- Topbar search tweaks (v4) --- */
.topbar-left, .topbar-right{
  position:relative;
  z-index:2;
}

/* Center the whole search block in the top bar */
.topbar-search{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  flex:0;
  margin:0;
  width:calc(100% - 420px);
  max-width:833px;
}

.btn.topbar-search-btn{
  /* Topbar search button: +height (~30%) */
  min-width:60px;
  min-height:26px;
  padding:3px 10px;
  font-size:12px;
  line-height:1;
}

@media (max-width: 980px){
  .topbar-search{ width:calc(100% - 300px); }
}
@media (max-width: 720px){
  .topbar-search{ position:static; transform:none; width:auto; max-width:none; margin-left:12px; margin-right:12px; }
}
/* Scale transformation for the filters block */
.filters {
  transform: scale(0.75);
  transform-origin: top left;
  overflow: hidden;
}

/* Supplier: big page title */
.supplier-company-title{
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}



/* --- Topbar search: inline submit icon + reveal modes on focus (v20260113-04) --- */
.topbar-search{ gap:10px; }
.topbar-search-box{ flex:1; min-width:0; position:relative; display:flex; align-items:center; }
.topbar-search-box .topbar-search-input{ width:100%; min-width:0; padding-right:44px; }

/* Icon submit button inside the input */
.btn.topbar-search-submit{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: inset 1px 0 0 rgba(0,0,0,.28);
}
.btn.topbar-search-submit:hover{ background: rgba(255,255,255,.07); }
.btn.topbar-search-submit:active{ transform:translateY(-50%) scale(.98); }
.btn.topbar-search-submit svg{ display:block; opacity:.92; }

/* Search modes (field + mode) are hidden until the search is active */
.topbar-search-modes{ display:none; align-items:center; gap:10px; }
.topbar-search:focus-within .topbar-search-modes{ display:flex; }

@media (max-width: 720px){
  /* Keep the topbar clean on mobile */
  .topbar-search-modes{ display:none !important; }
}

/* --- Search rows: final overrides (keep at file end) --- */
.product-card.product-row{
  grid-template-columns: minmax(120px, 190px) minmax(120px, 170px) minmax(90px, 140px) minmax(220px, 1fr) 34px 72px 92px 44px !important;
}

/* === Patch v8: alignment + tooltip visibility fixes === */
.card.mini.supplier-block{ overflow:visible; }

.product-card.product-row{
  border:0 !important;
  border-radius:16px !important;
  padding:12px 12px !important;
  margin:4px 0 !important;
  overflow:visible !important;
  /* Column order (left -> right): supplier, code, manufacturer, description, tip, stock, price, add */
  grid-template-columns:
    minmax(130px, 190px)
    minmax(120px, 170px)
    /* Manufacturer: widened so names like "DENCKERMANN" don't get ellipsized */
    minmax(120px, 210px)
    minmax(240px, 1fr)
    34px
    72px
    104px
    44px !important;
  gap:12px !important;
}

/* Keep hover glow, but ensure it follows the row radius */
.product-card.product-row:hover{
  border-radius:16px;
}

/* Tooltip bubble: never clip and always float above rows */
.product-card.product-row .product-tip{ position:relative; z-index:30; }
.product-card.product-row .info-bubble{ z-index:9999 !important; }

/* Supplier block: leave room for the left triangle toggle */
.supplier-block .product-list{ padding-left:32px !important; }

/* ==========================
   Partners page
   ========================== */

.partner-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.partner-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.partner-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.partner-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.presence-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35) inset;
  flex-shrink:0;
}

.presence-dot.online{
  background: #31d27c;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35) inset, 0 0 8px rgba(49,210,124,0.45);
}

/* Partners: confirm dialog (remove partner) */
.confirm-panel{
  max-width: 520px;
  padding: 16px 18px 14px;
}
.confirm-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.confirm-body{
  padding:14px 0 4px;
}
.confirm-text{
  font-size:14px;
  line-height:1.35;
  font-weight:800;
}
.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:12px;
}

/* =====================================================
   Collapsible sidebar (HostiMan-style)
   - Wide: normal sidebar with text labels
   - Collapsed: thin rail with round avatar + round icon buttons
   ===================================================== */

/* Icon in sidebar items */
.sidebarbox .navitem{
  position: relative;
  justify-content: flex-start;
  gap: 10px;
}
.sidebarbox .navicon{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 22px;
  opacity: .92;
}
.sidebarbox .navicon svg{
  width: 20px;
  height: 20px;
}
.sidebarbox .navlabel{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebarbox .badge-unread{
  margin-left:auto;
}

/* Topbar menu button: subtle "pressed" when sidebar collapsed */
.btn.topbar-iconbtn.topbar-menubtn.is-open{
  border-color: rgba(61,129,255,.70);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.22)),
    rgba(61,129,255,.14);
  box-shadow:
    0 18px 34px rgba(0,0,0,.42),
    0 0 0 3px rgba(43,108,255,.18);
}

/* Collapsed state */
body.sidebar-collapsed .sidebar{
  width: 84px;
  flex: 0 0 84px;
}
body.sidebar-collapsed .sidebarbox{
  padding-left: 10px;
  padding-right: 10px;
}
body.sidebar-collapsed .sidebarbox .usercenter{
  text-align:center;
}
body.sidebar-collapsed .sidebarbox .username,
body.sidebar-collapsed .sidebarbox .muted,
body.sidebar-collapsed .sidebarbox .chips{
  display:none;
}

body.sidebar-collapsed .sidebarbox .company-badge{
  display:none;
}
body.sidebar-collapsed .sidebarbox .role-circle{
  display:inline-flex;
}

/* In collapsed mode: round avatar at the top */
body.sidebar-collapsed .sidebarbox .avatar.avatar-xl{
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  margin-top: 6px;
  box-shadow:  0 10px 22px rgba(0,0,0,.38),
    0 0 0 1px rgba(61,129,255,.55),
    0 0 0 3px rgba(61,129,255,.14),
    0 0 14px rgba(61,129,255,.18);
  border:1px solid rgba(61,129,255,.55);
}

/* Round icon buttons */
body.sidebar-collapsed .sidebarbox .navcol{
  align-items:center;
  gap: 10px;
}
body.sidebar-collapsed .sidebarbox .navitem{
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 9999px;
  justify-content:center;
}
body.sidebar-collapsed .sidebarbox .navlabel{
  display:none;
}
body.sidebar-collapsed .sidebarbox .badge-unread{
  position:absolute;
  top:-6px;
  right:-6px;
  margin-left:0;
  border:2px solid rgba(11,15,20,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* Keep active state readable in collapsed mode */
body.sidebar-collapsed .sidebarbox .navitem.active{
  border-color: rgba(61,129,255,.72);
  background: rgba(61,129,255,.18);
  box-shadow: 0 0 0 3px rgba(43,108,255,.16);
}
/* --- Topbar search layout refinements + always-visible mode switch (v20260113-05) --- */

/* Mode switch (regional/federal) lives in the right cluster, before FX rates */
.topbar-mode-switch{ display:inline-flex; align-items:center; }
.topbar-mode-select{
  color-scheme: dark;
  height:48px;
  min-height:48px;
  padding:0 38px 0 14px;
  font-size:14px;
  font-weight:800;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)),
    rgba(255,255,255,.03);
  box-shadow:
    0 16px 30px rgba(0,0,0,.35),
    0 2px 0 rgba(255,255,255,.10) inset,
    0 -10px 22px rgba(0,0,0,.25) inset;
}

/* --- Topbar search: YouTube-like (v20260128-02) --- */
/* Centered search, independent from left/right clusters */
.topbar-search{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(760px, 52vw);
  margin:0;
  z-index:2;
}

.topbar-search-box{
  width:100%;
  min-width:0;
  position:relative;
  display:flex;
  align-items:stretch;
  gap:0;
}

/* Background + border are drawn via pseudo-element so the dropdown isn't clipped */
.topbar-search-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  /* slightly lighter dark-gray than the topbar so the field is clearly visible */
  background: rgba(34, 38, 46, .96);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 34px rgba(0,0,0,.40);
  pointer-events:none;
}

.topbar-search-box:focus-within::before{
  border-color: rgba(61,129,255,.65);
  box-shadow:
    var(--ring),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 34px rgba(0,0,0,.42);
}

/*
  Important: we have a global input style for all text inputs:
  input:not([type=checkbox])... which has HIGHER specificity.
  For the topbar search we need a “chrome-less” input (no own border/bg),
  because the chrome is drawn by .topbar-search-box::before.

  So we override with an even more specific selector.
*/
.topbar-search-box input.topbar-search-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
  height:48px;
  padding:0 14px;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  color:rgba(245,248,255,.96);
  font-size:14px;
  font-weight:700;
  letter-spacing:.15px;
  border-radius:18px 0 0 18px;
}

.topbar-search-box input.topbar-search-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus{
  border-color:transparent;
  box-shadow:none;
}

.topbar-search-box input.topbar-search-input::placeholder{
  color: rgba(245,248,255,.58);
}

/* Integrated submit button (separated by a vertical divider) */
.btn.topbar-search-submit{
  position:relative;
  z-index:1;
  width:60px;
  height:48px;
  min-height:48px;
  padding:0;
  border:0;
  border-left:1px solid rgba(255,255,255,.14);
  border-radius:0 18px 18px 0;
  background: rgba(255,255,255,.09);
  box-shadow: inset 1px 0 0 rgba(0,0,0,.28);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* reset legacy “icon inside input” positioning */
  top:auto;
  right:auto;
  left:auto;
  bottom:auto;
  transform:none;
  color: rgba(245,248,255,.92);
}
.btn.topbar-search-submit:hover{ background: rgba(255,255,255,.10); }
.btn.topbar-search-submit:active{ background: rgba(255,255,255,.14); transform:none; }
.btn.topbar-search-submit svg{ display:block; }

/* Field selector appears to the RIGHT of the input only when active (no resizing) */
.topbar-search-modes{
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  display:none;
  align-items:center;
  gap:10px;
  z-index:6;
}
.topbar-search:focus-within .topbar-search-modes{ display:flex; }

.topbar-search-modes .topbar-search-select{
  color-scheme: dark;
  width:140px;
  height:48px;
  min-height:48px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  color: rgba(245,248,255,.96);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)),
    rgba(255,255,255,.03);
  box-shadow:
    0 16px 30px rgba(0,0,0,.35),
    0 2px 0 rgba(255,255,255,.08) inset,
    0 -10px 20px rgba(0,0,0,.22) inset;
}

/* Make native dropdown options readable in Chromium/Windows */
.topbar-search-select option,
.topbar-mode-select option{
  background:#0b0f14;
  color:#f5f8ff;
}
.topbar-search-select option:checked,
.topbar-mode-select option:checked{
  background:#12315f;
  color:#f5f8ff;
}

@media (max-width: 980px){
  /* On narrower screens, keep layout stable and avoid overlaps */
  .topbar-search{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width: min(760px, calc(100% - 260px));
    margin-left: 12px;
    margin-right: 12px;
    justify-content:stretch;
  }
  .topbar-search-box{ width:100%; }
}

@media (max-width: 720px){
  .topbar-search{ width: calc(100% - 24px); }
  .topbar-search-modes{ display:none !important; }
}

/* Ensure focus state stays above left/right clusters when showing modes */
.topbar-search:focus-within{ z-index:5; }

/* Topbar recent search dropdown (articul history) */
.topbar-search-dropdown{
  /* Force real dropdown behavior even if other UI layers add generic div rules */
  position:absolute !important;
  left:0;
  right:0;
  top: calc(100% + 10px);
  display:none;
  padding: 8px;
  background: rgba(12, 18, 27, .98);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
  /* Above topbar decorative gradient */
  z-index: 140;
  /* show ~7 items without scroll; if more, scroll appears */
  max-height: 296px;
  overflow: auto;
}
.topbar-search-dropdown.is-open{ display:block; }
.topbar-search-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: rgba(255,255,255,.90);
  font-weight: 600;
  letter-spacing: .15px;
}
.topbar-search-item:hover{ background: rgba(255,255,255,.05); }
.topbar-search-item:active{ background: rgba(255,255,255,.08); }
.topbar-search-item .hint{
  font-weight: 700;
  font-size: 11px;
  color: rgba(255,255,255,.60);
}

.topbar-search-dropdown::-webkit-scrollbar{ width: 8px; }
.topbar-search-dropdown::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}
.topbar-search-dropdown::-webkit-scrollbar-track{ background: rgba(255,255,255,.03); border-radius: 999px; }


/* --- Supplier branches: show branch suppliers offers inside tooltip --- */
.product-card.product-row .info-bubble{
  max-height:70vh;
  /* Keep bubble fixed; scroll only inside the list so the header stays clean */
  overflow:hidden;

  /* Make the popup width follow the longest branch line (address/phone/etc).
     Cap it to viewport so it never runs off-screen. */
  width:max-content;
  max-width:min(80vw, 920px);
  min-width:260px;
}

/* Tooltip title */
.product-card.product-row .info-bubble-title{
  position:sticky;
  top:0;
  z-index:1;
  padding:10px 10px 8px;
  margin:-8px -8px 8px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.2px;
  color:rgba(255,255,255,.92);
  background:linear-gradient(180deg, rgba(9,12,18,.98), rgba(9,12,18,.82));
  border-bottom:1px solid rgba(255,255,255,.10);
}

.product-card.product-row .branches-list{
  max-height:320px;
  overflow:auto;
  padding:0 6px 6px 0;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}

/* Scrollbar styling (Chromium/WebKit) */
.product-card.product-row .branches-list::-webkit-scrollbar{ width:10px; }
.product-card.product-row .branches-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:10px;
}
.product-card.product-row .branches-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:10px;
  border:2px solid rgba(9,12,18,.75);
}
.product-card.product-row .branches-list::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); }

.product-card.product-row .branches-offer-row{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.product-card.product-row .branches-offer-row:last-child{
  border-bottom:0;
}

.product-card.product-row .branches-offer-main{
  display:grid;
  grid-template-columns: 1fr auto auto auto;
  gap:10px;
  align-items:center;
}

.product-card.product-row .branches-actions{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-end;
}

.product-card.product-row .branches-actions .btn{
  width:30px;
  height:26px;
  padding:0;
  line-height:1;
}


/* Contact-only row (parent supplier) should look like the same list, without extra columns */
.product-card.product-row .branches-offer-row.branches-contact-only .branches-offer-main{
  /* Contact-only row (parent supplier): just show contacts line */
  display:block;
}
.product-card.product-row .branches-offer-row.branches-contact-only .branches-price,
.product-card.product-row .branches-offer-row.branches-contact-only .branches-stock,
.product-card.product-row .branches-offer-row.branches-contact-only .product-add{
  display:none;
}

.product-card.product-row .branches-supplier{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  min-width:0;
}

.product-card.product-row .branches-supplier-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Branch label inside tooltip: show contacts (address + phone) in ONE line */
.product-card.product-row .branches-supplier-tip{
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  display:block;
  white-space:nowrap;
  line-height:1.15;
}

/* Ensure the main row stays on one line and grows naturally */
.product-card.product-row .branches-offer-main{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Let supplier/contacts take the remaining space, but don't wrap */
.product-card.product-row .branches-supplier{ flex:1 1 auto; }
.product-card.product-row .branches-price,
.product-card.product-row .branches-stock,
.product-card.product-row .branches-actions{ flex:0 0 auto; }

.product-card.product-row .branches-price{
  font-weight:950;
}

.product-card.product-row .branches-offer-sub{
  margin-top:4px;
  font-size:11px;
  color:rgba(255,255,255,.76);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* === Patch v9: spacing polish for search rows ===
   Make the grid easier to scan: bigger gutters and a dedicated indent before Description.
   (No functional changes; UI spacing only.)
*/

/* Slightly larger overall gaps inside the row */
.product-card.product-row{ gap:16px !important; }

/* Keep Manufacturer clean (no extra padding that would steal width) */
.product-card.product-row .product-mfg{
  padding:0 !important;
}

/* Clear, stable separation between Manufacturer and Description */
.product-card.product-row .product-desc{
  /* Bigger indent + shorter visible line (keeps right-side columns aligned) */
  padding-left:78px !important;
  max-width:70% !important; /* ~30% shorter description line */
}

/* On smaller screens reduce the indent so Description still has room */
@media (max-width: 1100px){
  .product-card.product-row .product-desc{ padding-left:44px !important; max-width:78% !important; }
}

@media (max-width: 820px){
  .product-card.product-row{ gap:12px !important; }
  .product-card.product-row .product-mfg{ padding:0 !important; }
  .product-card.product-row .product-desc{ padding-left:22px !important; max-width:100% !important; }
}

/* === Patch v10: branches tooltip must not show underlying row icons ===
   The branches popup should visually block the table behind it.
   We keep the same style, but make the bubble fully opaque and ensure it sits on top.
*/
.product-card.product-row .product-tip.is-open{ z-index:10000 !important; }

.product-card.product-row .info-bubble{
  /* Opaque background (gradient sits on top of solid layer, not the page) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    #0c101a !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:10001 !important;
}

/* Tail variants (some builds use triangle borders, some use a rotated square) */
.product-card.product-row .info-bubble::before{
  background:#0c101a !important;
}
.product-card.product-row .info-bubble::before,
.product-card.product-row .info-bubble::after{
  border-bottom-color:#0c101a !important;
}


/* Courier mobile menu (separate overlay, no legacy sidebar) */
.courier-burger{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  padding:0;
  cursor:pointer;
}
.courier-burger:active{ transform: translateY(1px); }
.courier-burger-lines{
  width:22px;
  height:2.5px;
  background: currentColor;
  border-radius:3px;
  position: relative;
  display:block;
}
.courier-burger-lines::before,
.courier-burger-lines::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2.5px;
  background: currentColor;
  border-radius:3px;
}
.courier-burger-lines::before{ top:-7px; }
.courier-burger-lines::after{ top:7px; }

body.role-courier .courier-menu-backdrop{
  display:none;
  position: fixed;
  top:var(--topbar-h);
  left:0;
  right:0;
  bottom:0;
  z-index: 140;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(1px);
}

body.role-courier .courier-menu{
  position: fixed;
  top:var(--topbar-h);
  left:0;
  bottom:0;
  width: 300px;
  max-width: 86vw;
  z-index: 150;
  background: rgba(11,15,20,.98);
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.60);
  transform: translateX(-105%);
  transition: transform .18s ease;
  display:flex;
  flex-direction: column;
}

body.role-courier .courier-menu-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  padding:14px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.courier-menu-title{ font-weight:900; letter-spacing:.2px; }
.courier-menu-sub{ font-size:12px; color: rgba(255,255,255,.62); margin-top:2px; }

body.role-courier .courier-menu-links{
  padding: 10px 10px 18px 10px;
  display:flex;
  flex-direction: column;
  gap:10px;
}

body.role-courier .courier-menu-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  font-weight: 800;
}
body.role-courier .courier-menu-item:active{ transform: translateY(1px); }
body.role-courier .courier-menu-item.active{
  border-color: rgba(43,108,255,.55);
  box-shadow: 0 0 0 2px rgba(43,108,255,.15) inset;
}

body.role-courier.courier-menu-open{ overflow:hidden; }
body.role-courier.courier-menu-open .courier-menu{ transform: translateX(0); }
body.role-courier.courier-menu-open .courier-menu-backdrop{ display:block; }

/* =========================
   Courier mobile menu (new)
   ========================= */

/* Make courier pages full-width (no legacy sidebar). */
body.role-courier .layout{ display:block; }

.courier-burger{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  width:44px;
  height:44px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.courier-burger:active{ transform: translateY(1px); }

.courier-burger-lines{
  position: relative;
  width:22px;
  height:16px;
}
.courier-burger-lines::before,
.courier-burger-lines::after,
.courier-burger-lines{
  display:block;
}
.courier-burger-lines{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  height:3px;
  border-radius: 999px;
}
.courier-burger-lines::before{
  content:"";
  position:absolute;
  left:0;
  top:-6px;
  width:100%;
  height:3px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
}
.courier-burger-lines::after{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:100%;
  height:3px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
}

/* Overlay menu */
body.role-courier .courier-menu-backdrop{
  display:none;
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 115;
  background: rgba(0,0,0,.46);
  backdrop-filter: blur(1px);
}

body.role-courier .courier-menu{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  height: calc(100vh - var(--topbar-h));
  width: min(320px, 86vw);
  z-index: 120;
  background: rgba(11,15,20,.98);
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.58);
  transform: translateX(-105%);
  transition: transform .18s ease;
  display:flex;
  flex-direction: column;
}

body.role-courier.courier-menu-open .courier-menu{ transform: translateX(0); }
body.role-courier.courier-menu-open .courier-menu-backdrop{ display:block; }
body.role-courier.courier-menu-open{ overflow:hidden; }

.courier-menu-head{
  padding:14px 14px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(43,108,255,.18), rgba(11,15,20,0));
}
.courier-menu-title{ font-weight:900; letter-spacing:.2px; }
.courier-menu-sub{ margin-top:4px; font-size:12px; color: rgba(255,255,255,.68); }

.courier-menu-links{
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.courier-menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-decoration:none;
  color: rgba(255,255,255,.88);
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  font-weight: 800;
}
.courier-menu-item:active{ transform: translateY(1px); }
.courier-menu-item.active{
  background: linear-gradient(180deg, rgba(43,108,255,.30), rgba(43,108,255,.18));
  border-color: rgba(43,108,255,.35);
}

   Courier board (биржа) cards
   ---------------------------- */

.cb-zones{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling: touch;
}
.cb-zones .cb-chip{ flex:0 0 auto; }
.cb-zones::-webkit-scrollbar{ height:10px; }
.cb-zones::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius:999px; }
.cb-zones::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius:999px; }
.cb-zones::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.20); }

.cb-empty{
  text-align:center;
  padding:22px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(43,108,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.cb-empty-ico{ font-size:34px; line-height:1; margin-bottom:10px; }
.cb-empty-title{ font-weight:1000; font-size:16px; }
.cb-empty-sub{ color:var(--muted); font-size:12px; margin:6px 0 14px; }

.cb-list{ display:grid; gap:12px; }

.cb-item{
  border-color: rgba(255,255,255,.10);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cb-item:hover{
  transform: translateY(-1px);
  border-color: rgba(43,108,255,.22);
  background: rgba(255,255,255,.04);
}

.cb-meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cb-preview{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:12px;
  align-items:start;
}
@media (max-width: 980px){
  .cb-preview{ grid-template-columns: 1fr; }
}

.cb-stops{ display:flex; flex-direction:column; gap:8px; min-width:0; }

.cb-stopline{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.cb-stopline--full{ background: rgba(0,0,0,.10); }
.cb-stopnum{ width:22px; flex:0 0 22px; text-align:center; color: rgba(255,255,255,.72); margin-top:1px; }
.cb-stopname{ font-weight:950; font-size:13px; line-height:1.1; }
.cb-stopaddr{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-stopphone{
  margin-left:auto;
  text-decoration:none;
  color: var(--text);
  opacity:.92;
  padding:4px 8px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  white-space:nowrap;
}
.cb-stopphone:hover{ background: rgba(43,108,255,.10); border-color: rgba(43,108,255,.28); }

.cb-more{ padding-left: 32px; }

.cb-dropoff{
  padding:12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.cb-dropoff-addr{ font-weight:950; line-height:1.2; margin-top:3px; }
.cb-dropoff a{ color: var(--text); text-decoration:none; }
.cb-dropoff a:hover{ text-decoration:underline; }

.cb-details{ margin-top:10px; }
.cb-details summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight:950;
}
.cb-details summary::-webkit-details-marker{ display:none; }
.cb-details[open] summary{ border-color: rgba(43,108,255,.22); background: rgba(43,108,255,.08); }
.cb-details-caret{ opacity:.75; transform: rotate(0deg); transition: transform .15s ease; }
.cb-details[open] .cb-details-caret{ transform: rotate(180deg); }

.cb-details-body{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: 280px;
  overflow:auto;
  padding-right:6px;
}
.cb-details-body::-webkit-scrollbar{ width:10px; }
.cb-details-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius:999px; }
.cb-details-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius:999px; }
.cb-details-body::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.20); }



/* ----------------------------
   Courier board (birzha) cards (added)
   ---------------------------- */
  cursor:pointer;
}

/* ----------------------------
   Courier board (биржа) cards
   ---------------------------- */

.cb-zones{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling: touch;
}
.cb-zones .cb-chip{ flex:0 0 auto; }
.cb-zones::-webkit-scrollbar{ height:10px; }
.cb-zones::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius:999px; }
.cb-zones::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius:999px; }
.cb-zones::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.20); }

.cb-empty{
  text-align:center;
  padding:22px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(43,108,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.cb-empty-ico{ font-size:34px; line-height:1; margin-bottom:10px; }
.cb-empty-title{ font-weight:1000; font-size:16px; }
.cb-empty-sub{ color:var(--muted); font-size:12px; margin:6px 0 14px; }

.cb-list{ display:grid; gap:12px; }

.cb-item{
  border-color: rgba(255,255,255,.10);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cb-item:hover{
  transform: translateY(-1px);
  border-color: rgba(43,108,255,.22);
  background: rgba(255,255,255,.04);
}

.cb-meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cb-preview{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:12px;
  align-items:start;
}
@media (max-width: 980px){
  .cb-preview{ grid-template-columns: 1fr; }
}

.cb-stops{ display:flex; flex-direction:column; gap:8px; min-width:0; }

.cb-stopline{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.cb-stopline--full{ background: rgba(0,0,0,.10); }
.cb-stopnum{ width:22px; flex:0 0 22px; text-align:center; color: rgba(255,255,255,.72); margin-top:1px; }
.cb-stopname{ font-weight:950; font-size:13px; line-height:1.1; }
.cb-stopaddr{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-stopphone{
  margin-left:auto;
  text-decoration:none;
  color: var(--text);
  opacity:.92;
  padding:4px 8px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  white-space:nowrap;
}
.cb-stopphone:hover{ background: rgba(43,108,255,.10); border-color: rgba(43,108,255,.28); }

.cb-more{ padding-left: 32px; }

.cb-dropoff{
  padding:12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.cb-dropoff-addr{ font-weight:950; line-height:1.2; margin-top:3px; }
.cb-dropoff a{ color: var(--text); text-decoration:none; }
.cb-dropoff a:hover{ text-decoration:underline; }

.cb-details{ margin-top:10px; }
.cb-details summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight:950;
}
.cb-details summary::-webkit-details-marker{ display:none; }
.cb-details[open] summary{ border-color: rgba(43,108,255,.22); background: rgba(43,108,255,.08); }
.cb-details-caret{ opacity:.75; transform: rotate(0deg); transition: transform .15s ease; }
.cb-details[open] .cb-details-caret{ transform: rotate(180deg); }

.cb-details-body{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: 280px;
  overflow:auto;
  padding-right:6px;
}
.cb-details-body::-webkit-scrollbar{ width:10px; }
.cb-details-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius:999px; }
.cb-details-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius:999px; }
.cb-details-body::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.20); }


@media (max-width: 720px){
  .profile-avatar{
    padding-left:0;
    padding-top:12px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.08);
  }
}

.form.compact{ gap:10px; }
.fieldrow{ display:grid; grid-template-columns: 150px minmax(0, 1fr); gap:12px; align-items:center; }
.fieldrow .label{ color:var(--muted); font-size:13px; font-weight:900; }
@media (max-width: 720px){
  .fieldrow{ grid-template-columns: 1fr; gap:6px; }
}

.grid3{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width: 1100px){ .grid3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px){ .grid3{ grid-template-columns: 1fr; } }
code{ font-family:var(--mono); font-size:12px; padding:2px 6px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.20); }

/* Forms (legacy) */
.pad{ padding:14px; }
.form{ display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Inputs (text-like only)


/* =========================
   Company Profile / Blog (profile_home)
   ========================= */
.company-profile{
  padding: 16px;
}
.company-profile .cp-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1100px 380px at 10% 0%, rgba(43,108,255,.18), transparent 55%),
    radial-gradient(900px 320px at 90% 20%, rgba(92,220,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
}
.company-profile .cp-hero-left{ min-width:0; }
.company-profile .cp-hero-actions{ flex:0 0 auto; }
.company-profile .cp-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.company-profile .cp-logo{
  width:46px;
  height:46px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 28px rgba(0,0,0,.26), 0 0 0 2px rgba(43,108,255,.10) inset;
  object-fit:cover;
}
.company-profile .cp-logo--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.4px;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(24px 24px at 30% 30%, rgba(255,255,255,.16), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.20)),
    rgba(43,108,255,.20);
}
.company-profile .cp-brand-text{ min-width:0; }
.company-profile .cp-title{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 18px;
  line-height: 1.1;
}
.company-profile .cp-subtitle{
  margin-top:4px;
  font-size:12px;
  opacity:.78;
}
.company-profile .cp-companyline{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:12px;
  opacity:.92;
}
.company-profile .cp-company{
  font-weight:900;
}
.company-profile .cp-sep{
  opacity:.55;
}
.company-profile .cp-addr,
.company-profile .cp-phone{
  opacity:.82;
}
.company-profile .cp-manage-btn{
  width:auto;
  height:auto;
  padding:10px 14px;
  min-height:40px;
  border-radius: 16px;
  letter-spacing: .2px;
}
.company-profile .cp-sections{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 1100px){
  .company-profile .cp-hero{ flex-direction:column; }
  .company-profile .cp-hero-actions{ width:100%; }
  .company-profile .cp-manage-btn{ width:100%; justify-content:center; }
  .company-profile .cp-sections{ grid-template-columns: 1fr; }
}
.company-profile .cp-section{
  padding:16px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 240px at 10% 10%, rgba(43,108,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  box-shadow: 0 14px 30px rgba(0,0,0,.26);
  position:relative;
  overflow:hidden;
}
.company-profile .cp-section:before{
  content:"";
  position:absolute;
  left:14px;
  top:14px;
  width:6px;
  height:22px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(92,220,255,.80), rgba(43,108,255,.85));
  box-shadow: 0 10px 20px rgba(43,108,255,.25);
  opacity:.75;
}
.company-profile .cp-section-title{
  padding-left:14px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.78;
}
.company-profile .cp-section-body{
  margin-top:10px;
  font-size:14px;
  line-height:1.45;
  opacity:.96;
  word-break:break-word;
}
.company-profile .cp-posts{
  margin-top:16px;
}
.company-profile .cp-posts-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.company-profile .cp-h2{
  font-weight:950;
  letter-spacing:.2px;
}
.company-profile .cp-hint{
  font-size:12px;
  opacity:.65;
}
.company-profile .cp-posts-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.company-profile .cp-post{
  padding:16px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(255,255,255,.03), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  box-shadow: 0 16px 34px rgba(0,0,0,.26);
}
.company-profile .cp-post-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.company-profile .cp-post-left{ min-width:0; }
.company-profile .cp-post-title{
  font-weight:950;
  letter-spacing:.15px;
}
.company-profile .cp-post-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:12px;
  opacity:.78;
}
.company-profile .cp-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.company-profile .cp-pill-pin{
  border-color: rgba(92,220,255,.25);
  background: rgba(92,220,255,.08);
}
.company-profile .cp-tags{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.company-profile .cp-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(61,129,255,.25);
  background: rgba(43,108,255,.10);
  color: rgba(255,255,255,.92);
}
.company-profile .cp-cover{
  flex:0 0 auto;
  width:150px;
  height:92px;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 16px 32px rgba(0,0,0,.28);
  text-decoration:none;
}
.company-profile .cp-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width: 980px){
  .company-profile .cp-cover{ display:none; }
}
.company-profile .cp-post-body{
  margin-top:10px;
  line-height:1.45;
  opacity:.96;
  word-break:break-word;
}
.company-profile .cp-attachments{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.company-profile .cp-att-img{
  width:96px;
  height:72px;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  text-decoration:none;
}
.company-profile .cp-att-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.company-profile .cp-att-file{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  color: var(--text);
  font-size:13px;
}
.company-profile .cp-att-file:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.company-profile .cp-empty{ margin-top:10px; }
.company-profile .cp-empty-card{
  margin-top:10px;
  padding:16px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.company-profile .cp-list{ margin:0; padding-left:18px; }