/* ============================================================================
   Ягодка — дизайн самокатского веба. Перенесён из design_index.html и
   расширен под нужды реального продукта (адресная карточка, drawer-cart,
   orders, login, modal). Никакого Tailwind в самом дизайне; только этот файл.
   ========================================================================= */

:root{
  --bg:        oklch(98% 0.008 350);
  --surface:   #ffffff;
  --ink:       oklch(22% 0.02 340);
  --ink-2:     oklch(45% 0.02 340);
  --ink-3:     oklch(68% 0.015 340);
  --line:      oklch(94% 0.01 340);
  --line-2:    oklch(90% 0.012 340);

  --pink-50:   oklch(97% 0.018 5);
  --pink-100:  oklch(94% 0.035 5);
  --pink-200:  oklch(88% 0.06 5);
  --pink-300:  oklch(80% 0.10 5);
  --pink-500:  oklch(67% 0.18 5);
  --pink-600:  oklch(60% 0.20 5);
  --pink-700:  oklch(52% 0.20 5);

  --mint:      oklch(92% 0.05 165);
  --cream:     oklch(95% 0.03 80);
  --sky:       oklch(92% 0.04 230);
  --lilac:     oklch(92% 0.04 300);

  --green:     oklch(62% 0.16 150);
  --amber:     oklch(72% 0.16 80);
  --rose:      oklch(60% 0.20 25);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-card: 0 1px 0 rgba(20,10,30,0.02), 0 8px 24px -10px rgba(80,30,60,0.10);
  --shadow-pop:  0 12px 40px -12px rgba(80,30,60,0.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","cv11";
  min-height: 100vh;
}
button{font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding:0}
a{color:inherit; text-decoration:none}
input, textarea, select{font: inherit}

/* ── скроллбары для тонких контейнеров ─────────────────────────────────── */
.thin-scroll::-webkit-scrollbar{width: 6px; height: 6px}
.thin-scroll::-webkit-scrollbar-thumb{background: var(--line-2); border-radius: 999px}

/* ── утилиты ───────────────────────────────────────────────────────────── */
.muted{color: var(--ink-3)}
.mono{font-family: ui-monospace, "SF Mono", Menlo, monospace}
.hidden{display: none !important}
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================================
   TOPBAR
   ========================================================================= */
.topbar{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 240px 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 28px;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size: 22px; letter-spacing:-0.02em}
.logo .dot{
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--pink-500), var(--pink-700) 75%);
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}
.logo .dot::after{
  content:""; position:absolute; top:-3px; left:50%; transform:translateX(-50%) rotate(-15deg);
  width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: oklch(45% 0.10 150);
}
.logo span{color: var(--ink)}
.logo b{color: var(--pink-600)}

