@font-face {
  font-family: Vazirmatn;
  src: url("fonts/vazirmatn-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C, U+200D, U+0660-0669;
}

@font-face {
  font-family: Vazirmatn;
  src: url("fonts/vazirmatn-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --ink: #17324d;
  --muted: #5c7388;
  --line: #d5e8f5;
  --paper: #e7f3fb;
  --card: #fff;
  --accent: #2c5ead;
  --accent-dark: #1e457f;
  --mid: #1591dc;
  --sky: #4bb8fa;
  --pale: #c4e2f5;
  --ok: #0d7a45;
  --ok-bg: #eef8f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Vazirmatn, Tahoma, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 320px at 100% -40px, #d9eefb, transparent 70%),
    var(--paper);
}

body > main { flex: 1 0 auto; width: 100%; }

button, input { font-family: inherit; }

.top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 22px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(23, 50, 77, 0.05);
  backdrop-filter: blur(14px);
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.menu a:hover,
.menu a.on {
  background: #e7f3fb;
  color: var(--accent-dark);
}

.top-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 14px;
  width: 100%;
  min-width: 0;
}
.top-main .brand { flex: none; min-width: 0; }
.top-main .head-tools { margin-inline-start: 0; flex: none; }
.shop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.shop-nav-item { position: relative; }
.shop-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.shop-nav-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.shop-nav-toggle:hover,
.shop-nav-toggle.on,
.shop-nav-item.open > .shop-nav-toggle,
.shop-nav-item:hover > .shop-nav-toggle,
.shop-nav-item:focus-within > .shop-nav-toggle {
  background: #e7f3fb;
  color: var(--accent-dark);
}
.shop-nav-pop {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  max-height: 360px;
  overflow: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(23, 50, 77, 0.12);
  z-index: 30;
}
.shop-nav-item:hover > .shop-nav-pop,
.shop-nav-item:focus-within > .shop-nav-pop,
.shop-nav-item.open > .shop-nav-pop { display: grid; }
.shop-nav-pop a {
  display: block;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.shop-nav-pop a:first-child { box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 4px; }
.shop-nav-pop a:hover,
.shop-nav-pop a.on { background: #e7f3fb; color: var(--accent-dark); }

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}

.head-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
.head-tool {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.head-tool:hover { background: #e7f3fb; color: var(--accent-dark); }
.head-tool .badge {
  position: absolute;
  top: -5px;
  left: -5px;
  font-size: 11px;
}
.account-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(23, 50, 77, 0.12);
}
.account-name {
  margin: 0;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 800;
}
.account-pop a,
.account-pop button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
}
.account-pop a:hover,
.account-pop button:hover { background: #e7f3fb; color: var(--accent-dark); }
.account-pop a .badge { margin-inline-start: auto; }
body.drawer-open { overflow: hidden; }
.cart-shade {
  position: fixed;
  inset: 0;
  z-index: 40;
  border: 0;
  background: rgba(23, 50, 77, 0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.55s;
}
.cart-shade.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0s;
}
.cart-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  background: #fff;
  box-shadow: 16px 0 40px rgba(23, 50, 77, 0.16);
  transform: translateX(-105%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.16, 0.84, 0.32, 1), opacity 0.5s ease, visibility 0s linear 0.55s;
}
.cart-drawer.open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 0.55s cubic-bezier(0.16, 0.84, 0.32, 1), opacity 0.5s ease, visibility 0s;
}
.drawer-head,
.drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.drawer-head { border-bottom: 1px solid var(--line); }
.drawer-foot {
  flex-direction: column;
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.drawer-foot button {
  display: block;
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.drawer-foot button:disabled { opacity: 0.55; cursor: default; }
.drawer-body {
  flex: 1;
  overflow: auto;
  padding: 12px 16px 16px;
}
.drawer-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.drawer-photo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(160deg, #f4faff, var(--pale));
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
}
.drawer-photo img { width: 100%; height: 100%; object-fit: cover; }
.drawer-item h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drawer-item h3 a { color: inherit; text-decoration: none; }
.drawer-item p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.drawer-item p span { color: var(--ink); font-weight: 800; }

.manage {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.manage:hover { color: var(--accent-dark); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.brand strong { display: block; font-size: 18px; }
.brand small { color: var(--muted); }
.mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--mid), var(--accent));
  color: white;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 8px 16px rgba(44, 94, 173, 0.25);
  overflow: hidden;
}
.mark.has-logo { background: #fff; }
.mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

h1, h2 { margin: 0; font-weight: 750; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }

.status {
  margin: 0;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.status.ok { color: var(--accent); border-color: var(--sky); background: #f3f9fd; }
.status.wait { color: var(--mid); border-color: var(--pale); background: #f7fbfe; }

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
  padding: 20px 28px 40px;
}

.shop-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 14px;
}

.search {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  flex: 1 1 220px;
  max-width: 420px;
}
.top-main .search { max-width: none; min-width: 0; }
.search > .icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 12px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.top .search input[type="search"] { padding-inline-start: 38px; }

input[type="search"], input[type="number"], .profile input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 15px;
  color: var(--ink);
}

input:focus { outline: 2px solid var(--sky); border-color: var(--accent); }

.goods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.good {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
  border: 1px solid rgba(213, 232, 245, 0.9);
  border-radius: 18px;
  padding: 8px;
  min-width: 0;
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.good:hover {
  z-index: 3;
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(44, 94, 173, 0.12);
}

.thumb {
  aspect-ratio: 1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, #f4faff, var(--pale));
  color: var(--accent);
  font-size: 32px;
  font-weight: 800;
  text-decoration: none;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.good h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  min-height: 0;
}
.good .meta { margin: 0; line-height: 1.4; }
.good .buy { gap: 6px; }
.good .buy button { padding: 7px 8px; }
.saves {
  position: absolute;
  z-index: 2;
  top: 16px;
  inset-inline-end: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.save {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: #60758a;
  box-shadow: 0 6px 16px rgba(23, 50, 77, 0.16);
  cursor: pointer;
}
.save .icon { width: 15px; height: 15px; }
.save.on[data-act="wish"] { color: #e11d2e; }
.save.on[data-act="later"] { color: #f5c200; }
.save::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 4;
  top: 50%;
  left: calc(100% + 8px);
  right: auto;
  transform: translateY(-50%);
  padding: 5px 8px;
  border-radius: 8px;
  background: #17324d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.save:hover::after,
.save:focus-visible::after { opacity: 1; }
.good h3 a { color: inherit; text-decoration: none; }
.good h3 a:hover { color: var(--accent); }

main.sheet.good-page { max-width: 1080px; }
.showcase {
  display: grid;
  grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
  grid-template-areas:
    "crumb back"
    "photo card"
    "thumbs ."
    "story story"
    "related related";
  column-gap: 28px;
  row-gap: 12px;
  align-items: stretch;
}
.gallery { display: grid; gap: 12px; }
.crumb {
  grid-area: crumb;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
}
.crumb a {
  color: var(--accent-dark);
  text-decoration: none;
}
.crumb a:hover { color: var(--accent); }
.crumb [aria-current="page"] { color: var(--ink); }
.crumb .icon { width: 14px; height: 14px; color: var(--sky); }
.frame { position: relative; grid-area: photo; height: 100%; }
.back-shop {
  grid-area: back;
  justify-self: left;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-left: 0;
  margin-right: 0;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(44, 94, 173, 0.08);
}
.back-shop .icon { width: 16px; height: 16px; }
.back-shop:hover {
  background: #f4f9fd;
  border-color: var(--sky);
  color: var(--accent);
}
.frame .saves { top: 12px; inset-inline-end: 12px; }
.stage {
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 1;
  position: relative;
  border-radius: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(44, 94, 173, 0.1);
  cursor: zoom-in;
  transform: translateZ(0);
  clip-path: inset(0 round 28px);
}
.stage img,
.stage-photo {
  width: 100%;
  height: 100%;
}
.stage-photo {
  position: absolute;
  inset: 0;
  transform: scale(1);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  transition: transform 0.48s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.stage img {
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.stage.is-zooming .stage-photo { transform: scale(2.15); }
.stage-photo img.photo-enter,
.photo-view img.photo-enter {
  opacity: 0;
  transform: translateX(var(--enter-x, 28px)) scale(1.035);
  transition: none;
}
.photo-ghost {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  .stage-photo,
  .stage img,
  .photo-ghost,
  .photo-view img,
  .film button,
  .photo-lightbox-film button,
  .cart-drawer,
  .cart-shade {
    transition: none;
  }
}
.gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(20, 40, 80, 0.16);
  cursor: pointer;
}
.gallery-nav.left { left: 12px; }
.gallery-nav.right { right: 12px; }
.gallery-nav .icon { width: 20px; height: 20px; }
.gallery-nav:hover { background: #fff; }
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 18px 18px;
  background: #0c1422;
}
.photo-lightbox[hidden] { display: none; }
body.photo-open { overflow: hidden; }
.photo-lightbox-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  cursor: pointer;
}
.photo-lightbox-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: min(1080px, 100%);
  display: grid;
  place-items: center;
}
.photo-lightbox-stage img,
.photo-view img {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.photo-view {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 100%;
  max-height: calc(100vh - 190px);
  overflow: hidden;
  border-radius: 16px;
  clip-path: inset(0 round 16px);
}
.photo-view .photo-ghost {
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
}
.photo-lightbox-film {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: min(1080px, 100%);
}
.photo-lightbox-film button {
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.photo-lightbox-film button.on {
  border-color: #fff;
  box-shadow: 0 0 0 3px #fff;
}
.photo-lightbox-film img { width: 100%; height: 100%; object-fit: cover; }
.mark-letter {
  font-size: 72px;
  font-weight: 800;
  color: var(--accent);
}
.film { display: flex; flex-wrap: wrap; gap: 8px; }
.film button {
  width: 76px;
  aspect-ratio: 1;
  height: auto;
  padding: 0;
  border-radius: 14px;
  border: 2px solid transparent;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.film button.on { border-color: var(--accent); box-shadow: none; }
.film img { width: 100%; height: 100%; object-fit: cover; }
.summary, .story {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 16px 36px rgba(23, 50, 77, 0.05);
}
.summary {
  grid-area: card;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.film { grid-area: thumbs; }
.story { grid-area: story; }
.related { grid-area: related; }
.summary h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.45; }
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.rating strong { color: var(--ink); font-size: 16px; }
.stars {
  position: relative;
  display: inline-block;
  direction: ltr;
  color: #d5dee6;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
}
.stars::before,
.stars::after { content: "★★★★★"; }
.stars::after {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--value) * 20%);
  overflow: hidden;
  color: #f5b301;
  white-space: nowrap;
}
.comment .stars, .note .stars { font-size: 15px; }
.rate-field { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.star-pick { display: flex; flex-direction: row-reverse; gap: 2px; width: max-content; direction: ltr; }
.talk .star-pick button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d5dee6;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.talk .star-pick:hover button { color: #d5dee6; background: transparent; }
.talk .star-pick button.on,
.talk .star-pick button.on ~ button,
.talk .star-pick button:hover,
.talk .star-pick button:hover ~ button { color: #f5b301; background: transparent; }
.summary .price { margin-top: 14px; font-size: 30px; }
.summary .buy { margin-top: auto; padding-top: 16px; }
.summary .tools { margin-top: 10px; }
.story h2, .related h2 { margin: 0 0 8px; font-size: 18px; }
.related-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
}
.related-card {
  flex: 0 0 180px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
}
.related-card strong {
  font-size: 14px;
  line-height: 1.5;
}
.related-photo {
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f4faff, var(--pale));
  color: var(--accent);
  font-size: 28px;
  font-weight: 800;
}
.related-photo img { width: 100%; height: 100%; object-fit: cover; }
.related-card .price { font-size: 15px; }
.related-chosen { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.related-chosen button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--pale);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.related-chosen button span { color: var(--muted); font-weight: 500; }
.related-pick { position: relative; }
.related-menu {
  position: absolute;
  z-index: 8;
  inset-inline: 0;
  top: calc(100% - 4px);
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(23, 50, 77, 0.12);
}
.related-menu[hidden] { display: none; }
.related-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.7fr) minmax(0, 1fr) 128px;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: right;
}
.related-row.head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7fbfe;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
button.related-row { cursor: pointer; }
button.related-row:hover { background: var(--pale); }
.related-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 13px; }
.specs {
  width: 100%;
  margin: 14px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-size: 14px;
}
.specs th, .specs td {
  padding: 8px 12px;
  text-align: start;
  border-bottom: 1px solid var(--line);
}
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th {
  width: 92px;
  font-weight: 700;
  color: var(--muted);
  background: #f7fbfe;
}
.specs .swatch { margin-inline-end: 8px; }
.good-copy { white-space: pre-wrap; margin: 0; line-height: 1.9; }
.talk {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 16px 36px rgba(23, 50, 77, 0.05);
}
.talk h2 { margin: 0 0 4px; font-size: 18px; }
.comment { padding: 14px 0; border-top: 1px solid var(--line); }
.comment-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
}
.comment-list > .comment {
  flex: 0 0 min(360px, 86%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px 12px;
  background: #f7fbfe;
}
.comment-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.comment-who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.comment-who strong { color: var(--ink); font-size: 15px; }
.comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.comment-date { color: var(--muted); font-size: 12px; }
.comment-list > .comment > p { margin: 0; }
.comment-list > .empty { flex: 1 0 100%; border: 0; background: transparent; }
.comment-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.comment-head strong { color: var(--ink); font-size: 15px; }
.comment > p, .comment-text { margin: 8px 0 0; line-height: 1.8; white-space: pre-wrap; }
.shop-reply {
  margin-top: 10px;
  background: #f4f9fd;
  border-radius: 14px;
  padding: 10px 12px;
}
.shop-reply strong { color: var(--accent); font-size: 13px; }
.shop-reply p { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.8; }
.talk form, .reply-box, .qa-box { display: grid; gap: 8px; margin-top: 12px; }
.talk textarea, .reply-box textarea, .qa-box textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}
.talk form button, .reply-box button, .qa-box button {
  justify-self: start;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.qa-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  align-items: stretch;
}
.qa-list > .empty { flex: 1 0 100%; }
.question {
  flex: 0 0 min(360px, 86%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px 12px;
  background: #f7fbfe;
}
.question > p { margin: 0; }
.question > .answer-form { margin-top: auto; }
.question.more { cursor: pointer; }
.question.more:hover { border-color: var(--sky); }
.qa-count { margin: 0; color: var(--muted); font-size: 13px; }
.qa-more {
  margin-top: 8px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.answer-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  margin-top: 10px;
  padding-bottom: 4px;
}
.answer-row > .answer {
  flex: 0 0 min(260px, 88%);
  scroll-snap-align: start;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}
.answer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qa-all .answer { margin-top: 10px; }
.answer.shop {
  background: #f4f9fd;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.answer.shop strong { color: var(--accent); }
.answer p, .qa-all p { margin: 0; white-space: pre-wrap; line-height: 1.8; }
.answer .comment-head button {
  border: 0;
  background: transparent;
  color: #9a3b2f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.qa-pop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(23, 50, 77, 0.45);
}
.qa-pop[hidden] { display: none; }
.qa-sheet {
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;
  background: #fff;
  border-radius: 24px;
  padding: 18px 18px 8px;
  box-shadow: 0 24px 60px rgba(23, 50, 77, 0.2);
}
.qa-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.qa-pop-head h3 { margin: 0; font-size: 18px; line-height: 1.6; }
.qa-close {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.qa-all { margin: 8px 0 12px; }
body.pop-open { overflow: hidden; }
.note-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  align-items: stretch;
}
.note-list > .empty { flex: 1 0 100%; }
.note {
  flex: 0 0 min(360px, 82%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.note > .review-ops { margin-top: auto; }
.note .comment-head a { color: var(--accent); font-weight: 700; text-decoration: none; }
.review-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.review-ops button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
  border-radius: 12px;
  padding: 7px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.review-ops button[data-act="delete"] { color: #9a3b2f; }
#comments .chips { margin-top: 0; }

.meta, .empty, .lede { color: var(--muted); font-size: 13px; line-height: 1.7; }
.lede { margin: 8px 0 12px; }

.price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}
.price small { font-size: 12px; font-weight: 500; color: var(--muted); margin-right: 4px; }

.stock {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}
.stock.in { color: var(--mid); }
.stock.out { color: #9a3b2f; }
.warehouse { margin: 0; color: var(--muted); font-size: 12px; }

.buy {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  margin-top: auto;
}

[hidden] { display: none !important; }

.filter-card {
  position: sticky;
  top: 92px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.05);
}
.filter-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 18px;
}
.filter-card form { display: grid; gap: 0; }
.filter-block {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.filter-block:first-child { padding-top: 2px; }
.filter-block h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.filter-card label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.filter-card .check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7fbfe;
  color: var(--ink);
  font-weight: 700;
}
.price-slider { gap: 10px; }
.price-scale {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.price-scale span { white-space: nowrap; }
.price-count {
  justify-self: center;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pale);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
}
.price-track {
  position: relative;
  height: 32px;
  direction: rtl;
}
.price-rail,
.price-fill {
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  transform: translateY(-50%);
}
.price-rail { right: 11px; left: 11px; background: #d7ebf8; }
.price-fill { background: var(--accent); }
.price-track input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none;
}
.price-track input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}
.price-track input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(23, 50, 77, 0.18);
  cursor: grab;
}
.price-track input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
  border: 0;
}
.price-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(23, 50, 77, 0.18);
  cursor: grab;
}
.filter-card select {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.filter-card .chips { margin: 0; }
.filter-card .ghost { width: 100%; margin-top: 14px; }
.filter-card #myCar {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.filter-card #myCar:hover,
.filter-card #myCar.on { background: var(--accent-dark); }

.profile { display: grid; gap: 14px; }
.profile label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.profile-board {
  display: grid;
  gap: 14px;
  max-width: 680px;
}
.profile-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.05);
}
.profile-card h2 { margin: 0; font-size: 16px; }
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.profile-grid .span-2 { grid-column: 1 / -1; }
.profile-card button[type="submit"] { justify-self: start; min-width: 148px; }
.address-form { max-width: 680px; margin-top: 14px; }
.address-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.address-form-actions .ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
}
.address-form-actions .ghost:hover { background: var(--pale); color: var(--accent-dark); }
.address-list { display: grid; gap: 10px; margin-top: 14px; }
.address-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.address-card.is-default {
  background: #f4f9fd;
  border-color: #b9ddf4;
}
.address-card.is-editing { border-color: var(--accent); }
.address-pin {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #e7f3fb;
  color: var(--accent);
}
.address-card.is-default .address-pin { background: #fff; }
.address-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.address-title h3 { margin: 0; font-size: 16px; }
.address-line { margin: 4px 0 0; line-height: 1.75; }
.address-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.address-facts span { display: inline-flex; align-items: center; gap: 5px; }
.address-facts .icon { width: 15px; height: 15px; }
.address-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 2; }
.address-actions button {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.address-actions .danger { color: #9a3b2f; }
.address-card.is-default .address-actions button { background: transparent; }

.profile button, .buy button, .who button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  background: var(--accent);
  color: white;
  font-weight: 700;
}
.buy button, .tools button, .side button { width: 100%; }
.buy button:hover, .profile button:hover { background: var(--accent-dark); }
.who { display: grid; gap: 4px; margin-bottom: 8px; padding: 12px; border-radius: 14px; background: #f4f9fd; }
.who h3 { margin: 0; font-size: 16px; }
.who button { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.orders-head { margin: 18px 0 10px; }

button:disabled { opacity: 0.55; cursor: default; }

.orders { display: grid; gap: 10px; }
.order {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(23, 50, 77, 0.04);
}
.customer-order {
  cursor: pointer;
  display: grid;
  gap: 12px;
  padding: 16px;
}
.customer-order-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.customer-order-id strong { display: block; font-size: 15px; }
.customer-order-id .meta,
.customer-order-note p { margin: 0; }
.customer-order-id .meta { margin-top: 2px; }
.customer-order-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.customer-order-total {
  color: var(--accent-dark);
  font-size: 15px;
  white-space: nowrap;
}
.customer-order .order-lines {
  margin: 0;
  gap: 2px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}
.customer-order-note { display: grid; gap: 4px; }
.customer-order .order-goods {
  margin: 0;
  max-height: none;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.customer-order .order-good {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
}
.customer-order .order-good-photo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}
.customer-order .order-good-body h3 { font-size: 13.5px; line-height: 1.55; }
.customer-order .order-good-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 0;
}
.customer-order .order-good-sum .price {
  margin: 0;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
}
.customer-order .order-good-sum span:last-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.customer-order .row-actions { margin: 0; }
.customer-order .row-actions button { padding: 8px 14px; font-size: 13px; }
.track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 2px 0 0;
  padding: 8px 0 0;
  list-style: none;
}
.track li {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
  text-align: center;
  color: #8aa0b3;
  font-size: 11px;
  line-height: 1.5;
}
.track li small {
  display: block;
  max-width: 8.5em;
  padding: 0 4px;
}
.track li i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d5e1eb;
  box-shadow: 0 0 0 4px #fff;
}
.customer-order.open { background: #f7fbfe; }
.customer-order.open .track li i { box-shadow: 0 0 0 4px #f7fbfe; }
.track li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #d5e1eb;
}
.track li:first-child::before { display: none; }
.track li.on,
.track li.done { color: var(--accent-dark); font-weight: 700; }
.track li.on i,
.track li.done i { background: var(--accent); box-shadow: 0 0 0 4px #e5f3fb; }
.track li.on::before,
.track li.done::before { background: var(--accent); }
.order h3 { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.cart-line {
  --cart-row: 84px;
  display: grid;
  gap: 8px;
}
.cart-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cart-photo {
  flex: 0 0 var(--cart-row);
  width: var(--cart-row);
  height: var(--cart-row);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f4faff, var(--pale));
  color: var(--accent);
  font-size: 28px;
  font-weight: 800;
  text-decoration: none;
}
.cart-photo img { width: 100%; height: 100%; object-fit: cover; }
.cart-body {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--cart-row);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}
.cart-cat {
  margin: 0;
  min-height: 0;
  line-height: 1;
}
.cart-cat span {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pale);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}
.cart-body h3,
.cart-body .meta {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-body h3 { font-size: 14px; line-height: 1.35; }
.cart-body .meta { font-size: 12px; line-height: 1.35; }
.cart-line .qty-box {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  height: var(--cart-row);
  gap: 16px;
}
.qty-tools {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 100%;
  flex: 0 0 auto;
}
.cart-line .qty-step { height: 100%; }
.cart-line .qty-step .icon-btn {
  flex: 1 1 0;
  width: 36px;
  height: auto;
  min-height: 0;
}
.cart-line .qty-input {
  width: 64px;
  height: 100%;
}
.cart-line .qty-tools > .icon-btn {
  width: 44px;
  height: 100%;
}
.cart-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: auto;
  margin: 0;
  min-width: 0;
  text-align: right;
}
.cart-sum span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.cart-sum strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.cart-sum small { font-size: 12px; font-weight: 700; }
.cart-warn { margin: 0; }
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}
.pill.waiting { color: var(--accent); background: var(--pale); }
.pill.done { color: var(--accent-dark); background: #e5f4fc; }
.pill.draft { color: #5c6770; background: #eceff1; border: 1px solid #d5dbe0; }
.comment-head .pill.buyer {
  margin-inline-start: auto;
  flex-shrink: 0;
}
.pill.buyer { color: #1c7c45; background: #e8f6ee; }

.order dl {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 4px 8px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.order dt { color: var(--ink); }
.order dd { margin: 0; }

.login {
  width: 100%;
  max-width: 420px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}
.login h1 { font-size: 22px; margin-bottom: 8px; }
.login .modes { display: flex; gap: 8px; margin: 14px 0 4px; }
.login .modes button {
  flex: 1;
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--line);
}
.login .modes button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.login button[type="submit"] { width: 100%; }
.login[data-step="code"] button[type="submit"] { margin-top: 14px; }
.login .forgot { margin: 12px 0 0; text-align: center; }
.login .forgot button {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  padding: 0;
}
.login label { display: grid; gap: 6px; margin: 12px 0; color: var(--muted); font-size: 14px; }
.otp-phone {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4f9fd;
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: center;
  font-size: 14px;
}
.otp-phone strong {
  display: inline-block;
  margin-inline: 4px;
  color: var(--accent-dark);
  font-size: 16px;
  letter-spacing: 0.04em;
}
.login input, .login select, .profile select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.filters {
  display: flex;
  gap: 12px;
  align-items: end;
  margin: 16px 0;
}
.filters .search { flex: 1; }
.filters label.only {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  padding-bottom: 10px;
}
.admin-list { display: grid; gap: 10px; }
.admin-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.admin-row .sell {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}
.admin-row input[type="text"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
}
.admin-row button, .login button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--accent);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.admin-row .meta { margin: 4px 0 0; }
.pending { color: var(--accent); font-size: 12px; font-weight: 700; font-style: normal; }
.name-cell .pending {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--pale);
  color: var(--accent-dark);
  line-height: 1.6;
  white-space: nowrap;
}
.table-wrap {
  max-height: calc(100vh - 190px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.goods-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.goods-table th, .goods-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
.goods-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f8fc;
}
.goods-table th button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 0;
}
.goods-table tbody tr:hover { background: #f7fbfe; }
.goods-table .code { font-variant-numeric: tabular-nums; }
.name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 280px;
}
.name-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.name-cell .pill { flex: 0 0 auto; white-space: nowrap; }
.name-cell input, .goods-table td input {
  width: 100%;
  min-width: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  font: inherit;
  color: var(--ink);
}
.ops {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ops .icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}
.ops .icon-btn .icon { width: 16px; height: 16px; }
.ops button[data-act="save"], .ops button[data-act="cancel"] {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
}
.ops button[data-act="save"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ops .site-add.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ops a.icon-btn { text-decoration: none; }
.swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(23, 50, 77, 0.25);
  vertical-align: middle;
  flex: none;
}
.goods-table .swatch { margin-inline-end: 8px; }
.color-define { display: flex; align-items: end; gap: 12px; }
.color-define label { flex: 1; }
.settings-card input[type="color"] {
  width: 64px;
  height: 44px;
  padding: 4px;
  flex: none;
}
.color-preview, .term-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.term-board { max-width: 760px; }
.term-file { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.term-file button { width: auto; }
.term-add, .term-fields { display: contents; }
.term-board .term-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.term-board .term-add.color { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; }
.term-board .term-add.unit { grid-template-columns: minmax(0, 1fr) auto; }
.term-board .term-color { width: auto; }
.term-board input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}
.term-board input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.term-board input[type="color"]::-webkit-color-swatch,
.term-board input[type="color"]::-moz-color-swatch {
  border: 0 !important;
  border-radius: 12px;
}
.term-board .term-add label,
.term-move label { margin: 0; }
.term-list { list-style: none; margin: 16px 0 0; padding: 0; }
.term-row { padding: 8px 0; border-top: 1px solid var(--line); }
.term-row span { flex: 1; min-width: 0; }
.term-row .swatch { flex: 0 0 16px; width: 16px; height: 16px; }
.term-row input[type="color"] { flex: 0 0 44px; width: 44px; height: 32px; padding: 2px; }
.term-row.cats {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(140px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.term-row.cats.colors { grid-template-columns: auto minmax(0, 1.4fr) minmax(140px, 1fr) auto auto; }
.term-row.cats.units { grid-template-columns: minmax(0, 1fr) auto auto; }
.term-row.banks { grid-template-columns: minmax(0, 1fr) auto auto; }
.term-row.cats.colors input[type="color"] { width: 36px; height: 36px; }
.term-row .term-slug { color: var(--muted); font-size: 13px; direction: ltr; text-align: left; }
.term-row button.edit, .term-row button.quiet, .term-move button.quiet, .photo button {
  background: #fff;
  border: 1px solid var(--line);
}
.term-row button.edit { color: var(--accent-dark); }
.term-row button.quiet, .term-move button.quiet, .photo button.delete { color: #9a3b2f; }
.photo button.cover { color: var(--accent-dark); }
.term-move {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--pale);
}
.term-move p { margin: 0 0 10px; }
.term-move .term-actions { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 800px) {
  .term-board .term-add, .term-board .term-add.color, .term-board .term-add.unit, .term-row.cats, .term-row.cats.colors, .term-row.cats.units, .term-row.banks { grid-template-columns: 1fr; }
  .term-row.cats .term-slug { text-align: right; }
}
.color-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.color-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--ink);
}
.settings-card label.color-choice { display: inline-flex; width: auto; margin: 0; }
.color-choice input { position: absolute; opacity: 0; pointer-events: none; }
.color-choice:has(input:checked) { border-color: var(--accent); background: var(--pale); }
.photo-board { margin: 16px 0 8px; }
.photo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.photo-head .meta { margin: 0; color: var(--ink); font-weight: 800; }
.product-editor p.meta { margin: 16px 0 8px; color: var(--ink); font-weight: 800; }
.photo-head .lede { margin: 4px 0 0; font-size: 13px; }
.photo-head #pickPhoto { flex: 0 0 auto; margin: 0; padding: 8px 14px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.photo {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7fbfe;
}
.photo.cover { border-color: var(--accent); background: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.photo.pending { opacity: 0.8; }
.photo.pending .photo-actions { grid-template-columns: 1fr; }
.photo-wait { color: var(--muted); font-size: 12px; line-height: 34px; text-align: center; }
.photo img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; background: #f4f9fd; }
.photo-flag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.photo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: stretch;
}
.photo.cover .photo-actions { grid-template-columns: 1fr; }
.settings-card .photo button {
  height: 34px;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
}
.settings-card .photo button.cover { color: var(--accent-dark); }
.settings-card .photo button.delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  color: #9a3b2f;
}
.settings-card .photo.cover button.delete { width: 100%; }
.photo-empty {
  margin: 12px 0 0;
  padding: 18px 12px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.product-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settings-card .product-head h1 { margin: 0; }
.product-head > div:first-child { flex: 1 1 auto; min-width: 0; }
#nameLine { width: 100%; }
.product-head .lede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 8px 0 0;
}
.identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.settings-card .product-head h1.identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.settings-card .product-head h1.identity span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.settings-card .identity .icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}
.settings-card .identity .icon-btn .icon { width: 15px; height: 15px; }
.settings-card .identity.editing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#nameLine .identity.editing { width: 100%; }
#priceBit.editing { flex: 0 1 22rem; }
#priceBit.editing input { flex: 1 1 8rem; max-width: 11rem; }
.settings-card .identity.editing input {
  width: auto;
  flex: 1 1 16rem;
  min-width: 8rem;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.settings-card .identity.editing button {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 13px;
}
.publish-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.publish-bubble {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--pale);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}
.publish-bubble.done { color: var(--accent-dark); background: #e5f4fc; border-color: #c5e4f6; }
.publish-bubble.waiting { color: #5c6770; background: #eceff1; border-color: #d5dbe0; }
.product-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.product-actions #saveProduct,
.product-actions #publishProduct {
  flex: 1 1 0;
  width: auto;
  margin: 0;
}
@media (max-width: 640px) {
  .product-head { flex-wrap: wrap; }
  .publish-side { flex-basis: 100%; max-width: none; }
}
.product-page { display: grid; gap: 12px; }
.product-editor { display: grid; gap: 12px; }
.product-editor .settings-card { max-width: none; }
.seo-box h2, .related-card h2 { margin: 0 0 8px; font-size: 22px; }
@media (max-width: 640px) {
  .photo-head { align-items: stretch; flex-direction: column; }
  .photo-head #pickPhoto { width: 100%; }
}
.seo-count { color: var(--muted); font-size: 12px; }
.serp {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: #f7fbfe;
}
.serp-title { margin: 0; color: #1a4f9c; font-size: 18px; line-height: 1.5; }
.serp-url { margin: 2px 0 4px; color: #137333; font-size: 13px; direction: ltr; text-align: right; }
.serp-desc { margin: 0; color: #4d5156; font-size: 13px; line-height: 1.7; }
.seo-score { margin: 12px 0 0; font-weight: 800; }
.seo-score.ok { color: #1f8a4c; }
.seo-score.warn { color: #a56a08; }
.seo-score.bad { color: #c4372f; }
.seo-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.seo-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; }
.seo-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex: 0 0 auto; }
.seo-dot.ok { background: #1f8a4c; }
.seo-dot.warn { background: #d0891a; }
.seo-dot.bad { background: #c4372f; }
#saveProduct { display: block; width: 100%; margin-top: 0; }
.product-page .back { justify-self: start; }

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #9a3b2f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
}
.quick a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  text-decoration: none;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 700;
}
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tools button, .ghost, .chips button, .side button, .stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 700;
  cursor: pointer;
}
.tools button.on, .chips button.on, .side button.on { background: var(--pale); border-color: var(--sky); }
.ghost { background: transparent; }
.pill.bad { color: #9a3b2f; background: #fdecea; }
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.notice.unread {
  background: #f4f9fd;
  border-color: #b9ddf4;
  border-inline-start: 3px solid var(--mid);
}
.notice-bell {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e7f3fb;
  color: var(--accent);
}
.notice.read .notice-bell { background: #f4f7fa; color: var(--muted); }
.notice-copy p { margin: 0; line-height: 1.7; }
.notice.unread .notice-copy p { font-weight: 700; }
.notice-copy .meta { display: block; margin-top: 4px; text-align: right; }
.notice .ghost { white-space: nowrap; padding-inline: 12px; }
.home-note { display: grid; gap: 10px; }
.home-note h2 { margin: 0; font-size: 18px; }

main.sheet {
  display: block;
  max-width: 760px;
  margin-inline: auto;
}
main.sheet.checkout-page { max-width: 1080px; }
.checkout-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.checkout-head .lede { margin: 6px 0 0; }
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 380px);
  gap: 18px;
  align-items: start;
}
.checkout-basket h2,
.checkout-side h2 { margin: 0 0 12px; font-size: 18px; }
.checkout-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.checkout-line:first-of-type { border-top: 0; }
.checkout-line h3 { margin: 0; font-size: 15px; line-height: 1.6; }
.checkout-line h3 a { color: inherit; text-decoration: none; }
.checkout-line h3 a:hover { color: var(--accent); }
.checkout-line p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.checkout-line strong { font-size: 14px; white-space: nowrap; }
.checkout-photo {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(160deg, #f4faff, var(--pale));
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
}
.checkout-photo img { width: 100%; height: 100%; object-fit: cover; }
.checkout-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.checkout-total strong { font-size: 22px; }
.checkout-side { display: grid; gap: 14px; }
.checkout-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.checkout-block-head h2 { margin: 0; }
.choice-list { display: grid; gap: 8px; margin-bottom: 12px; }
.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}
.choice:has(input:checked) {
  border-color: var(--accent);
  background: #f4f9fd;
}
.choice input { margin-top: 4px; }
.choice strong { display: inline; }
.choice em {
  margin-inline-start: 8px;
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}
.choice small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.checkout-address { margin-top: 12px; }
.checkout-address label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.checkout-address input,
.checkout-address select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.checkout-form-actions { display: flex; gap: 8px; }
.checkout-address button[type="submit"] {
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
#finishPay {
  border: 0;
  border-radius: 14px;
  padding: 13px 16px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
#finishPay:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 800px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-head { align-items: stretch; flex-direction: column; }
}
.empty-cart { display: grid; justify-items: start; gap: 12px; }
a.ghost, a.stat { text-decoration: none; }
main.admin-desk { grid-template-columns: 250px minmax(0, 1fr); }
main.admin-desk.guest { grid-template-columns: minmax(0, 1fr); }
.admin-side { max-height: calc(100vh - 120px); overflow: auto; }
.admin-desk .stats .stat {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 84px;
  padding: 14px;
  text-align: right;
}
#panel, #dashboard { min-width: 0; max-width: 100%; }
#dashboard .dash-heroes {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
#dashboard .dash-hero {
  display: grid;
  gap: 6px;
  align-content: center;
  min-width: 0;
  min-height: 132px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #f3faff 0%, #fff 62%);
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.05);
}
#dashboard .dash-hero.alt { background: #fff; }
#dashboard .dash-hero span,
#dashboard .dash-hero small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
#dashboard .dash-hero strong {
  color: var(--accent-dark);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
#dashboard .dash-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}
#dashboard .dash-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: right;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(23, 50, 77, 0.04);
}
#dashboard .dash-link .icon {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  color: var(--mid);
}
#dashboard .dash-link span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
#dashboard .dash-link strong {
  color: var(--accent-dark);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
#dashboard .dash-link:hover {
  border-color: var(--sky);
  background: #f7fbfe;
}
#dashboard .dash-block {
  min-width: 0;
  max-width: 100%;
  margin: 16px 0 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.05);
}
#dashboard .dash-block h2 { margin: 0 0 12px; font-size: 16px; }
#dashboard .dash-block .table-wrap {
  max-width: 100%;
  max-height: 420px;
  overflow-x: auto;
  border-radius: 14px;
}
#dashboard .empty { margin: 0; }
@media (max-width: 800px) {
  #dashboard .dash-heroes,
  #dashboard .dash-links { grid-template-columns: 1fr; }
  #dashboard .dash-hero { padding: 14px 16px; }
  #dashboard .dash-hero strong { font-size: 22px; }
  #dashboard .dash-block { padding: 12px; }
  #dashboard .goods-table th,
  #dashboard .goods-table td { white-space: normal; }
}
.dash-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
#users .filters, #orders .filters { align-items: end; }
.order-date-title { display: inline-flex; align-items: center; gap: 4px; }
.goods-table th .order-date-filter {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-weight: 500;
}
.goods-table th .order-date-filter .icon { width: 14px; height: 14px; }
.goods-table th .order-date-filter.on,
.goods-table th .order-date-filter[aria-expanded="true"] {
  color: var(--accent-dark);
  background: var(--pale);
}
.order-date-pop {
  position: fixed;
  z-index: 40;
  width: 250px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.14);
}
.order-date-modes,
.order-date-actions { display: flex; gap: 6px; }
.order-date-modes button,
.order-date-actions button {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.order-date-modes button.on,
.order-date-actions button:not(.ghost) {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}
.order-date-pop label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.order-date-pop label[hidden] { display: none; }
.order-date-pop input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.order-date-pop .jdp-field > input { padding-left: 40px; }
.order-follow { white-space: normal; }
.follow-pair {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #f4f8fb;
}
.follow-pair button {
  border: 0;
  background: transparent;
  color: #8aa0b3;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}
.follow-pair button + button { border-inline-start: 1px solid var(--line); }
.follow-pair button.on {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.follow-pair button:disabled { opacity: 1; }
.order-pair strong,
.order-pair span { display: block; }
.order-pair span { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }
.order-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.order-row { cursor: pointer; }
.order-row.open { background: #f8fbfe; }
.order-detail td { white-space: normal; padding: 8px; background: #f8fbfe; }
.order-goods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}
.order-good {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.order-good-photo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f4faff, var(--pale));
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}
.order-good-photo img { width: 100%; height: 100%; object-fit: cover; }
.order-good-body { min-width: 0; }
.order-good-body h3 {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.order-good-body .meta,
.order-good-body .price { margin: 1px 0 0; white-space: normal; }
.order-good-body .meta { font-size: 11px; }
.order-good-body .price { font-size: 12px; }
#addUser {
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
#goods .filters { align-items: stretch; }
#goods .filters .search { max-width: none; flex: 1 1 auto; min-width: 0; }
#parsianBar { align-items: center; width: 100%; }
.sync-bubble {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  margin-inline-start: auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pale);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.sync-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sync-log li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}
.sync-log p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.7; }
.sync-log time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sync-log .pill { flex: 0 0 auto; }
.side-label {
  margin: 10px 8px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.side-label:first-child { margin-top: 0; }
.settings-wrap {
  display: grid;
  gap: 12px;
  max-width: 560px;
}
.settings-wrap .chips { margin: 0; }
.settings-wrap .settings-card { max-width: none; }
.settings-card {
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.05);
}
.settings-card h1 { margin: 0 0 8px; font-size: 22px; }
.region-times { display: grid; gap: 8px; margin: 14px 0 0; }
.region-times div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7fbfe;
}
.region-times dt { margin: 0; color: var(--muted); font-size: 13px; }
.region-times dd { margin: 0; color: var(--ink); font-weight: 800; text-align: left; }
.settings-card label { display: grid; gap: 6px; margin: 12px 0; color: var(--muted); font-size: 13px; }
.settings-card label[hidden] { display: none; }
.settings-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}
.settings-card button.quiet, #addColor, #pickPhoto {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--line);
}
.settings-card input.file-pick {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.settings-card input, .settings-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
.settings-card button {
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.settings-card.factor-board { max-width: none; }
.settings-card.price-board { max-width: none; min-width: 0; }
.price-board h1 { margin-bottom: 4px; }
.price-board .lede { margin: 0 0 14px; }
.price-form {
  display: grid;
  grid-template-columns: max-content max-content minmax(12rem, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fbfe;
}
.price-seg {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.price-seg legend {
  padding: 0;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.price-seg .seg {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.settings-card.price-board .price-seg label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 4.6rem;
  padding: 10px 14px;
  border: 0;
  border-inline-start: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.settings-card.price-board .price-seg .seg label:first-child { border-inline-start: 0; }
.settings-card.price-board .price-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.settings-card.price-board .price-seg label:has(input:checked) {
  background: var(--accent);
  color: #fff;
}
.settings-card.price-board .price-value { margin: 0; min-width: 0; }
.settings-card.price-board .price-form button[type="submit"] {
  margin: 0;
  min-height: 46px;
  padding-inline: 22px;
}
.price-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.price-tools input[type="search"] { flex: 1 1 220px; width: auto; min-width: 0; margin: 0; }
.price-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-card.price-board .price-acts button,
.settings-card.price-board .list-pager button {
  background: #fff;
  color: var(--accent-dark);
  border: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 13px;
}
.price-board .table-wrap { max-height: none; max-width: 100%; }
.price-board .goods-table th.pick,
.price-board .goods-table td.pick {
  width: 1%;
  padding-inline: 10px;
  text-align: center;
}
.settings-card.price-board .goods-table td.pick input {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}
.price-board .goods-table td.name { white-space: normal; }
.price-board .meta {
  margin: 0;
  margin-inline-start: auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--pale);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .price-form { grid-template-columns: 1fr 1fr; }
  .settings-card.price-board .price-value,
  .settings-card.price-board .price-form button[type="submit"] { grid-column: 1 / -1; }
  .price-board .meta { margin-inline-start: 0; }
}
.factor-kinds {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.settings-card.factor-board .factor-kinds button {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 6px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.3;
}
.settings-card.factor-board .factor-kinds button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.settings-card.factor-board .factor-kinds button.on {
  background: var(--pale);
  border-color: var(--sky);
  color: var(--accent-dark);
}
.factor-board .factor-tools { margin: 0 0 8px; }
.factor-board .factor-tools input[type="search"] { width: 100%; }
.factor-cols {
  display: grid;
  grid-template-columns: 4.2rem 5.6rem 6.2rem minmax(0, 1fr) 7rem 9.4rem;
  gap: 8px;
  align-items: center;
}
.factor-cols.labels {
  padding: 0 8px 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.factor-card { border-top: 1px solid var(--line); }
.factor-card.open {
  margin: 8px 0;
  padding-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7fbfe;
}
.settings-card.factor-board button.factor-head {
  width: 100%;
  margin: 0;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: 500;
  font-size: 13px;
  text-align: right;
}
.factor-card.open .factor-head { font-weight: 700; }
.factor-num { font-weight: 800; }
.factor-party, .factor-money { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.factor-money { font-variant-numeric: tabular-nums; }
.factor-head .pill { justify-self: start; white-space: nowrap; }
.factor-body { padding: 0 8px 2px; }
.factor-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 8px 12px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.factor-facts div { display: grid; gap: 2px; min-width: 0; }
.factor-facts dt {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.factor-facts dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.factor-facts .wide { grid-column: 1 / -1; }
.factor-lines.table-wrap { max-height: none; overflow-x: auto; }
.factor-lines .goods-table td.wrap, .factor-lines .goods-table th.wrap { white-space: normal; }
.list-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.list-pager button {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}
.list-pager button[disabled] { opacity: 0.45; cursor: default; }
.factor-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.settings-card.factor-board .factor-pager button {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--line);
}
.settings-card.factor-board .factor-pager button[disabled] { opacity: 0.45; cursor: default; }
@media (max-width: 800px) {
  .factor-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factor-kinds button:first-child { grid-column: 1 / -1; }
  .factor-cols { grid-template-columns: 3.6rem minmax(0, 1fr) auto max-content; }
  .factor-cols .factor-kind, .factor-cols .factor-date { display: none; }
  .factor-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.settings-card button.related-row {
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
}
.settings-card button.related-row:hover { background: var(--pale); }
.settings-card .only { display: flex; align-items: center; gap: 8px; }
.settings-card .only input[type="checkbox"] {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}
.shop-options:not([hidden]) {
  display: grid;
  gap: 12px;
  margin: 4px 0 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbfe;
}
.user-edit { margin: 0 0 12px; }
.sms-actions { display: flex; gap: 8px; }
.sms-actions button { flex: 1; }
.sms-result {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.8;
}
.sms-result.ok { background: #e7f6ee; color: #146c43; }
.sms-result.bad { background: #fdecec; color: #9b2335; }
main.desk { grid-template-columns: 230px minmax(0, 1fr); }
.desk .shop-head { display: block; }
.desk .shop-head .meta { margin: 6px 0 0; }
main.desk.guest { grid-template-columns: minmax(0, 1fr); }
.side {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 6px;
  align-content: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
}
.side button { justify-content: flex-start; text-align: right; }
.side button .badge { margin-inline-start: auto; }
.side .quiet { color: var(--muted); }
.stack { display: grid; gap: 10px; margin-top: 12px; }
.desk .shop-head.saved-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.saved-head .lede { margin: 6px 0 0; }
.saved-head #orderAll, .saved-head #newAddress { width: auto; margin: 0; }
.saved-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.saved-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(23, 50, 77, 0.04);
}
.saved-photo {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f4faff, var(--pale));
  color: var(--accent);
  font-size: 28px;
  font-weight: 800;
  text-decoration: none;
}
.saved-photo img { width: 100%; height: 100%; object-fit: cover; }
.saved-body { min-width: 0; }
.saved-body h3 { margin: 2px 0 0; font-size: 15px; line-height: 1.55; }
.saved-body h3 a { color: inherit; text-decoration: none; }
.saved-body .meta,
.saved-body .price,
.saved-body .pending { margin: 4px 0 0; }
.saved-body .price { font-size: 14px; }
.saved-cat { margin: 0; }
.saved-cat span {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pale);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}
.saved-card .row-actions { margin-top: 10px; }
.saved-card .row-actions button { padding: 8px 12px; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.stat { text-align: right; }
.stat strong { display: block; font-size: 22px; color: var(--accent-dark); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.row-actions button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.row-actions .ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.row-actions .icon-btn,
.qty-box > .icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
}
.qty-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.qty-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qty-step .icon-btn {
  width: 32px;
  height: 20px;
  padding: 0;
  border-radius: 8px;
}
.qty-step .icon { width: 14px; height: 14px; }
.qty-input {
  width: 72px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.icon-btn.danger { color: #9a3b2f; border-color: #f3d4cf; }
.pay-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(160deg, #f4faff, #fff 55%);
  box-shadow: 0 16px 36px rgba(44, 94, 173, 0.1);
}
.pay-card .meta { margin: 0; }
.pay-card .price { margin: 2px 0 0; font-size: 26px; }
.pay-card #checkout {
  margin: 0;
  min-width: 190px;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(44, 94, 173, 0.22);
}
#orderAll, #checkout, #readAll, #newAddress {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
}
#readAll { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.profile input:disabled { background: #f4f9fd; color: var(--muted); }
label.only { display: flex; gap: 8px; align-items: center; color: var(--muted); }

.diagram-desk { display: grid; gap: 14px; }
.diagram-desk .meta { margin: 0; color: var(--ink); font-weight: 800; }
.diagram-ready {
  margin-right: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.diagram-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.diagram-upload, a.diagram-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.diagram-stage {
  position: relative;
  max-width: 920px;
  border-radius: 18px;
  overflow: hidden;
  background: #0e2238;
  line-height: 0;
}
.diagram-stage img { width: 100%; height: auto; display: block; cursor: crosshair; }
.diagram-pin, .board-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 2;
}
.diagram-pin.pending { background: var(--sky); cursor: default; }
.diagram-pick {
  display: grid;
  gap: 8px;
  max-width: 420px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.diagram-pick input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
}
.diagram-hits { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.diagram-hits button, .diagram-assigned button {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: right;
  cursor: pointer;
}
.diagram-hits button { display: grid; gap: 2px; padding: 8px 10px; }
.diagram-hits small, .diagram-assigned small { color: var(--muted); }
.diagram-assigned { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.diagram-assigned li {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.diagram-assigned button { padding: 6px 10px; color: #9a3412; }
.board-pin { cursor: pointer; text-decoration: none; }
.board-card {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  display: none;
  min-width: 150px;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 50, 77, 0.18);
  line-height: 1.5;
  text-align: right;
  pointer-events: none;
}
.board-pin:hover .board-card, .board-pin:focus .board-card { display: grid; }
.board-pin.flip .board-card { right: auto; left: 24px; }
.board-card strong { color: var(--ink); font-size: 13px; }
.board-card span { color: var(--accent); font-weight: 800; font-size: 12px; }
.board-page { display: grid; gap: 14px; }
.board-page h1 { margin: 0; font-size: 22px; }
a.diagram-shop {
  display: inline-flex;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.site-foot {
  margin-top: 8px;
  color: #e7f3fb;
  background: linear-gradient(165deg, #1e457f 0%, #17324d 58%, #12283d 100%);
}
.site-foot::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #4bb8fa, #1591dc, #2c5ead);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(280px, 1.25fr);
  gap: 28px 32px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px 26px;
}
.foot-grid.with-contact {
  grid-template-columns: minmax(200px, 0.8fr) minmax(220px, 1fr) minmax(280px, 1.15fr);
}
.foot-brand { display: grid; align-content: start; gap: 16px; }
.foot-about { margin: 0; color: #d7ebf8; font-size: 14px; line-height: 1.9; }
.logo-pick { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.logo-pick .mark { width: 72px; height: 72px; font-size: 32px; flex: none; }
.logo-pick .meta { margin: 0 0 8px; color: var(--ink); font-weight: 800; }
.logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-actions button { margin: 0; }
.logo-pick button.drop { color: #9a3b2f; }
.foot-brand .brand strong { color: #fff; }
.foot-brand .brand small { color: #c4e2f5; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-links a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.foot-links a:hover { background: rgba(255, 255, 255, 0.16); }
.foot-contact h2, .foot-map h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 16px;
}
.foot-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  color: #d7ebf8;
  font-size: 14px;
  line-height: 1.8;
}
.foot-line .icon { margin-top: 4px; color: #4bb8fa; }
.foot-line a { color: #fff; font-weight: 800; text-decoration: none; }
.foot-line a:hover { text-decoration: underline; }
.foot-frame {
  overflow: hidden;
  border-radius: 18px;
  background: #d7ebf8;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}
.foot-frame iframe { display: block; width: 100%; height: 300px; border: 0; }
.foot-copy {
  margin: 0;
  padding: 14px 28px 18px;
  border-top: 1px solid rgba(196, 226, 245, 0.16);
  color: #9ec3de;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 800px) {
  .admin-row { grid-template-columns: 1fr; }
  .top { padding: 10px 12px; gap: 8px; }
  .top-main { flex-wrap: wrap; }
  .top-main .brand { flex: 1 1 100%; min-width: 0; }
  .top .brand small { display: block; line-height: 1.35; }
  .menu { display: flex; }
  .menu a { padding-inline: 8px; }
  .status { max-width: none; }
  .search { max-width: none; }
  .top-main .search { flex: 1 1 auto; min-width: 0; order: 0; }
  .shop-nav { flex-wrap: wrap; justify-content: center; }
  .shop-nav-item { display: contents; }
  .shop-nav-item:hover > .shop-nav-pop,
  .shop-nav-item:focus-within > .shop-nav-pop { display: none; }
  .shop-nav-item.open > .shop-nav-pop {
    display: grid;
    position: static;
    order: 3;
    width: 100%;
    min-width: 0;
    max-height: 240px;
    box-shadow: none;
  }
  main { grid-template-columns: 1fr; padding: 16px 14px 32px; }
  .foot-grid, .foot-grid.with-contact { grid-template-columns: 1fr; padding: 26px 16px 20px; }
  .foot-frame iframe { height: 240px; }
  .foot-copy { padding-inline: 16px; }
  .filter-card { position: static; order: -1; }
  .good h3 { min-height: 0; }
  main.desk, main.admin-desk { grid-template-columns: 1fr; }
  .admin-side { position: static; max-height: none; display: grid; }
  .desk .side {
    position: static;
    display: flex;
    overflow: auto;
    gap: 6px;
  }
  .side button { white-space: nowrap; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-board { max-width: none; }
  .showcase {
    grid-template-columns: 1fr;
    grid-template-areas:
      "crumb"
      "photo"
      "thumbs"
      "back"
      "card"
      "story"
      "related";
  }
  .stage { height: auto; min-height: 0; }
  .summary { height: auto; }
  .summary .buy { margin-top: 16px; padding-top: 0; }
  .pay-card { flex-direction: column; align-items: stretch; }
  .pay-card #checkout { width: 100%; }
}

@media (max-width: 640px) {
  .cart-main { flex-wrap: wrap; align-items: stretch; gap: 10px; }
  .cart-photo { align-self: stretch; height: auto; min-height: var(--cart-row); }
  .cart-body { height: auto; min-height: var(--cart-row); gap: 3px; }
  .cart-body h3,
  .cart-body .meta,
  .cart-cat span {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .cart-sum { align-items: flex-start; width: auto; text-align: right; }
  .cart-line .qty-box {
    flex: 1 0 100%;
    flex-direction: row;
    height: auto;
    min-height: 56px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin-top: 2px;
    padding: 6px 8px;
    border-radius: 14px;
    background: #f4f9fd;
  }
  .qty-tools { height: 48px; }
}

.jdp-field { position: relative; display: block; }
.jdp-field > input { cursor: pointer; }
.login .jdp-field > input,
.settings-card .jdp-field > input { padding-left: 42px; }
.jdp-open,
.login .jdp-open,
.settings-card .jdp-open {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.jdp {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.14);
}
.jdp.up { top: auto; bottom: calc(100% + 6px); }
.jdp-head { display: flex; align-items: center; gap: 6px; }
.jdp-head button,
.login .jdp-head button,
.settings-card .jdp-head button {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}
.jdp select,
.login .jdp select,
.settings-card .jdp select {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.jdp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.jdp-grid .dow {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
}
.jdp-grid button,
.login .jdp-grid button,
.settings-card .jdp-grid button {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.jdp-grid button.today { box-shadow: inset 0 0 0 1px var(--accent); }
.jdp-grid button.on,
.login .jdp-grid button.on,
.settings-card .jdp-grid button.on { background: var(--accent); color: #fff; }
.jdp-grid button:hover:not(:disabled):not(.on) { background: var(--pale); }
.jdp-clear,
.login .jdp-clear,
.settings-card .jdp-clear {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}

body.hold-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(75, 184, 250, 0.18), transparent 36%),
    var(--paper);
}
.hold-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(640px, 100%);
  margin: 0;
  padding: 36px 28px 32px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  text-align: center;
  box-shadow: 0 18px 40px rgba(23, 50, 77, 0.08);
}
.hold-card .mark { margin: 0 auto 8px; }
.hold-card h1 { margin: 8px 0 10px; font-size: 30px; }
.hold-text {
  width: 100%;
  margin: 0 0 22px;
  color: var(--muted);
  line-height: 1.9;
  white-space: pre-wrap;
}
.hold-clock {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.hold-clock span {
  display: grid;
  gap: 4px;
  padding: 14px 4px;
  border-radius: 16px;
  background: #f4f9fd;
  color: var(--muted);
  font-size: 13px;
}
.hold-clock strong {
  color: var(--ink);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.hold-end {
  margin: 16px 0 0;
  color: var(--accent-dark);
  font-weight: 800;
}
.hold-bar {
  background: #17324d;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
}
.hold-when {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(88px, .7fr) minmax(88px, .7fr);
  gap: 12px;
  align-items: end;
}
@media (max-width: 800px) {
  .hold-when { grid-template-columns: 1fr; }
  .hold-clock strong { font-size: 22px; }
  .hold-card h1 { font-size: 24px; }
}