/* styles/customize-modal/sc-colorpicker-modal.css */

.sccp{ position:fixed; inset:0; display:none; z-index:9999; }
.sccp.is-open{ display:block; }
.sccp__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.55); }

.sccp__panel{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(460px, calc(100vw - 24px));
  border-radius:16px;
  background:#0b1220;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 26px 70px rgba(0,0,0,0.55);
  overflow:hidden;
}

html[data-theme="light"] .sccp__panel{
  background:#fff;
  border-color:rgba(15,23,42,0.12);
  box-shadow:0 26px 70px rgba(15,23,42,0.18);
}

.sccp__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 10px;
}

.sccp__title{ font-weight:650; color:#e5e7eb; }
html[data-theme="light"] .sccp__title{ color:#0f172a; }

.sccp__close{
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:transparent; color:#e5e7eb; cursor:pointer;
}
html[data-theme="light"] .sccp__close{
  border-color:rgba(15,23,42,0.12); color:#0f172a;
}

/* ===== Picker (SV + Hue) ===== */
.sccp__picker{
  display:grid;
  grid-template-columns: 1fr 22px;
  gap: 12px;
  padding: 0 14px 12px;
}

.sccp__sv{
  position:relative;
  height: 190px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--hue, #3b82f6);
  touch-action: none;
}
html[data-theme="light"] .sccp__sv{ border-color: rgba(15,23,42,0.12); }

.sccp__svWhite{
  position:absolute; inset:0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.sccp__svBlack{
  position:absolute; inset:0;
  background: linear-gradient(to top, #000, rgba(0,0,0,0));
}

.sccp__svKnob{
  position:absolute;
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  transform: translate(-7px, -7px);
  pointer-events: none;
}

.sccp__hueWrap{ display:flex; align-items:stretch; }
.sccp__hue{
  position:relative;
  width: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  touch-action: none;
  background: linear-gradient(
    to bottom,
    #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
  );
}
html[data-theme="light"] .sccp__hue{ border-color: rgba(15,23,42,0.12); }

.sccp__hueKnob{
  position:absolute;
  left: 50%;
  width: 24px;
  height: 6px;
  border-radius: 999px;
  transform: translate(-50%, -3px);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  pointer-events:none;
}

/* ===== Preview ===== */
.sccp__preview{
  display:flex; gap:12px; align-items:center;
  padding: 0 14px 12px;
}

.sccp__swatch{
  width:52px; height:52px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #000;
}
html[data-theme="light"] .sccp__swatch{ border-color: rgba(15,23,42,0.14); }

.sccp__vals{ display:flex; flex-direction:column; gap:6px; }
.sccp__val{
  display:flex; gap:10px; align-items:baseline;
  color: rgba(229,231,235,0.75);
  font-size: 12px;
}
.sccp__val b{
  color:#e5e7eb; font-size:13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html[data-theme="light"] .sccp__val{ color: rgba(15,23,42,0.65); }
html[data-theme="light"] .sccp__val b{ color:#0f172a; }

/* ===== Swatches ===== */
.sccp__swatches{
  padding: 0 14px 12px;
}

.sccp__swTitle{
  font-size: 12px;
  font-weight: 750;
  color: rgba(229,231,235,0.70);
  margin: 10px 0 8px;
}
.sccp__swTitle--mt{ margin-top: 12px; }
html[data-theme="light"] .sccp__swTitle{ color: rgba(15,23,42,0.70); }

.sccp__swGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}
@media (max-width: 420px){
  .sccp__swGrid{ grid-template-columns: repeat(8, 1fr); }
}

.sccp__sw{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: var(--sw, #3b82f6);
  cursor: pointer;
}
html[data-theme="light"] .sccp__sw{ border-color: rgba(15,23,42,0.12); }

.sccp__empty{
  grid-column: 1 / -1;
  font-size: 12px;
  color: rgba(229,231,235,0.55);
}
html[data-theme="light"] .sccp__empty{ color: rgba(15,23,42,0.55); }

/* ===== Tabs (Google-ish) ===== */
.sccp__tabs{
  display:flex;
  gap:10px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="light"] .sccp__tabs{ border-bottom-color: rgba(15,23,42,0.10); }

.sccp__tab{
  position:relative;
  padding: 10px 2px 12px;
  background:transparent;
  border:0;
  color: rgba(229,231,235,0.75);
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor:pointer;
}
html[data-theme="light"] .sccp__tab{ color: rgba(15,23,42,0.70); }

.sccp__tab.is-active{ color:#e5e7eb; }
html[data-theme="light"] .sccp__tab.is-active{ color:#0f172a; }

.sccp__tab.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  border-radius: 999px;
  background: rgba(59,130,246,0.95);
}

/* ===== Inputs ===== */
.sccp__body{ padding: 12px 14px 14px; }

.sccp__field{ display:block; }
.sccp__label{
  display:block;
  font-size: 12px;
  color: rgba(229,231,235,0.70);
  margin-bottom: 6px;
}
html[data-theme="light"] .sccp__label{ color: rgba(15,23,42,0.70); }

.sccp__inputWrap{
  display:flex; align-items:center; gap:8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
}
html[data-theme="light"] .sccp__inputWrap{
  border-color: rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
}

.sccp__hash{
  color: rgba(229,231,235,0.55);
  font-weight: 800;
}
html[data-theme="light"] .sccp__hash{ color: rgba(15,23,42,0.55); }

.sccp__input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color:#e5e7eb;
  font-weight: 750;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html[data-theme="light"] .sccp__input{ color:#0f172a; }
.sccp__input.is-bad{ color:#fecaca; }

.sccp__rgbRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sccp__num{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  outline:none;
  color:#e5e7eb;
  font-weight: 750;
}
html[data-theme="light"] .sccp__num{
  border-color: rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  color:#0f172a;
}

.sccp__hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(229,231,235,0.55);
}
html[data-theme="light"] .sccp__hint{ color: rgba(15,23,42,0.55); }

/* ===== Bottom buttons ===== */
.sccp__bottom{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="light"] .sccp__bottom{ border-top-color: rgba(15,23,42,0.10); }

.sccp__btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: #e5e7eb;
  cursor:pointer;
}
html[data-theme="light"] .sccp__btn{
  border-color: rgba(15,23,42,0.12);
  color:#0f172a;
}

.sccp__btn--primary{
  background: rgba(59,130,246,0.95);
  border-color: rgba(59,130,246,0.95);
  color: white;
}