.search{
  position: relative; height: 48px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  transition: border-color .2s, background .2s;
}
.search:focus-within{ border-color: var(--pink-300); background: #fff; box-shadow: 0 0 0 4px var(--pink-50)}
.search svg{flex:0 0 18px; color: var(--ink-3)}
.search input{
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--ink);
  font-size: 15px;
}
.search input::placeholder{color: var(--ink-3)}
.search kbd{
  font-family: inherit; font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 6px;
  padding: 2px 6px;
}
.search .clear{
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.search .clear:hover{background: var(--line); color: var(--ink)}

.top-actions{display:flex; align-items:center; gap:10px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  height: 44px; padding: 0 18px;
  border-radius: 999px; background: #fff;
  border: 1px solid var(--line);
  font-weight: 600; font-size: 14px;
  transition: all .15s ease;
  white-space: nowrap;
}
.pill:hover{border-color: var(--pink-300); color: var(--pink-700); transform: translateY(-1px)}
.pill.primary{background: var(--ink); color: #fff; border-color: var(--ink)}
.pill.primary:hover{background: var(--pink-700); border-color: var(--pink-700); color:#fff}
.pill.ghost{background: transparent}
.pill.cart{
  background: var(--pink-500); color: #fff; border-color: var(--pink-500);
  padding-right: 12px;
}
.pill.cart:hover{background: var(--pink-700); border-color: var(--pink-700); transform: translateY(-1px)}
.pill.cart .count{
  background: rgba(255,255,255,0.22); border-radius: 999px; padding: 4px 10px; min-width: 28px; text-align:center;
  font-variant-numeric: tabular-nums;
}
.pill[disabled], .pill:disabled{opacity: .5; cursor: not-allowed; transform: none}
.icon-btn{
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  transition: all .15s ease;
}
.icon-btn:hover{border-color: var(--pink-300); color: var(--pink-700)}
.icon-btn.sm{width: 32px; height: 32px}

/* ── proxy/IP мини-индикатор как pill ─────────────────────────────────── */
/* .ip-pill-wrap — div-обёртка для popover (popover не может жить внутри
   <button>: HTML5 не разрешает button внутри button, и chromium ломает DOM).
   Wrap позиционирует popover относительно себя; pill остаётся валидной кнопкой. */
.ip-pill-wrap{position: relative; display: inline-block}
.ip-pill{
  display:inline-flex; align-items:center; gap: 8px;
  height: 36px; padding: 0 12px 0 10px;
  border-radius: 999px; background: #fff;
  border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2);
  transition: all .15s ease;
}
.ip-pill:hover{border-color: var(--pink-300)}
.ip-pill .led{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
  box-shadow: 0 0 0 0 var(--ink-3);
}
.ip-pill[data-state="ok"]    .led{background: var(--green); box-shadow: 0 0 0 3px oklch(62% 0.16 150 / 0.18)}
.ip-pill[data-state="warn"]  .led{background: var(--amber); box-shadow: 0 0 0 3px oklch(72% 0.16 80 / 0.18)}
.ip-pill[data-state="error"] .led{background: var(--rose);  box-shadow: 0 0 0 3px oklch(60% 0.20 25 / 0.18)}
.ip-pill .ip-val{font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink)}

/* popover IP */
.ip-pop{
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 280px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  padding: 14px;
  z-index: 60;
  display: none;
}
.ip-pop.open{display: block}
.ip-pop h5{margin: 0 0 8px; font-size: 13px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em}
.ip-pop .row{display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 13px}
.ip-pop .row .lbl{color: var(--ink-3)}
.ip-pop .row .val{font-family: ui-monospace, monospace; color: var(--ink)}
.ip-pop .actions{display: flex; gap: 8px; margin-top: 12px}
.ip-pop .btn{
  flex: 1; padding: 8px 12px; border-radius: 999px;
  font-weight: 600; font-size: 13px;
  transition: all .15s;
}
.ip-pop .btn.primary{background: var(--pink-500); color: #fff}
.ip-pop .btn.primary:hover{background: var(--pink-700)}
.ip-pop .btn.primary:disabled{background: var(--line-2); color: var(--ink-3); cursor: not-allowed}
.ip-pop .btn.secondary{background: var(--bg); color: var(--ink); border: 1px solid var(--line)}
.ip-pop .btn.secondary:hover{background: var(--line)}

/* ============================================================================
   SHELL
   ========================================================================= */
.shell{
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 240px 1fr 320px;
  gap: 24px;
  padding: 24px 28px 80px;
}
.shell-narrow{ /* для login и небольших страниц */
  max-width: 1480px; margin: 0 auto;
  padding: 40px 28px 80px;
}

/* ── SIDEBAR ──────────────────────────────────────────────────────────── */
.sidebar{
  position: sticky; top: 92px;
  align-self: start;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  border: 1px solid var(--line);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar{width: 6px}
.sidebar::-webkit-scrollbar-thumb{background: var(--line-2); border-radius: 999px}

.nav-item{
  display: grid; grid-template-columns: 36px 1fr; align-items:center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  color: var(--ink-2);
  transition: background .15s, color .15s, transform .15s;
  text-align: left;
  width: 100%;
}
.nav-item:hover{background: var(--pink-50); color: var(--pink-700); transform: translateX(2px)}
.nav-item.active{background: var(--pink-50); color: var(--pink-700); font-weight: 600}
.nav-item .ic{
  width: 32px; height: 32px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg);
  font-size: 16px;
  transition: transform .2s ease;
}
.nav-item:hover .ic{transform: rotate(-6deg) scale(1.05)}
.nav-item.active .ic{background: #fff; box-shadow: var(--shadow-card)}

/* ── MAIN ─────────────────────────────────────────────────────────────── */
.main{display: flex; flex-direction: column; gap: 36px; min-width: 0}

.section-head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 4px 14px;
}
.section-head h2{
  margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
}
.section-head .more{
  color: var(--ink-3); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s, gap .2s;
  cursor: pointer;
}
.section-head .more:hover{color: var(--pink-700); gap: 10px}

/* ── Shelf (товары) ───────────────────────────────────────────────────── */
.shelf{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
}
.shelf-empty{
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: 48px 24px;
  color: var(--ink-3);
  text-align: center;
  min-height: 280px;
}
.shelf-empty .em{
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--pink-50);
  color: var(--pink-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  font-size: 28px;
}
.shelf-empty h4{margin: 0 0 4px; color: var(--ink); font-size: 17px; font-weight: 700}
.shelf-empty p{margin: 0; font-size: 13px}

/* product card */
.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: pointer;
  min-width: 0;
}
.card:hover{transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: transparent}
.card.is-out{opacity: .55}
.card.in-cart{border-color: var(--pink-300)}
.card .img{
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(circle at 78% 82%, rgba(255,255,255,0.22), transparent 50%),
    var(--ph, var(--pink-50));
  box-shadow: inset 0 0 0 1px rgba(20,10,30,0.03), inset 0 -20px 40px -20px rgba(20,10,30,0.06);
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.card:hover .img{transform: scale(1.025)}
.card .img img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card .img .ph-label{
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(20,10,30,0.45);
  background: transparent;
  padding: 24px;
  text-align: center;
  text-transform: none;
}
.badge-disc{
  position: absolute; top: 12px; left: 12px;
  background: var(--pink-500); color: #fff;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(214,52,109,0.25);
}
.badge-out{
  position: absolute; top: 12px; left: 12px;
  background: rgba(20,10,30,0.65); color: #fff;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  z-index: 2;
}
.like{
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-3);
  z-index: 2;
  transition: transform .15s, color .15s;
  box-shadow: var(--shadow-card);
}
.like:hover{transform: scale(1.1); color: var(--pink-500)}
.like.on{color: var(--pink-500)}
.like.on svg{fill: currentColor}

.card .name{
  font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 38px;
}
.card .meta{
  font-size: 12.5px; color: var(--ink-3);
  min-height: 18px;
}
.card .meta .hint{color: var(--green); font-weight: 600}
.card .price-row{
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
}
.card .price{
  background: var(--pink-50);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}
.card .price .old{color: var(--ink-3); text-decoration: line-through; font-weight: 500; font-size: 12px}
.card .add{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pink-500); color: #fff;
  display: inline-flex; align-items:center; justify-content:center;
  margin-left: -42px; z-index: 2;
  transition: transform .15s, background .15s;
  flex: 0 0 36px;
  box-shadow: 0 4px 12px rgba(214,52,109,0.3);
}
.card .add:hover{transform: scale(1.1) rotate(90deg); background: var(--pink-700)}
.card .add:disabled{background: var(--line-2); color: var(--ink-3); cursor: wait; transform: none; box-shadow: none}

