:root { color-scheme: light; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  background: fff;
}

#app {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,.08), rgba(0,0,0,0) 60%);
}

/* центрированный контейнер */
#stage {
  position: relative;
  width: 80vw;
  height: 80vh;            /* fallback */
  max-width: 1600px;
  max-height: 900px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  overflow: hidden;
}
@supports (height: 100svh){ #stage{ height: 80svh; } }
@supports (height: 100dvh){ #stage{ height: 80dvh; } }

@media (max-width: 640px){
  #stage{ width: 96vw; height: 86svh; border-radius: 12px; }
  #toolbar span{ display:none; }
  #legend{ max-width: 96vw; }
}

#host { position: absolute; inset: 0; overflow: hidden; }

#toolbar{
  position: absolute; top:16px; left:16px;
  display:flex; gap:8px; z-index:20;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 8px 10px; border-radius: 12px; align-items:center;
  border: 1px solid #e5e7eb;
}
#toolbar .sep { width:1px; height:20px; background:#e5e7eb; margin:0 4px; }
#toolbar button{
  border:1px solid #d1d5db; border-radius:10px; padding:6px 10px;
  background:#fff; color:#111827; cursor:pointer;
}
#toolbar button.active{ background:#eefce9; border-color:#9ae6a5; }
#toolbar button:active{ transform:translateY(1px); }
#toolbar span{ opacity:.8; font-size:12px; }

/* Легенда */
#legend{
  position: absolute; right:16px; top:16px; z-index:21;
  display:flex; gap:10px; align-items:center;
  padding:8px 10px; border-radius:12px;
  background: rgba(255,255,255,.92);
  border:1px solid #e5e7eb;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  max-width: 50vw; overflow-x:auto;
}
.legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.legend-swatch{
  width:12px; height:12px; border-radius:50%;
  border:1px solid #e5e7eb; flex:0 0 auto;
}
.legend-count{ opacity:.6; }

canvas{
  display:block; width:100%; height:100%;
  touch-action:none; -ms-touch-action:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  image-rendering: auto; /* ← помогает сделать total ещё четче на ряде WebKit */
}


/* тултип */
#tooltip{
  position:absolute; pointer-events:none;
  padding:8px 10px; border-radius:10px;
  background:rgba(17,24,39,.92); color:#fff;
  font-size:12px; line-height:1.3;
  white-space:nowrap; z-index:9999;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  transform:translate(-50%,-100%);
  opacity:0; transition: opacity .2s ease;
}
#tooltip.show{ opacity:1; }
#tooltip.fade-out{ opacity:0; transition: opacity .4s ease; }

/* loader */
#loader{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(255,255,255,.6);
  transition:opacity .18s ease;
  opacity:0; pointer-events:none; z-index:15;
}
#loader span{
  width:10px; height:10px; margin:0 4px; border-radius:50%;
  background:#16a34a; display:inline-block;
  animation:bounce 1s infinite ease-in-out;
}
#loader span:nth-child(2){ animation-delay:.15s; }
#loader span:nth-child(3){ animation-delay:.30s; }
@keyframes bounce{ 0%,80%,100%{transform:scale(.6);opacity:.6} 40%{transform:scale(1);opacity:1} }

/* бейдж */
#cartBadge{
  display:inline-block; min-width:18px; padding:0 6px;
  border-radius:999px; background:#111827; color:#fff;
  font-size:12px; line-height:18px; text-align:center; margin-left:6px;
}