/* ── Layout ───────────────────────────────────────────────────────────────── */
.co-wrap { min-height:100vh; display:flex; flex-direction:column; }
.co-main {
  flex:1; max-width:1140px; margin:0 auto; width:100%;
  padding:24px 20px 60px; display:flex; flex-direction:column; gap:24px;
}

/* ── Intro ────────────────────────────────────────────────────────────────── */
.co-intro { margin-top:28px; }
.co-intro h2 { font-size:1rem; font-weight:700; margin-bottom:16px; }
.co-intro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.co-intro-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  display:flex; flex-direction:column; gap:6px;
}
.co-intro-icon { font-size:1.4rem; }
.co-intro-item strong { font-size:0.82rem; font-weight:700; }
.co-intro-item span   { font-size:0.72rem; color:var(--text-muted); line-height:1.5; }

/* ── Result grid ──────────────────────────────────────────────────────────── */
.co-result-grid {
  display:grid; grid-template-columns:1fr 1.35fr; gap:20px; align-items:start;
}
.co-photo-col  { display:flex; flex-direction:column; gap:10px; position:sticky; top:20px; }
.co-analysis-col { display:flex; flex-direction:column; gap:16px; }

/* ── Photo canvas ─────────────────────────────────────────────────────────── */
.co-canvas-wrap {
  position:relative; border-radius:var(--radius-sm);
  border:1px solid var(--border); overflow:hidden;
  background:var(--surface2); line-height:0;
}
#coCanvas { width:100%; height:auto; display:block; }
.co-overlay {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}

/* ── Legend ───────────────────────────────────────────────────────────────── */
.co-zone-legend {
  display:flex; flex-wrap:wrap; gap:10px;
}
.co-legend-item {
  display:flex; align-items:center; gap:5px;
  font-size:0.68rem; color:var(--text-muted);
}
.co-legend-item span {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}

/* ── Back button ──────────────────────────────────────────────────────────── */
.co-back { align-self:flex-start; }

/* ── Section ──────────────────────────────────────────────────────────────── */
.co-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px;
}
.co-section-title {
  font-size:0.68rem; font-weight:700; letter-spacing:2px;
  color:var(--text-muted); text-transform:uppercase; margin-bottom:12px;
}

/* ── Zone swatches ────────────────────────────────────────────────────────── */
.co-zones { display:flex; flex-direction:column; gap:8px; }
.co-zone-item { display:flex; align-items:center; gap:10px; }
.co-zone-dot {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,0.18);
  box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.co-zone-info { display:flex; flex-direction:column; gap:1px; }
.co-zone-name { font-size:0.78rem; font-weight:600; }
.co-zone-vals { font-size:0.65rem; color:var(--text-muted); font-family:monospace; }

