:root{
  --thumb: 24px;   /* fixed thumb width */
  --gap: 6px;      /* left/right inner gap inside track */
  --primary: grey;
  --radius: 8px;
  --grey: #ddd;
  --bg: #111;
}

* { box-sizing: border-box; }
html,body { height: 100%; margin:0; }
body {
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display:flex;
  justify-content:center;
  padding:20px;
  color:#000;
}

/* container */
.container {
  width: 100%;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* primary button */
.btn {
  background: var(--primary);
  padding:14px;
  border-radius:var(--radius);
  text-align:center;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  user-select:none;
  transition: all .3s ease-in-out;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.btn:active { transform: translateY(1px) scale(.998); }

/* row for slider + avatar */
.row {
  display:flex;
  gap:16px;
}

/* slider container */
.slider-container {
  background:#fff;
  padding:10px 14px;
  border-radius:var(--radius);
  flex:1;
  display:flex;
  align-items:center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* range input appearance and smooth progress update */
.range {
  width:100%;
}
.range input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  border-radius:6px;
  background: linear-gradient(to right, var(--primary) 40%, #ccc 40%); /* set initial percentage inline via JS too */
  outline:none;
  transition: all .3s ease-in-out;
}
.range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--primary);
  cursor:pointer;
  margin-top:1px;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, left 0.3s ease;  /* 🔥 added */
}

.range input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.06);
  transition: transform 0.2s ease;
}


/* avatar select */
.avatar-select {
  background:#fff;
  padding:10px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all .3s ease-in-out;
}
.avatars {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 10px;
    flex-direction: row;
}
.avatars img{
  width:36px;
  height:36px;
  border-radius:var(--radius);
  margin-left:-8px;
  border:2px solid #fff;
  transform-origin:center;
  transition: all 420ms cubic-bezier(.2,.9,.3,1), opacity 360ms ease;
  opacity:1;
}
.avatar-placeholder { margin-left:8px; color:#222; font-size:12px }
.arrow {
    width: 24px;
    height: 24px;
}
/* search row */
.search {
  background:#fff;
  padding:12px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  gap:10px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all .3s ease-in-out;
}
.search input{
  border:none;
  outline:none;
  background:transparent;
  color:#555;
  flex:1;
}

/* main row: side column + card */
.main-row {
  display:flex;
  gap:16px;
  align-items:stretch;
}

/* side column (toggles + donut) */
.side-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:120px; /* keeps column compact next to card */
  justify-content: space-between;
}

/* toggle styling (responsive track width; thumb fixed width but positional calc) */
.toggle{
  position:relative;
  display:inline-block;
  width:100%;
  height:36px;
  cursor:pointer;
}
.toggle input{ position:absolute; opacity:0; width:0; height:0; }
.slider{
  position:absolute;
  inset:0;
  background:var(--grey);
  border-radius:999px;
  transition: background 300ms ease;
}
.slider::before{
  content:"";
  position:absolute;
  left:var(--gap);
  top:50%;
  transform:translateY(-50%);
  width:var(--thumb);
  height:calc(100% - (var(--gap) * 2));
  border-radius:50%;
  background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,0.12);
  transition:left 300ms cubic-bezier(.2,.9,.3,1);
}
/* checked state */
.toggle input:checked + .slider{ background: var(--primary); }
.toggle input:checked + .slider::before{
  left: calc(100% - var(--thumb) - var(--gap));
}

/* donut */
.donut{
  background:#fff;
  padding:6px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all .3s ease-in-out;
}
.donut svg { display:block; }
.donut circle.value {
  stroke: var(--primary);
  transition: stroke-dashoffset 700ms cubic-bezier(.2,.9,.3,1), stroke 420ms ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.donut text {
  transition: opacity 260ms ease;
  fill:#000;
  font-weight:700;
}

/* card */
.card {
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  flex:1;
  display:flex;
  flex-direction:column;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: all .3s ease-in-out;
}
.card img{
  width:100%;
  display:block;
  height:160px;
  object-fit:cover;
  transition: opacity 420ms ease;
  opacity:1;
}
.card .info{ padding:12px; }
.info .name{ font-weight:700; margin-bottom:4px }
.info .location{ color:#555 }

/* insight card */
.insight{
  background:#fff;
  border-radius:var(--radius);
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  position:relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all .3s ease-in-out;
}
.insight::before, .search::before {
    content: "dsds";
    color: transparent;
    top: 0px;
    left: 0;
    position: absolute;
    width: 100%;
    opacity: .2;r
   border-radius:var(--radius);
    height: 100%;
    background: linear-gradient(45deg, var(--primary), #ffffff00);
    pointer-events: none;
    transition: all .3s ease-in-out;
}
.insight .text{ display:flex; flex-direction:column; }
.insight h4{ margin:0; font-size:16px }
.insight p{ margin:4px 0 0; font-size:13px; color:#555 }

/* insight bars: we'll animate scaleY */
.insight svg rect.bar {
  transform-origin: center bottom;
  transform: scaleY(1);
  transition: transform 700ms cubic-bezier(.2,.9,.3,1);
  fill: var(--primary);
}

/* small helpers for smooth fade */
.fade-out { opacity:0; transform: translateY(-6px) scale(.995); }
.fade-in  { opacity:1; transform: translateY(0) scale(1); transition: opacity 360ms ease, transform 360ms cubic-bezier(.2,.9,.3,1); }




.parent-layout {
  display: flex;
  gap: 24px;
  align-items: stretch; /* ensure both columns match height */
      height: min-content;
          width: 100%;
}

.shades {
    height: 100%;
}

.shades .shade {
    height: 100%;
    display: flex;
}

.color-container {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  border-radius:var(--radius);
  overflow: hidden; /* so shade blocks fill cleanly */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all .3s ease-in-out;
}

.color-container .shades {
  display: flex;
  flex: 1;              /* take full height */
  flex-direction: column;
}

.color-container .shade {
  flex: 1; /* each shade takes equal space */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.7);
}


.theme-preview {
    flex: 0 0 26%;
    background: #444444;
    color: #d4d4d4;
    font-family: monospace;
    font-size: 13px;
    border-radius:var(--radius);
    width: 100%;
    padding: 12px;
    overflow: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all .3s ease-in-out;
}

.theme-preview h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #fff;
}

.theme-preview pre {
  margin: 0;
  white-space: pre-wrap;
}





@media (max-width:420px){
  .side-col { width:96px; }
  .card img { height:130px; }
  .container {width:100%; }
  .parent-layout{
          flex-direction: column;
  }
  .theme-preview, .color-container{
      display:none;
  }
}