/* ── PALETTE VIEWER STYLES ── */

/* Suppress footer border when palette fills viewport */
.site-footer { border-top: 1px solid var(--border2); }

/* ── PALETTE SECTION ── */
.pv-section {
  position: relative;
  height: calc(100vh - var(--nav-h));
  display: flex;
  overflow: hidden;
}

/* ── TOOLBAR (floats at top of palette area) ── */
.pv-toolbar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(16,20,32,0.9);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 6px 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.pv-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 24px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: 'Gabarito', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.pv-toolbar-btn:hover { background: rgba(120,74,157,0.15); color: var(--text); }
.pv-toolbar-btn.active { background: rgba(120,74,157,0.22); color: var(--lavender); }
.pv-toolbar-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.pv-toolbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; flex-shrink: 0; }

/* LIGHT MODE: toolbar bg is hardcoded dark - force light text so it stays readable */
[data-theme="light"] .pv-toolbar-btn { color: rgba(240,244,255,0.85) !important; }
[data-theme="light"] .pv-toolbar-btn:hover { color: #fff !important; }

/* HC DARK: toolbar - white text on black, white border */
html[data-contrast="high"] .pv-toolbar { background: #000 !important; border-color: #fff !important; box-shadow: none !important; }
html[data-contrast="high"] .pv-toolbar-btn { color: #fff !important; }
html[data-contrast="high"] .pv-toolbar-btn:hover { background: #333 !important; color: #fff !important; }
html[data-contrast="high"] .pv-toolbar-btn.active { background: #fff !important; color: #000 !important; }
html[data-contrast="high"] .pv-toolbar-sep { background: rgba(255,255,255,0.4) !important; }
/* HC LIGHT: toolbar - black text on white, black border */
html[data-theme="light"][data-contrast="high"] .pv-toolbar { background: #fff !important; border-color: #000 !important; box-shadow: none !important; }
html[data-theme="light"][data-contrast="high"] .pv-toolbar-btn { color: #000 !important; }
html[data-theme="light"][data-contrast="high"] .pv-toolbar-btn:hover { background: #ddd !important; color: #000 !important; }
html[data-theme="light"][data-contrast="high"] .pv-toolbar-btn.active { background: #000 !important; color: #fff !important; }
html[data-theme="light"][data-contrast="high"] .pv-toolbar-sep { background: rgba(0,0,0,0.35) !important; }

/* ── COLOR BAR WRAP ── */
.pv-bar-wrap {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

/* ── COLOR BAR ── */
.pv-bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: grab;
  position: relative;
  touch-action: manipulation;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pv-bar:active { cursor: grabbing; }

/* Drag-to-reorder: dragged bar lifts and follows pointer; other bars slide
   smoothly to open the landing slot. */
#pvWrapper.is-dragging-active .pv-bar:not(.is-dragging) {
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pv-bar.is-dragging {
  transition: none !important;
  z-index: 30;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.85),
    0 14px 36px rgba(0,0,0,0.55);
  cursor: grabbing;
  /* iOS Safari: must be `none` once a drag is in progress so the browser
     stops trying to scroll. Default touch-action: manipulation (above) keeps
     normal pan/scroll behavior on bars that aren't being dragged. */
  touch-action: none;
}

/* Divider between bars: dark outer + light inner edge, works on all backgrounds */
.pv-bar-wrap:not(:last-child) .pv-bar-color {
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.18), inset -2px 0 0 rgba(0,0,0,0.22);
}

/* Color area (flex:1, fills space above panel) */
.pv-bar-color {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  padding: 0 10px 14px;
  min-height: 0;
}

/* Hex label - adaptive color set inline */
.pv-bar-hex {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Color name label - rendered above the hex when present */
.pv-bar-name {
  font-family: 'Gabarito', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 4px;
}

.pv-bar-ntc {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: center;
  background: none;
  border: none;
  padding: 2px 6px;
  margin: 0;
  cursor: pointer;
  max-width: 100%;
  border-radius: 4px;
  transition: background 0.12s;
  word-break: break-word;
}
.pv-bar-ntc:hover { background: rgba(255,255,255,0.12); }
.pv-bar-ntc:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Hex group: label above hex above action row */
.pv-bar-hex-group { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }

/* ── TOP HOVER CONTROLS (move + delete, desktop only via CSS hover) ── */
.pv-bar-top-hover {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
}
@media (hover: hover) {
  .pv-bar:hover .pv-bar-top-hover { opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px) { .pv-bar-top-hover { display: none; } }
.pv-bar-top-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
  padding: 0; flex-shrink: 0;
}
.pv-bar-top-btn:hover { background: rgba(255,255,255,0.18); }
.pv-bar-top-btn:disabled, .pv-bar-top-btn[disabled] { opacity: 0.2; cursor: default; }
.pv-bar-top-btn.del-btn:hover { background: rgba(185,32,37,0.45); }
.pv-bar-top-btn svg { width: 18px; height: 18px; }

/* ── BAR ACTION ICONS (copy, info, shades, wcag - desktop only) ── */
.pv-bar-actions-wrap { width: 100%; container-type: inline-size; margin-top: 4px; }
.pv-bar-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 44px)); gap: 2px; justify-content: center; }
@container (max-width: 120px) { .pv-bar-actions { grid-template-columns: repeat(2, minmax(0, 44px)); } }
.pv-bar-action-btn {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
  pointer-events: auto;
  padding: 0;
  min-width: 0; width: 100%;
}
.pv-bar-action-btn:hover { background: rgba(255,255,255,0.12); }
.pv-bar-action-btn svg { width: 55%; height: 55%; }

/* ── BOTTOM SHEET (mobile actions) ── */
.pv-sheet { position: fixed; inset: 0; z-index: 600; display: none; }
.pv-sheet.open { display: block; }
.pv-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.52); }
.pv-sheet-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-radius: 18px 18px 0 0;
  border-top: 0.5px solid var(--border);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pv-sheet-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 10px auto 0; }
.pv-sheet-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 10px;
  border-bottom: 0.5px solid var(--border);
}
.pv-sheet-swatch { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1); }
.pv-sheet-color-name { font-family: 'Gabarito', sans-serif; font-size: 14px; font-weight: 500; color: var(--text); margin: 0 0 1px; }
.pv-sheet-color-hex { font-family: 'Bricolage Grotesque', sans-serif; font-size: 12px; color: var(--text3); margin: 0; }
.pv-sheet-row {
  display: flex; align-items: center;
  padding: 0 16px; height: 52px; gap: 14px;
  border: none; background: none; width: 100%;
  cursor: pointer; border-bottom: 0.5px solid rgba(255,255,255,0.05);
  text-align: left;
}
.pv-sheet-row:last-child { border-bottom: none; }
.pv-sheet-row:active { background: rgba(255,255,255,0.06); }
.pv-sheet-row.sh-disabled { opacity: 0.38; cursor: default; }
.pv-sheet-row-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv-sheet-row-icon.violet { background: rgba(120,74,157,0.35); }
.pv-sheet-row-icon.danger { background: rgba(185,32,37,0.3); }
.pv-sheet-row-icon svg { width: 16px; height: 16px; }
.pv-sheet-row-label { font-family: 'Gabarito', sans-serif; font-size: 15px; color: var(--text); flex: 1; }
.pv-sheet-row-label.violet { color: rgba(180,140,220,0.9); }
.pv-sheet-row-label.danger { color: rgba(255,100,100,0.9); }
.pv-sheet-row-meta { font-size: 11px; color: var(--text3); }

/* Grade colors - green = pass, yellow = large text only, red = fail */
.pv-grade-aaa  { color: #4ade80; }
.pv-grade-aa   { color: #4ade80; }
.pv-grade-aal  { color: #fdbb25; }
.pv-grade-fail { color: #f87171; }

/* ── WCAG CONTRAST POPOVER ── */
.pv-wcag-pop {
  position: fixed;
  z-index: 600;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  min-width: 196px;
}
.pv-wcag-pop[hidden] { display: none; }
.pv-wcag-pop-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; }
.pvwp-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.pvwp-row + .pvwp-row { border-top: 1px solid var(--border2); }
.pvwp-swatch { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }
.pvwp-swatch-white { background: #fff; border: 1px solid rgba(0,0,0,0.12); }
.pvwp-swatch-black { background: #111; border: 1px solid rgba(255,255,255,0.15); }
.pvwp-ratio { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.pvwp-grade { font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; }
.pvwp-against { font-size: 11px; color: var(--text3); flex-shrink: 0; }

/* ── COLORBLIND FILTER CSS HOOKS ── */
.pv-section.cb-protanopia   { filter: url(#pv-cb-protanopia);   }
.pv-section.cb-deuteranopia { filter: url(#pv-cb-deuteranopia); }
.pv-section.cb-tritanopia   { filter: url(#pv-cb-tritanopia);   }
.pv-section.cb-achromato    { filter: url(#pv-cb-achromato);    }

/* ── SHADES POPOVER ── */
.pv-shades-pop {
  position: fixed;
  z-index: 600;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
.pv-shades-pop[hidden] { display: none; }
.pv-shades-pop-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 9px;
}
.pv-shades-col { display: flex; flex-direction: column; gap: 5px; }
.pv-shade-pip {
  width: 140px; height: 28px;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s, border-color 0.12s;
}
.pv-shade-pip:hover { transform: scaleX(1.04); }
.pv-shade-pip.active { border-color: rgba(255,255,255,0.75); }

/* ── VESPER COLOR PICKER ── */
.pvck-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 600; opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.pvck-overlay.open { opacity: 1; pointer-events: all; }
.pvck-sheet {
  background: var(--bg3); border-radius: 16px; padding: 22px 22px 18px;
  width: 320px; max-width: calc(100vw - 32px); border: 1px solid var(--border);
  transform: scale(0.97) translateY(8px); transition: transform 0.18s;
}
.pvck-overlay.open .pvck-sheet { transform: scale(1) translateY(0); }
.pvck-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pvck-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); }
.pvck-preview-swatch { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); flex-shrink: 0; }
.pvck-hsv-wrap {
  width: 100%; height: 180px; border-radius: 10px; overflow: hidden;
  position: relative; margin-bottom: 14px; cursor: crosshair;
  touch-action: none; user-select: none;
}
.pvck-hsv-canvas { display: block; width: 100%; height: 100%; }
.pvck-hsv-thumb {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
  pointer-events: none; transform: translate(-50%, -50%);
}
.pvck-slider-wrap { margin-bottom: 12px; }
.pvck-slider-label { font-family: 'Gabarito', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.pvck-hue-track {
  width: 100%; height: 22px; border-radius: 11px;
  background: linear-gradient(to right,hsl(0,100%,50%),hsl(30,100%,50%),hsl(60,100%,50%),hsl(90,100%,50%),hsl(120,100%,50%),hsl(150,100%,50%),hsl(180,100%,50%),hsl(210,100%,50%),hsl(240,100%,50%),hsl(270,100%,50%),hsl(300,100%,50%),hsl(330,100%,50%),hsl(360,100%,50%));
  position: relative; cursor: pointer; touch-action: none; user-select: none;
}
.pvck-hue-thumb {
  position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
  transform: translate(-50%, -50%); pointer-events: none;
}
.pvck-shades-wrap { margin-bottom: 14px; }
.pvck-shades-row { display: flex; gap: 5px; }
.pvck-shade-chip { flex: 1; height: 30px; border-radius: 7px; border: 1px solid var(--border); cursor: pointer; transition: transform 0.1s; background: none; padding: 0; }
.pvck-shade-chip:hover { transform: scaleY(1.07); }
.pvck-shade-chip--active { border: 2.5px solid var(--violet) !important; }
.pvck-label-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pvck-label-text { font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 600; color: var(--text2); letter-spacing: 0.04em; }
.pvck-label-optional { font-weight: 400; color: var(--text3); font-size: 11px; }
.pvck-label-input { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 0 13px; height: 40px; font-family: 'Gabarito', sans-serif; font-size: 14px; font-weight: 500; color: var(--text); outline: none; transition: border-color 0.15s; }
.pvck-label-input:focus { border-color: var(--violet); }
.pvck-label-input::placeholder { color: var(--text3); }
.pvck-hex-row { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 0 13px; height: 44px; margin-bottom: 16px; transition: border-color 0.15s; }
.pvck-hex-row:focus-within { border-color: var(--violet); }
.pvck-hex-hash { font-family: 'Gabarito', sans-serif; font-size: 15px; font-weight: 600; color: var(--lavender); margin-right: 4px; user-select: none; }
.pvck-hex-input { flex: 1; background: none; border: none; outline: none; font-family: 'Gabarito', sans-serif; font-size: 15px; font-weight: 500; color: var(--text); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.pvck-hex-input::placeholder { color: var(--text3); }
.pvck-actions { display: flex; gap: 10px; }
.pvck-cancel { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 12px; font-family: 'Gabarito', sans-serif; font-size: 14px; font-weight: 600; color: var(--text2); cursor: pointer; transition: color 0.15s; }
.pvck-cancel:hover { color: var(--text); }
.pvck-apply { flex: 1; background: var(--violet); border: none; border-radius: 9px; padding: 12px; font-family: 'Gabarito', sans-serif; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; transition: background 0.15s; }
.pvck-apply:hover { background: var(--violet-hover); }
.pvck-cancel:focus-visible, .pvck-apply:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* ── MOBILE ── */
@media (max-width: 640px) {
  /* Section: column layout, height driven by content */
  .pv-section { flex-direction: column; height: auto; overflow-x: hidden; }

  /* Toolbar: full-width bar at top, no longer floating */
  .pv-toolbar {
    position: static;
    transform: none;
    order: -1;
    width: 100%;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 8px 12px;
    justify-content: center;
    gap: 2px;
    background: rgba(16,20,32,0.98);
    box-shadow: none;
    backdrop-filter: none;
    top: auto; left: auto;
    flex-shrink: 0;
  }

  /* pvWrapper: override inline height:100% and make bars stack vertically */
  #pvWrapper { flex-direction: column !important; height: auto !important; flex: 1; }

  /* Each bar: full-width, color fills entire bar (no panel) */
  .pv-bar-wrap { width: 100% !important; height: auto !important; flex: none; }
  .pv-bar { flex-direction: column; height: auto; min-height: 80px; }
  .pv-bar-color { flex: 1; min-height: 80px; padding: 10px 12px; align-items: flex-end; justify-content: flex-start; pointer-events: auto; }
  /* Mobile divider: bottom edge between stacked rows */
  .pv-bar-wrap:not(:last-child) .pv-bar-color {
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.18), inset 0 -2px 0 rgba(0,0,0,0.22);
  }
  /* Mobile hex group: row layout, hex before label */
  .pv-bar-hex-group { flex-direction: row; align-items: center; gap: 6px; }
  .pv-bar-hex { order: -1; }
  .pv-toolbar-btn span.lbl { display: none; }
  .pv-toolbar-btn { flex: 1; justify-content: center; border-radius: 0; }
  .pv-toolbar-sep { display: none; }

  /* Prevent iOS auto-zoom on input focus - requires font-size >= 16px */
  .pvck-label-input, .pvck-hex-input { font-size: 16px; }

  /* Profile page */
  .pvp-values-grid { grid-template-columns: 1fr; }
  .pvp-contrast-grid { grid-template-columns: 1fr; }
  .pvp-cb-grid { grid-template-columns: 1fr; }
  .pvp-harmonies-grid { grid-template-columns: 1fr 1fr; }
  .pvp-body { padding: 24px 20px 8px; }
  .pvp-hero-hex { font-size: 28px; }
  .pv-guides-banner { padding: 20px; }
}

/* ── MODALS (CB + Export) ── */
.pv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
}
.pv-modal-overlay.open { display: flex; }
.pv-modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  width: 90vw;
  max-width: 380px;
  position: relative;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
  max-height: 90vh;
  overflow-y: auto;
}
.pv-modal-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 18px;
}
.pv-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s;
}
.pv-modal-close:hover { background: rgba(255,255,255,0.07); color: var(--text); }

/* Color editor */
/* ── MODALS (CB + Export) ── */

/* Color blindness modal */
.pv-cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pv-cb-option { padding: 12px; border-radius: 8px; border: 2px solid var(--border2); cursor: pointer; transition: border-color 0.14s, background 0.14s; background: transparent; text-align: left; }
.pv-cb-option:hover { background: rgba(120,74,157,0.07); border-color: var(--border); }
.pv-cb-option.active { border-color: var(--violet); background: rgba(120,74,157,0.13); }
.pv-cb-option-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.pv-cb-option-desc { font-size: 11px; color: var(--text3); line-height: 1.3; }
.pv-cb-none { width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 13px; cursor: pointer; transition: background 0.14s; font-family: 'Gabarito', sans-serif; }
.pv-cb-none:hover { background: rgba(255,255,255,0.04); color: var(--text); }

/* Export modal */
.pv-export-preview { width: 100%; aspect-ratio: 16/9; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 14px; position: relative; display: flex; }
.pv-export-bar { height: 100%; }
.pv-export-attr { position: absolute; bottom: 0; left: 0; right: 0; height: 22px; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; font-size: 9px; color: rgba(255,255,255,0.65); letter-spacing: 0.04em; font-family: 'Gabarito', sans-serif; }
.pv-export-btns { display: flex; gap: 8px; }
.pv-export-btn { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.14s; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: 'Gabarito', sans-serif; }
.pv-export-btn:hover { background: rgba(120,74,157,0.18); }

/* ── PROFILE VIEW ── */
#pvProfileSection { display: none; }
#pvProfileSection.visible { display: block; }

.pvp-hero {
  width: 100%;
  height: 34vh;
  min-height: 220px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px 32px;
  cursor: pointer;
}
/* Actions row: copy + share, centered above hex */
.pvp-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.pvp-hero-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px;
  border-radius: 8px;
  opacity: 0.78;
  transition: opacity 0.14s, background 0.14s;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}
.pvp-hero-action-btn:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.pvp-hero-hex {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.pvp-hero-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  opacity: 0.92;
  text-align: center;
  line-height: 1.15;
  max-width: 90%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  word-break: break-word;
}
.pvp-hero-name:hover .pvp-hero-name-copy { opacity: 0.85; }
.pvp-hero-name:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.pvp-hero-name-copy {
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.pvp-hero-hint {
  font-size: 11px;
  opacity: 0.5;
  margin-top: 7px;
  letter-spacing: 0.04em;
}

.pvp-body { max-width: 1000px; margin: 0 auto; padding: 40px 40px 8px; }
.pvp-section { margin-bottom: 44px; }
.pvp-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; }

/* Values */
.pvp-values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.pvp-value-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 5px; position: relative; }
.pvp-value-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.pvp-value-text { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text); word-break: break-all; line-height: 1.5; }
.pvp-value-copy { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 5px; background: transparent; border: 1px solid var(--border); color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; }
.pvp-value-copy:hover { background: rgba(120,74,157,0.12); color: var(--text); }

/* Contrast */
.pvp-contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pvp-contrast-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.pvp-contrast-preview { padding: 22px 20px; display: flex; align-items: center; justify-content: center; min-height: 88px; }
.pvp-contrast-preview-text { font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 600; }
.pvp-contrast-info { background: var(--bg3); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.pvp-contrast-ratio { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--text); flex: 1; }
.pvp-contrast-grade { font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; flex-shrink: 0; }
.pvp-contrast-against { font-size: 12px; color: var(--text3); }

/* Color blindness cards */
.pvp-cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pvp-cb-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.pvp-cb-split { height: 60px; position: relative; }
.pvp-cb-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='white' d='M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z'/%3E%3C/svg%3E") no-repeat center/contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }
.pvp-cb-info { padding: 11px 14px; background: var(--bg3); }
.pvp-cb-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.pvp-cb-desc { font-size: 11px; color: var(--text3); line-height: 1.4; }

/* Color strips */
.pvp-strip-desc { font-size: 13px; color: var(--text2); margin-bottom: 12px; line-height: 1.5; }
.pvp-strip-wrap { position: relative; height: 64px; border-radius: 9px; overflow: hidden; }
.pvp-strip-dot { position: absolute; top: 50%; transform: translateY(-50%); margin-left: -8px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='white' d='M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z'/%3E%3C/svg%3E") no-repeat center/contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); pointer-events: none; }

/* Color chips (shades, tints, tones) */
.pvp-chip-row { display: flex; gap: 3px; }
.pvp-chip {
  flex: 1; height: 56px; border-radius: 7px; border: none; padding: 0; cursor: pointer;
  position: relative; display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s; flex-shrink: 0;
}
.pvp-chip:hover { transform: scaleY(1.08); z-index: 1; }
.pvp-chip-dot {
  width: 12px; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='white' d='M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z'/%3E%3C/svg%3E") no-repeat center/contain;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.4));
}

/* Harmonies - 2x2 grid */
.pvp-harmonies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Profile mobile overrides - must come AFTER desktop rules to win cascade */
@media (max-width: 640px) {
  .pvp-values-grid   { grid-template-columns: 1fr; }
  .pvp-contrast-grid { grid-template-columns: 1fr; }
  .pvp-cb-grid       { grid-template-columns: 1fr; }
  .pvp-harmonies-grid { grid-template-columns: 1fr 1fr; }
  .pvp-body { padding: 24px 20px 8px; }
  .pvp-hero-hex { font-size: 28px; }
}
.pvp-harmony-item {}
.pvp-harmony-label { font-size: 12px; color: var(--text2); font-weight: 500; margin-bottom: 8px; }
.pvp-harmony-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pvp-harmony-chip { display: flex; flex-direction: column; gap: 4px; align-items: center; cursor: pointer; text-decoration: none; }
.pvp-harmony-chip-swatch { width: 52px; height: 52px; border-radius: 9px; border: 1px solid var(--border); transition: transform 0.12s; }
.pvp-harmony-chip:hover .pvp-harmony-chip-swatch { transform: scale(1.08); }
.pvp-harmony-chip-hex { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text3); text-transform: uppercase; }

/* ── GUIDES BANNER ── */
.pv-guides-banner {
  background: linear-gradient(135deg, rgba(120,74,157,0.1) 0%, rgba(21,33,53,0.5) 100%);
  border-top: 1px solid var(--border2);
  padding: 28px 40px;
}
.pv-guides-banner-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pv-guides-banner-text h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.pv-guides-banner-text p { font-size: 14px; color: var(--text2); }
.pv-guides-banner-cta { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 8px; background: var(--violet); color: #fff !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background 0.14s; flex-shrink: 0; }
.pv-guides-banner-cta:hover { background: var(--violet-hover); color: #fff !important; }

/* ── TOAST ── */
.pv-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--bg2); border: 1px solid rgba(153,138,194,0.3); border-radius: 8px; padding: 9px 18px; font-size: 13px; color: var(--text); box-shadow: 0 4px 16px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 1000; white-space: nowrap; }
.pv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) {
  .pv-toast { bottom: auto; top: 108px; transform: translateX(-50%) translateY(-8px); }
  .pv-toast.show { transform: translateX(-50%) translateY(0); }
}

/* end styles */