/* ── Score bars ───────────────────────────────────────────────────────────── */
.co-bars { display:flex; flex-direction:column; gap:14px; }
.co-bar-group { display:flex; flex-direction:column; gap:5px; }
.co-bar-hdr { display:flex; justify-content:space-between; align-items:center; }
.co-bar-label { font-size:0.78rem; font-weight:600; }
.co-bar-value {
  font-size:0.67rem; font-weight:600; color:var(--accent);
  background:rgba(201,153,106,0.12);
  border:1px solid rgba(201,153,106,0.25);
  border-radius:99px; padding:2px 8px;
}
.co-bar-track {
  height:8px; border-radius:99px;
  background:var(--surface2); border:1px solid var(--border);
  overflow:hidden;
}
.co-bar-fill {
  height:100%; border-radius:99px;
  width:50%; transition:width 0.6s ease;
}
.co-fill-depth   { background:linear-gradient(to right,#f0ead8,#8b6340,#1a0c04); }
.co-fill-clarity { background:linear-gradient(to right,#868686,#c9996a,#d46820); }
.co-fill-temp    { background:linear-gradient(to right,#6ab0d8,#9aa4b4,#c9996a,#c96838); }
.co-bar-ends {
  display:flex; justify-content:space-between;
  font-size:0.62rem; color:var(--text-muted);
}

/* ── Primary ──────────────────────────────────────────────────────────────── */
.co-primary { display:flex; flex-direction:column; gap:6px; }
.co-primary-label {
  font-size:0.65rem; text-transform:uppercase; letter-spacing:2px;
  color:var(--text-muted); font-weight:700;
}
.co-primary-name {
  font-size:1.35rem; font-weight:800; color:var(--accent);
}
.co-primary-sub  { font-size:0.72rem; color:var(--text-muted); }
.co-primary-desc { font-size:0.78rem; line-height:1.55; margin-top:4px; }

/* ── Palette ──────────────────────────────────────────────────────────────── */
.co-palette {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:10px; margin-bottom:10px;
}
.co-swatch { display:flex; flex-direction:column; align-items:center; gap:5px; }
.co-swatch-circle {
  width:52px; height:52px; border-radius:50%;
  border:2px solid var(--border-hi);
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:700;
}
.co-swatch-name { font-size:0.60rem; text-align:center; line-height:1.3; }
.co-swatch-tone {
  font-size:0.58rem; color:var(--text-muted);
  background:var(--surface2); border-radius:4px; padding:1px 5px;
}
.co-palette-note { font-size:0.66rem; color:var(--text-muted); line-height:1.5; }

/* ── Loading / error ──────────────────────────────────────────────────────── */
.co-loading {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; padding:40px;
  color:var(--text); font-size:0.82rem;
}
.co-error {
  background:rgba(240,112,112,0.1); border:1px solid rgba(240,112,112,0.3);
  border-radius:var(--radius); padding:14px 16px;
  font-size:0.82rem; color:#f07070;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:860px) {
  .co-result-grid { grid-template-columns:1fr; }
  .co-photo-col   { position:static; }
  .co-intro-grid  { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .co-main { padding:12px 12px 40px; }
  .co-palette { grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); }
}

/* ── Swatch selection ─────────────────────────────────────────────────────── */
.co-swatch {
  cursor: pointer;
  transition: transform 0.15s;
}
.co-swatch:hover { transform: scale(1.08); }
.co-swatch.selected .co-swatch-circle {
  box-shadow: 0 0 0 3px var(--accent), 0 2px 10px rgba(0,0,0,0.5);
  transform: scale(1.12);
}
.co-swatch-circle { transition: transform 0.15s, box-shadow 0.15s; }

/* ── Action bar ───────────────────────────────────────────────────────────── */
.co-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.co-action-label { font-size: 0.78rem; }
.co-action-label strong { color: var(--accent); }
.co-action-btns { display: flex; gap: 8px; }

/* ── Colorist Profile ─────────────────────────────────────────────────────── */
.co-profile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
}
.co-profile-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.co-profile-card-title {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-muted); font-weight: 700; margin-bottom: 4px;
}
.co-profile-val  { font-size: 0.82rem; font-weight: 700; line-height: 1.3; }
.co-profile-sub  { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }

/* ── Primary block ────────────────────────────────────────────────────────── */
.co-primary-block {
  background: rgba(201,153,106,0.08); border: 1px solid rgba(201,153,106,0.22);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px;
}
.co-primary-label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--text-muted); font-weight: 700; margin-bottom: 4px;
}
.co-primary-name { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.co-primary-corridor {
  font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; line-height: 1.4;
}

/* ── Report sections ──────────────────────────────────────────────────────── */
.co-report-section { margin-bottom: 12px; }
.co-report-title {
  font-size: 0.68rem; font-weight: 700; margin-bottom: 6px; color: var(--text);
}
.co-report-item {
  font-size: 0.75rem; line-height: 1.5; padding: 3px 0;
}
.co-ok    { color: #7dd87d; }
.co-tech  { color: var(--text-muted); }
.co-avoid { color: #f07070; }

@media (max-width: 600px) {
  .co-profile-grid { grid-template-columns: 1fr; }
}

/* ── Color Previews ───────────────────────────────────────────────────────── */
.co-color-previews {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.co-prev-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.co-prev-wrap {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
  background: var(--surface2);
}
.co-prev-wrap img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 3/4;
}
.co-prev-badge {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 5px 6px;
  text-align: center;
  line-height: 1.3;
}
.co-prev-lv {
  font-size: 0.60rem;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .co-color-previews { grid-template-columns: repeat(2, 1fr); }
  .co-prev-item:last-child { display: none; }
}

/* ── Open tryons button ───────────────────────────────────────────────────── */
.co-tryons-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
}