.qty{
  margin-left: -42px; z-index: 2;
  display: inline-flex; align-items: center;
  background: var(--pink-500); color: #fff;
  border-radius: 999px;
  height: 36px; padding: 0 5px;
  font-weight: 700; font-size: 14px;
  flex: 0 0 auto;
  transition: opacity .15s;
  box-shadow: 0 4px 12px rgba(214,52,109,0.3);
}
.qty.busy{opacity: .6; cursor: wait}
.qty button{
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s;
}
.qty button:hover{background: rgba(255,255,255,0.18)}
.qty button:disabled{cursor: wait; background: transparent}
.qty span{min-width: 24px; text-align: center; font-variant-numeric: tabular-nums}

/* fly-to-cart anim */
.fly{
  position: fixed;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--pink-500); color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-weight: 800; font-size: 16px;
  z-index: 100; pointer-events: none;
  transition: transform 0.7s cubic-bezier(.5,-0.2,.7,1.2), opacity .7s;
}

/* ── Orders (новый блок) ──────────────────────────────────────────────── */
.orders-grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.order-row{
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.order-row:hover{transform: translateY(-2px); border-color: var(--pink-200); box-shadow: var(--shadow-card)}
.order-row .imgs{display: flex}
.order-row .imgs img{
  width: 32px; height: 32px; border-radius: 8px;
  object-fit: cover; background: var(--bg);
  margin-left: -8px;
  border: 2px solid #fff;
}
.order-row .imgs img:first-child{margin-left: 0}
.order-row .imgs .empty{
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--pink-50); color: var(--pink-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.order-row .num{font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-3)}
.order-row .ttl{font-size: 13px; color: var(--ink-2); line-height: 1.3}
.order-row .sub{font-size: 11px; color: var(--ink-3); margin-top: 2px}
.order-row .amount{
  font-weight: 700; font-size: 15px; color: var(--ink);
  white-space: nowrap;
}
.order-status{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.order-status.active{border-color: var(--amber); color: oklch(48% 0.16 80); background: oklch(98% 0.04 80)}
.order-status.done  {border-color: var(--green); color: oklch(40% 0.16 150); background: oklch(96% 0.04 150)}
.order-status.fail  {border-color: var(--rose); color: oklch(45% 0.20 25); background: oklch(97% 0.04 25)}
.order-status.idle  {border-color: var(--line-2); color: var(--ink-3); background: var(--bg)}
.orders-loading, .orders-empty{
  grid-column: 1 / -1;
  text-align: center; color: var(--ink-3); padding: 24px;
  background: #fff;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
}

/* ============================================================================
   RIGHT RAIL
   ========================================================================= */
.rail{display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto}
.rail::-webkit-scrollbar{width: 6px}
.rail::-webkit-scrollbar-thumb{background: var(--line-2); border-radius: 999px}

/* address-card */
.addr-card{
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 18px 18px 14px;
}
.addr-card h3{margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em}
.addr-card .summary{margin: 0 0 12px; color: var(--ink-2); font-size: 13px}
.addr-card .actions{display: flex; gap: 8px}
.addr-card .btn{
  flex: 1; padding: 10px 14px; border-radius: 999px;
  font-weight: 600; font-size: 13px;
  transition: all .15s;
  text-align: center;
}
.addr-card .btn.primary{background: var(--pink-500); color: #fff}
.addr-card .btn.primary:hover{background: var(--pink-700)}
.addr-card .btn.ghost{background: var(--bg); color: var(--ink); border: 1px solid var(--line)}
.addr-card .btn.ghost:hover{background: var(--line)}
.addr-card .list{
  display: flex; flex-direction: column; gap: 6px;
  margin: 12px 0 0;
}
.addr-card .list .row{
  display: grid; grid-template-columns: 18px 1fr auto;
  gap: 8px; align-items: start;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.addr-card .list .row:hover{border-color: var(--pink-200); background: var(--pink-50)}
.addr-card .list .row.active{border-color: var(--pink-500); background: var(--pink-50)}
.addr-card .list .row input{margin-top: 4px; accent-color: var(--pink-500)}
.addr-card .list .row .nm{font-size: 13px; font-weight: 600; line-height: 1.25}
.addr-card .list .row .meta{font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.3}
.addr-card .list .row .del{
  color: var(--ink-3); font-size: 11px;
  background: none; padding: 2px 6px; border-radius: 6px;
  align-self: center;
}
.addr-card .list .row .del:hover{color: var(--rose); background: oklch(97% 0.04 25)}

/* address autocomplete */
.addr-add{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.addr-add summary{
  cursor: pointer; color: var(--ink-3); font-size: 12px; font-weight: 600;
  list-style: none; user-select: none;
}
.addr-add summary::-webkit-details-marker{display: none}
.addr-add summary::before{content: '+ '; color: var(--pink-500); font-weight: 700}
.addr-add[open] summary::before{content: '− '}
.addr-add .body{margin-top: 10px; display: flex; flex-direction: column; gap: 8px}
.input{
  width: 100%;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.input:focus{outline: none; border-color: var(--pink-300); background: #fff; box-shadow: 0 0 0 3px var(--pink-50)}
.input::placeholder{color: var(--ink-3)}
textarea.input{height: auto; min-height: 60px; padding: 10px 12px; resize: vertical; font-family: inherit}
.addr-add .grid-2{display: grid; grid-template-columns: 1fr 1fr; gap: 8px}
.addr-add .suggest-wrap{position: relative}
.addr-add .suggest-box{
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-pop);
  max-height: 280px; overflow-y: auto;
  z-index: 10;
}
.addr-add .suggest-btn{
  display: block; width: 100%; text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.3;
  transition: background .12s;
}
.addr-add .suggest-btn:last-child{border-bottom: 0}
.addr-add .suggest-btn:hover{background: var(--pink-50)}
.addr-add .suggest-btn .meta{font-size: 11px; color: var(--ink-3); margin-top: 2px}
.addr-add .selected{
  padding: 10px 12px;
  border: 1px solid var(--pink-300);
  background: var(--pink-50);
  border-radius: var(--r);
  font-size: 12px;
  position: relative;
}
.addr-add .selected .coords{color: var(--ink-3); font-family: monospace; font-size: 10px; margin-top: 2px}
.addr-add .selected .x{
  position: absolute; top: 6px; right: 8px;
  color: var(--ink-3); font-size: 14px;
  width: 18px; height: 18px; border-radius: 50%;
}
.addr-add .selected .x:hover{background: var(--line); color: var(--ink)}
.addr-add .submit-btn{
  width: 100%; height: 40px; border-radius: 12px;
  background: var(--pink-500); color: #fff;
  font-weight: 700; font-size: 13px;
  transition: background .15s;
}
.addr-add .submit-btn:hover{background: var(--pink-700)}
.addr-add .submit-btn:disabled{background: var(--line-2); color: var(--ink-3); cursor: not-allowed}

/* map-card */
.map-card{
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4/5;
  position: relative;
}
.map{
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, oklch(96% 0.04 145) 0 14%, transparent 14.5%),
    radial-gradient(circle at 75% 70%, oklch(96% 0.04 145) 0 9%, transparent 9.5%),
    radial-gradient(circle at 60% 25%, oklch(96% 0.04 200) 0 11%, transparent 11.5%),
    linear-gradient(135deg, oklch(98% 0.01 220) 0%, oklch(96% 0.02 220) 100%);
}
.map svg{position: absolute; inset: 0; width: 100%; height: 100%}
.map-pin{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  width: 36px; height: 46px;
  z-index: 3;
}
.map-pin .head{
  width: 36px; height: 36px; border-radius: 50% 50% 50% 0;
  background: var(--pink-500);
  transform: rotate(-45deg);
  position: relative;
  box-shadow: 0 6px 14px -4px oklch(60% 0.20 5 / 0.5);
  animation: pinBob 2.6s ease-in-out infinite;
}
.map-pin .head::after{
  content:""; width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.map-pin::before{
  content:""; position: absolute; top: 100%; left: 50%; transform: translate(-50%,-30%);
  width: 36px; height: 8px;
  border-radius: 50%;
  background: oklch(60% 0.20 5 / 0.18);
  filter: blur(2px);
  animation: pinFloat 2.6s ease-in-out infinite;
}
@keyframes pinFloat{ 50%{transform: translate(-50%,-30%) scale(0.7); opacity:0.5} }
@keyframes pinBob{ 50%{transform: rotate(-45deg) translate(2px,-2px)} }

.map-overlay{
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-card);
}
.map-overlay .lbl{font-size: 12px; color: var(--ink-3)}
.map-overlay .val{font-weight: 700; font-size: 14px; line-height: 1.25}
.map-overlay .change{margin-left: auto; color: var(--pink-700); font-weight: 600; font-size: 13px; cursor: pointer; flex: none}

/* showcase tag в overlay */
.map-overlay .sla{
  display:inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--ink-3); margin-top: 2px;
}
.map-overlay .sla .led{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
}
.map-overlay .sla.warn .led{background: var(--rose)}

/* promo-card */
.promo-card{
  background: linear-gradient(135deg, var(--pink-500), var(--pink-700));
  color: #fff;
  border-radius: var(--r-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.promo-card::after{
  content:""; position: absolute; right: -30px; bottom: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.promo-card::before{
  content:""; position: absolute; right: -60px; bottom: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.promo-card h3{margin:0 0 4px; font-size: 18px; font-weight: 800; letter-spacing:-0.01em; position:relative; z-index:2}
.promo-card p{margin:0 0 14px; font-size: 13px; opacity: .9; position:relative; z-index: 2}
.promo-card .code{
  display:inline-flex; align-items:center; gap: 8px;
  background: rgba(255,255,255,0.18);
  padding: 8px 14px; border-radius: 999px;
  font-weight: 700; font-size: 13px;
  position: relative; z-index: 2;
  cursor: pointer;
  transition: background .15s;
}
.promo-card .code:hover{background: rgba(255,255,255,0.28)}
.promo-card .promo-input{
  position: relative; z-index: 2;
  display: flex; gap: 6px; margin-top: 10px;
}
.promo-card .promo-input input{
  flex: 1; min-width: 0;
  height: 36px; padding: 0 12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  color: #fff;
  font-family: inherit; font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  outline: none;
}
.promo-card .promo-input input::placeholder{color: rgba(255,255,255,0.65); text-transform: none; letter-spacing: 0}
.promo-card .promo-input input:focus{background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.45)}
.promo-card .promo-input button{
  height: 36px; padding: 0 14px;
  background: #fff; color: var(--pink-700);
  border-radius: 999px;
  font-weight: 700; font-size: 13px;
  transition: opacity .15s;
}
.promo-card .promo-input button:disabled{opacity: .5; cursor: not-allowed}
.promo-card .promo-status{
  position: relative; z-index: 2;
  margin-top: 8px;
  font-size: 12px;
  min-height: 16px;
}
.promo-card .promo-status.ok{color: #fff; font-weight: 600}
.promo-card .promo-status.warn{color: oklch(96% 0.04 80)}
.promo-card .promo-status.pending{color: rgba(255,255,255,0.85); font-style: italic}

/* промоакции (свёрнутый блок) */
.promo-list{
  margin-top: 10px;
  position: relative; z-index: 2;
}
.promo-list summary{
  cursor: pointer; font-size: 12px; font-weight: 600;
  list-style: none; user-select: none;
}
.promo-list summary::-webkit-details-marker{display: none}
.promo-list summary::after{content: ' ↓'; opacity: .6}
.promo-list[open] summary::after{content: ' ↑'}
.promo-list .items{
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  border-radius: 12px;
  padding: 8px;
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px; overflow-y: auto;
}
.promo-list .item{
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 12px;
}
.promo-list .item.applicable{border-color: var(--pink-300); background: var(--pink-50)}
.promo-list .item .nm{font-weight: 700; font-size: 13px; margin-bottom: 2px}
.promo-list .item .desc{color: var(--ink-3); font-size: 11px; line-height: 1.3}
.promo-list .item code{font-family: ui-monospace, monospace; font-size: 11px; background: #fff; padding: 1px 6px; border-radius: 6px}
.promo-list .item .conds{margin-top: 4px}
.promo-list .item .cond{font-size: 11px; color: var(--ink-3)}
.promo-list .item .cond.done{color: var(--green); font-weight: 600}
.promo-list .item .apply{
  display: inline-block;
  margin-top: 6px;
  background: var(--pink-500); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.promo-list .item .apply:hover{background: var(--pink-700)}

/* ============================================================================
   CART DRAWER
   ========================================================================= */
.drawer-backdrop{
  position: fixed; inset: 0; background: rgba(20,10,30,0.35);
  backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.drawer-backdrop.open{opacity: 1; pointer-events: auto}
.drawer{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 460px; max-width: 100vw;
  background: var(--surface);
  z-index: 91;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,0.2);
}
.drawer.open{transform: translateX(0)}
.drawer-head{
  padding: 22px 24px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer-head h3{margin:0; font-size: 22px; font-weight: 800; letter-spacing:-0.02em}
.drawer-body{flex: 1; overflow-y: auto; padding: 14px 24px}
.drawer-foot{
  padding: 16px 24px 22px;
  border-top: 1px solid var(--line);
  flex: none;
}

.cart-empty{
  text-align: center; padding: 60px 20px;
  color: var(--ink-3);
}
.cart-empty .em{
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--pink-50);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pink-500);
}
.cart-empty h4{margin: 0 0 8px; color: var(--ink); font-size: 18px; font-weight: 700}
.cart-empty p{margin: 0; font-size: 13px}

.cart-item{
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: opacity .15s;
}
.cart-item.busy{opacity: .55}
.cart-item:last-child{border-bottom: 0}
.cart-item .thumb{
  width: 56px; height: 56px; border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.025) 0 6px, transparent 6px 12px),
    var(--ph, var(--pink-50));
  position: relative; overflow: hidden;
}
.cart-item .thumb img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover}
.cart-item .nm{font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-2)}
.cart-item .pr{font-weight: 700; font-size: 14px; margin-top: 4px}
.cart-item .pr .old{color: var(--ink-3); text-decoration: line-through; font-weight: 500; font-size: 11px; margin-left: 4px}
.cart-item .qty{margin-left: 0}
.cart-item .qty button.del-x{background: rgba(255,255,255,0.18)}

/* промо-блок внутри drawer корзины — компактный, светлый, без градиента (rail-card яркий, тут — нейтральный) */
.cart-promo{
  background: var(--pink-50);
  border: 1px solid var(--pink-200);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.cart-promo-row{
  display: flex; gap: 8px; align-items: center;
}
.cart-promo-row input{
  flex: 1; min-width: 0;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  outline: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.cart-promo-row input::placeholder{
  text-transform: none; letter-spacing: 0;
  color: var(--ink-3);
}
.cart-promo-row input:focus{
  border-color: var(--pink-500);
  box-shadow: 0 0 0 3px var(--pink-100);
}
.cart-promo-row button{
  height: 36px; padding: 0 14px;
  background: var(--pink-500); color: #fff;
  border-radius: 999px;
  font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.cart-promo-row button:hover{background: var(--pink-700)}
.cart-promo-row button:active{transform: scale(0.97)}
.cart-promo-row button:disabled{opacity: .5; cursor: not-allowed; transform: none}
.cart-promo-status{
  margin-top: 8px;
  font-size: 12px;
  min-height: 14px;
  line-height: 1.35;
  font-weight: 500;
}
.cart-promo-status:empty{display: none}
.cart-promo-status.ok{color: var(--green); font-weight: 700}
.cart-promo-status.warn{color: var(--rose)}
.cart-promo-status.pending{color: var(--ink-3); font-style: italic}

.cart-summary{
  background: var(--bg);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-top: 10px;
}
.cart-summary .row{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 3px 0;
  color: var(--ink-2);
}
.cart-summary .row.discount{color: var(--green); font-weight: 600}
.cart-summary .row.total{
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 16px; font-weight: 800; color: var(--ink);
}

/* flash при смене totalPrice — мигаем зелёным, чтобы юзер видел, что цена обновилась */
@keyframes priceFlash{
  0%   { color: var(--green); transform: translateY(-1px) }
  60%  { color: var(--green); transform: translateY(0) }
  100% { color: inherit;      transform: translateY(0) }
}
.price-flash{
  animation: priceFlash 0.65s ease-out;
  display: inline-block;
}

.delivery-line{
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-2); font-size: 13px;
  margin: 12px 0;
}
.delivery-line .ic{
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--mint);
  display: flex; align-items: center; justify-content: center;
  color: oklch(50% 0.10 150);
  flex: none;
}
.delivery-line b{color: var(--ink); font-weight: 700}

.checkout-options{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin: 8px 0 12px;
}
.checkout-options label{
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-2);
  padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.checkout-options label:hover{border-color: var(--pink-300)}
.checkout-options label.active{border-color: var(--pink-500); background: var(--pink-50); color: var(--ink)}
.checkout-options input[type="radio"]{margin: 0; accent-color: var(--pink-500)}
.checkout-options select.input{height: 38px}

.checkout{
  width: 100%; padding: 16px;
  background: var(--pink-500); color: #fff;
  border-radius: 16px;
  font-weight: 700; font-size: 15px;
  transition: background .15s;
  display: flex; align-items: center; justify-content: space-between;
}
.checkout:hover{background: var(--pink-700)}
.checkout:disabled{background: var(--line-2); color: var(--ink-3); cursor: not-allowed}
.checkout-preview{
  width: 100%; padding: 10px 16px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 600; font-size: 12px;
  margin-top: 8px;
  transition: border-color .15s, color .15s;
}
.checkout-preview:hover{border-color: var(--pink-300); color: var(--pink-700)}

.checkout-output{
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--ink-2);
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.checkout-output:empty{display: none}

/* ============================================================================
   ORDER MODAL
   ========================================================================= */
.modal-backdrop{
  position: fixed; inset: 0; background: rgba(20,10,30,0.40);
  backdrop-filter: blur(4px);
  z-index: 95;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop.open{opacity: 1; pointer-events: auto}
.modal{
  background: var(--surface);
  border-radius: var(--r-lg);
  max-width: 600px; width: 100%;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop);
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.modal-backdrop.open .modal{transform: translateY(0) scale(1); opacity: 1}
.modal-head{
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.modal-head h3{margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em}
.modal-body{flex: 1; overflow-y: auto; padding: 18px 22px}
.modal-body .order-line{
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.modal-body .order-line:last-child{border-bottom: 0}
.modal-body .order-line img{
  width: 48px; height: 48px; border-radius: 10px;
  object-fit: cover; background: var(--pink-50);
}
.modal-body .order-line .nm{font-size: 13px; color: var(--ink); font-weight: 500; line-height: 1.3}
.modal-body .order-line .qp{font-size: 11px; color: var(--ink-3); margin-top: 2px}
.modal-body .order-line .total{font-weight: 700; font-size: 13px; white-space: nowrap}
.modal-body .receipts{
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.modal-body .receipts a{
  font-size: 12px; color: var(--pink-700); font-weight: 600;
  background: var(--pink-50); padding: 6px 12px; border-radius: 999px;
}
.modal-body .receipts a:hover{background: var(--pink-100)}
.modal-body .summary{
  background: var(--bg);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.modal-body .summary b{color: var(--ink); font-weight: 800}

/* ============================================================================
   TOAST
   ========================================================================= */
.toast-root{
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  align-items: center;
}
.toast{
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-pop);
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px);
  animation: toast-in .25s cubic-bezier(.2,.8,.2,1) forwards;
  max-width: 480px;
}
.toast.leave{animation: toast-out .25s ease forwards}
.toast .check{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--pink-500);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.toast.success{background: oklch(28% 0.06 150)}
.toast.success .check{background: var(--green)}
.toast.error{background: oklch(28% 0.10 25)}
.toast.error .check{background: var(--rose)}
.toast.info{background: var(--ink)}
.toast.info .check{background: var(--pink-500)}

@keyframes toast-in{
  from{opacity: 0; transform: translateY(20px)}
  to  {opacity: 1; transform: translateY(0)}
}
@keyframes toast-out{
  from{opacity: 1; transform: translateY(0)}
  to  {opacity: 0; transform: translateY(20px)}
}

/* ============================================================================
   FADE IN ANIMATIONS
   ========================================================================= */
.fadein  { animation: fadeIn .5s ease both }
.fadein-2{ animation: fadeIn .5s ease both .08s }
@keyframes fadeIn{ from{opacity: 0; transform: translateY(8px)} to{opacity: 1; transform: translateY(0)} }

/* ============================================================================
   LOGIN PAGE
   ========================================================================= */
.login-shell{
  min-height: calc(100vh - 73px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.login-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 480px; width: 100%;
  box-shadow: var(--shadow-pop);
  position: relative;
  overflow: hidden;
}
.login-card::before{
  content: ''; position: absolute;
  top: -80px; right: -80px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--pink-50);
  z-index: 0;
}
.login-card > *{position: relative; z-index: 1}
.login-card h1{margin: 0 0 4px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em}
.login-card .lead{color: var(--ink-3); font-size: 14px; margin: 0 0 24px}

.tabs{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--bg);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}
.tab-btn{
  padding: 10px;
  border-radius: 9px;
  font-weight: 600; font-size: 13px;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.tab-btn.active{background: #fff; color: var(--pink-700); box-shadow: var(--shadow-card)}

.field{display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px}
.field label{font-size: 12px; color: var(--ink-3); font-weight: 600}
.field .input{height: 44px}
.field textarea.input{height: auto}
.field .code-input{
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 22px;
  letter-spacing: 0.5em;
  padding: 0 0 0 0.5em;
}

.btn-primary{
  width: 100%; padding: 12px;
  background: var(--pink-500); color: #fff;
  border-radius: 12px;
  font-weight: 700; font-size: 14px;
  transition: background .15s;
}
.btn-primary:hover{background: var(--pink-700)}
.btn-primary:disabled{background: var(--line-2); color: var(--ink-3); cursor: not-allowed}
.btn-secondary{
  width: 100%; padding: 10px;
  background: var(--bg); color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 600; font-size: 13px;
  transition: all .15s;
}
.btn-secondary:hover{background: var(--line); color: var(--ink)}

.login-error{
  margin-top: 14px;
  padding: 10px 12px;
  background: oklch(97% 0.05 25);
  border: 1px solid oklch(85% 0.10 25);
  border-radius: 10px;
  color: oklch(40% 0.20 25);
  font-size: 13px;
}
.login-error:empty{display: none}

.saved-block{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.saved-block summary{
  cursor: pointer; font-size: 13px; color: var(--ink-3); font-weight: 600;
  list-style: none;
}
.saved-block summary::-webkit-details-marker{display: none}
.saved-block summary::before{content: '▸ '; color: var(--pink-500)}
.saved-block[open] summary::before{content: '▾ '}
.saved-block .body{margin-top: 10px}
.saved-account{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.saved-account:last-child{border-bottom: 0}
.saved-account .who{font-family: ui-monospace, monospace; font-size: 13px}
.saved-account .who .preview{color: var(--ink-3); font-size: 11px; margin-left: 4px}
.saved-account .use{
  background: var(--pink-500); color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  transition: background .15s;
}
.saved-account .use:hover{background: var(--pink-700)}
.saved-account .use:disabled{opacity: .5; cursor: wait}

.import-block{margin-top: 12px}
.import-block summary{font-size: 12px; color: var(--ink-3); cursor: pointer}
.import-block textarea.input{
  margin-top: 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.import-block .import-btn{
  margin-top: 8px;
  padding: 6px 14px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600; font-size: 12px;
  transition: all .15s;
}
.import-block .import-btn:hover{border-color: var(--pink-300); color: var(--pink-700)}

/* ============================================================================
   RESPONSIVE (минимальная адаптация)
   ========================================================================= */
@media (max-width: 1180px){
  .shell{grid-template-columns: 200px 1fr 280px; gap: 16px; padding: 16px}
  .topbar-inner{grid-template-columns: 200px 1fr auto; padding: 12px 16px}
  .shelf{grid-template-columns: repeat(3, 1fr); gap: 14px}
  .orders-grid{grid-template-columns: 1fr}
}
@media (max-width: 900px){
  .shell{grid-template-columns: 1fr; padding: 12px}
  .topbar-inner{grid-template-columns: auto 1fr auto; padding: 10px 12px}
  .topbar-inner .logo span{display: none}
  .sidebar{position: static; max-height: none; padding: 8px; overflow-x: auto}
  .sidebar > *{display: none}
  .sidebar > .scroller{display: flex; gap: 8px; overflow-x: auto}
  .rail{position: static; max-height: none}
  .shelf{grid-template-columns: repeat(2, 1fr); gap: 12px}
}

/* ============================================================================
   SKELETON LOADERS — для loadProfile first paint (boot 5-15s через прокси)
   ========================================================================= */
@keyframes skel-pulse {
  0%, 100% { opacity: 1 }
  50%      { opacity: 0.5 }
}

.skeleton-row {
  height: 56px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--pink-50) 0%, var(--pink-100) 50%, var(--pink-50) 100%);
  border-radius: 14px;
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.skeleton-row:nth-child(2) { animation-delay: 0.15s }
.skeleton-row:nth-child(3) { animation-delay: 0.3s }

.skeleton-text {
  display: inline-block;
  color: var(--ink-3);
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.skeleton-text::after {
  content: '...';
  display: inline-block;
  width: 14px;
  text-align: left;
  animation: skel-dots 1.4s steps(4, end) infinite;
  overflow: hidden;
  vertical-align: bottom;
}
@keyframes skel-dots {
  0%   { width: 0 }
  100% { width: 14px }
}

.skeleton-shelf-card {
  height: 220px;
  background: linear-gradient(135deg, var(--pink-50) 0%, var(--pink-100) 100%);
  border-radius: 18px;
  animation: skel-pulse 1.6s ease-in-out infinite;
}
.skeleton-shelf-card:nth-child(2) { animation-delay: 0.15s }
.skeleton-shelf-card:nth-child(3) { animation-delay: 0.3s }
.skeleton-shelf-card:nth-child(4) { animation-delay: 0.45s }

.profile-error-box {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--pink-50);
  color: var(--rose);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}
.profile-retry-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--pink-100);
  border-radius: 12px;
  background: #fff;
  color: var(--rose);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.profile-retry-btn:hover { background: var(--pink-50) }