/* ===== Scoped styles for Color Palette (.ast-cpt) ===== */
:root{
  --ast-gap:12px;--ast-box:120px;--ast-radius:16px;--ast-text:#222;
  --ast-sub:#666;--ast-band-bg:rgba(255,255,255,.85);
  --ast-inline-bg:rgba(0,0,0,.06);--ast-tooltip:#111
}
.ast-cpt{box-sizing:border-box}
.ast-cpt .ast-container{max-width:1280px;margin:0 auto;padding:20px}
.ast-cpt h1{margin:0 0 6px 0;font-size:clamp(18px,2.0vw,26px);color:var(--ast-text);font-weight:600;line-height:1.2}
.ast-cpt p{margin:4 0 14px 0;color:var(--ast-sub);font-size:clamp(14px,1.8vw,15px)}
.ast-cpt .color-grid{display:grid;gap:var(--ast-gap)}

.ast-cpt .color-box{
  width:100%;aspect-ratio:1/1;
  border-radius:var(--ast-radius);
  cursor:pointer;position:relative;
  outline:1px solid rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  background:#eee;overflow:hidden
}
.ast-cpt .color-box:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12)}

/* Tooltip (on click only) */
.ast-cpt .tooltip{
  position:absolute;left:50%;top:-10px;transform:translate(-50%,-100%);
  background:var(--ast-tooltip);color:#fff;
  border-radius:6px;padding:4px 8px;
  font-size:12px;opacity:0;pointer-events:none;
  transition:opacity .18s ease;z-index:9999
}
.ast-cpt .color-box.is-copied .tooltip{opacity:1}

/* Label styles */
.ast-cpt .band{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 12px;
  background:var(--ast-band-bg);
  backdrop-filter:saturate(1.2) blur(8px);
  display:flex;justify-content:space-between;align-items:center;
  font-weight:700;font-size:14px
}
.ast-cpt .inline{
  position:absolute;left:10px;bottom:10px;
  padding:6px 10px;border-radius:999px;
  background:var(--ast-inline-bg);
  font-weight:400;font-size:13px;
  display:flex;align-items:center;
  backdrop-filter:saturate(1.2) blur(6px)
}
.ast-cpt .footer{margin-top:20px;color:#666;font-size:13px}

/* ===== Custom overrides (A) ===== */

/* bottom corners square */
.ast-cpt .color-box{ border-radius:16px 16px 0 0 !important; }

/* band flat (no round at bottom) */
.ast-cpt .band{ border-radius:0 !important; }

/* hide built-in HEX + Copy pill */
.ast-cpt .meta{ display:none !important; }