/*
 * Harmony report UI. Tokens and sizes follow docs/ui-reference.md (measured on the reference).
 * Font: Manrope when it is installed locally (no external requests under CSP 'self'),
 * otherwise Inter / Segoe UI Variable / Segoe UI.
 */
:root {
  --font: Manrope, Inter, "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-photo: system-ui, -apple-system, "Segoe UI", sans-serif;

  --ink: #1C2429;
  --ink-2: #2d363d;
  --ink-3: #3d474f;
  --slate: #72838c;
  --slate-rgb: 114,131,140;
  --slate-2: #5a6670;
  --link: #5a6a75;
  --muted-600: #475569;
  --muted-500: #64748b;
  --muted-400: #94a3b8;
  --gray-900: #111827;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-100: #f3f4f6;
  --line: rgba(114,131,140,.14);
  --shadow-card: 0 1px 3px rgba(114,131,140,.08);
  --shadow-card-hover: 0 3px 8px rgba(114,131,140,.12);
  --divider: linear-gradient(90deg, rgba(114,131,140,.12) 0%, rgba(114,131,140,.04) 70%, transparent 100%);
  --dark-pill: linear-gradient(135deg, #1C2429 0%, #2d3a42 100%);
  --dark-pill-shadow: 0 2px 6px rgba(28,36,41,.2);
  --green: #4a7c59;
  --green-rgb: 74,124,89;
  --terra: #b07a5a;
  --terra-rgb: 176,122,90;
  --page-bg: linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);

  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-glass: 20px;

  --expo-out: cubic-bezier(.16,1,.3,1);
  --material: cubic-bezier(.4,0,.2,1);
  --ease: cubic-bezier(.25,.1,.25,1);
  --quint-out: cubic-bezier(.22,1,.36,1);

  --sidebar-w: 320px;
  --header-h: 48px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background: var(--page-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.4;
}
body.has-modal, body.has-screen { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.icon { flex: none; display: block; }
:focus-visible { outline: 2px solid rgba(114,131,140,.55); outline-offset: 2px; }

.divider { display: block; height: 1px; background: var(--divider); }
.divider--inset { margin: 0 24px; }
.divider-fade { display: block; height: 1px; margin: 0 24px; background: linear-gradient(90deg, transparent, rgba(114,131,140,.12) 20%, rgba(114,131,140,.12) 80%, transparent); }

/* ------------------------------------------------------------------ shell */
.sb {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
  display: flex; flex-direction: column; gap: 20px;
  padding: 16px 12px 12px; background: #fff; border-right: 1px solid var(--gray-100);
}
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0; }
.sb-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.sb-logo { width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink); }
.sb-section { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.sb-label { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; }
.sb-new {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px;
  border: 1px solid #e5e7eb; border-radius: var(--r-md); font-size: 11px; font-weight: 500; color: #4b5563;
  transition: background-color .15s var(--material), border-color .15s var(--material);
}
.sb-new:hover { background: #f9fafb; border-color: #d1d5db; }
.sb-item {
  display: grid; grid-template-columns: 36px 1fr 14px; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-lg); transition: background-color .15s var(--material);
}
.sb-item:hover { background: #f3f4f6; }
.sb-item.is-active { background: #e9ebee; }
.sb-thumb { width: 36px; height: 36px; border-radius: var(--r-lg); background: #d9dee2 center / cover no-repeat; }
.sb-thumb.is-empty { background: linear-gradient(165deg, #4a5660, #252d33); }
.sb-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-item-top { display: flex; align-items: baseline; justify-content: space-between; }
.sb-item-score { font-size: 15px; font-weight: 600; }
.sb-item-date { font-size: 10px; color: #9ca3af; }
.sb-item-sub { display: flex; gap: 8px; font-size: 10px; color: #9ca3af; font-weight: 500; }
.sb-item-sub b { font-weight: 600; margin-left: 3px; }
.sb-item-kind { margin-left: 5px; font-size: 10px; font-weight: 500; color: #9ca3af; }
.sb-item-chev { color: #c4c9ce; transition: opacity .15s var(--material); }
.sb-history { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.sb-entry { position: relative; }
.sb-del {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #9ca3af; background: #fff; box-shadow: 0 0 0 1px #e5e7eb;
  opacity: 0; transition: opacity .15s var(--material), color .15s var(--material), background-color .15s var(--material);
}
.sb-entry:hover .sb-del, .sb-del:focus-visible, .sb-del.is-armed { opacity: 1; }
.sb-entry:hover .sb-item-chev { opacity: 0; }
.sb-del:hover { color: #4b5563; }
.sb-del.is-armed { color: #fff; background: #b0493f; box-shadow: none; }
.sb-foot { display: flex; align-items: center; gap: 8px; padding: 12px 10px 4px; border-top: 1px solid var(--gray-100); font-size: 12px; color: var(--gray-500); }

.hd {
  position: fixed; top: 0; left: var(--sidebar-w); right: 0; z-index: 30;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-100);
}
.hd-row, .hd-sub { width: 90%; max-width: 1600px; margin: 0 auto; }
.hd-row { height: var(--header-h); display: flex; align-items: stretch; justify-content: space-between; }
.hd-left, .hd-tabs { display: flex; align-items: stretch; }
.hd-menu, .sb-close {
  display: none; place-items: center; width: 32px; height: 32px; margin: auto 6px auto -6px; border-radius: 8px; color: var(--gray-500);
  transition: background-color .15s var(--material), color .15s var(--material);
}
.hd-menu:hover, .sb-close:hover { background: var(--gray-100); color: #374151; }
.sb-close { margin: 0; }
.sb-scrim { display: none; }
.hd-tab {
  position: relative; display: flex; align-items: center; padding: 0 12px;
  font-size: 14px; font-weight: 500; color: var(--gray-500); transition: color .15s var(--material);
}
.hd-tab:hover { color: #374151; }
.hd-tab.is-active { color: var(--gray-900); }
.hd-tab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 9999px; background: var(--gray-900); }
.hd-actions { display: flex; align-items: center; gap: 10px; }
.hd-source { font-size: 11px; font-weight: 500; color: var(--muted-400); letter-spacing: .02em; }
.hd-round {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gray-100); color: var(--gray-500); transition: background-color .15s var(--material), color .15s var(--material);
}
.hd-round:hover { background: #e5e7eb; color: #374151; }
.hd-sub { display: none; padding: 0 0 0; height: 45px; align-items: flex-start; }
body.page-analysis .hd-sub { display: flex; }

.sn { display: flex; }
.sn-group {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px; margin-top: 0;
  background: rgba(255,255,255,.6); border: 1px solid var(--gray-100); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.sn-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--r-md);
  font-size: 12px; font-weight: 500; color: var(--gray-500);
}
.sn-item.is-active { background: #fff; color: var(--gray-900); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sn-segs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 4px; background: var(--gray-100); }
.sn-seg { padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 500; color: var(--gray-500); transition: background-color .15s var(--material), color .15s var(--material), box-shadow .15s var(--material); }
.sn-seg:hover { color: #374151; }
.sn-seg.is-active { background: #fff; color: var(--gray-900); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.main { margin-left: var(--sidebar-w); padding: calc(var(--header-h) + 40px) 0 80px; }
body.page-analysis .main { padding-top: calc(var(--header-h) + 45px + 40px); }
.container { width: 90%; max-width: 1600px; margin: 0 auto; }

/* ------------------------------------------------------------------ overview */
.ov { display: flex; flex-direction: column; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; z-index: 1; }
.pillar {
  position: relative; overflow: hidden; display: flex; flex-direction: column; text-align: left;
  min-height: 159px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-glass); box-shadow: var(--shadow-card);
  transition: box-shadow .2s var(--material);
}
.pillar:hover { box-shadow: var(--shadow-card-hover); }
.pillar-motif {
  position: absolute; right: -60px; bottom: -90px; width: 260px; height: 220px; pointer-events: none; opacity: .35;
  background:
    radial-gradient(closest-side, rgba(var(--m), .55), transparent 70%),
    repeating-radial-gradient(circle at 70% 70%, transparent 0 14px, rgba(114,131,140,.18) 14px 15px);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
.pillar-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 24px 12px; }
.pillar-title { flex: 1; font-size: 15px; font-weight: 600; letter-spacing: .15px; color: var(--ink); }
.pillar-arrow { color: var(--muted-400); transition: transform .2s var(--material); }
.pillar:hover .pillar-arrow { transform: translateX(2px); }
.pillar-body { position: relative; display: flex; flex-direction: column; padding: 12px 16px 14px; }
.pillar-desc { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--muted-600); }
.pillar-chips { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.chip-top { font-size: 10px; font-weight: 500; color: var(--muted-500); background: rgba(114,131,140,.06); border-radius: 4px; padding: 2px 8px; }
.chip-onein { font-size: 10px; color: var(--muted-400); }

.bignum { display: flex; align-items: baseline; gap: 4px; }
.bignum-v { font-weight: 700; line-height: 1; text-shadow: 0 0 28px rgba(var(--m), .18), 0 0 56px rgba(var(--m), .08); }
.bignum--md .bignum-v { font-size: 28px; letter-spacing: -.7px; }
.bignum--md .bignum-of { font-size: 14px; font-weight: 300; color: rgba(114,131,140,.3); }
.bignum--xl .bignum-v { font-size: 38px; letter-spacing: -.95px; }
.bignum--xl .bignum-of { font-size: 16px; font-weight: 300; color: rgba(114,131,140,.3); }

.connectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: -8px 0; position: relative; z-index: 0; }
.connector { justify-self: center; position: relative; width: 2px; height: 48px; border-radius: 9999px; overflow: hidden; background: rgba(100,116,139,.25); }
.connector-glint {
  position: absolute; left: 0; top: 0; width: 100%; height: 20px;
  background: linear-gradient(to bottom, transparent, rgba(100,116,139,.7), transparent);
  animation: flow-down-fast 2s ease-in-out infinite; animation-delay: var(--d);
  transform: translateY(-100%);
}
@keyframes flow-down-fast { from { transform: translateY(-100%); } to { transform: translateY(300%); } }

.ovc {
  position: relative; z-index: 2; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.55)), #fff;
  border: 1px solid var(--line); border-radius: var(--r-glass); box-shadow: var(--shadow-card);
}
.ovc-motif {
  position: absolute; right: -80px; top: -60px; width: 520px; height: 320px; pointer-events: none; opacity: .25;
  background: radial-gradient(closest-side, rgba(114,131,140,.35), transparent 75%);
  filter: blur(8px);
}
.ovc-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 24px; }
.ovc-title { flex: 1; font-size: 19px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.ovc-count { font-size: 11px; font-weight: 500; color: var(--muted-400); }
.ovc-score { position: relative; padding: 16px 24px 12px; }
.ovc-sub { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--muted-600); }
.ovc-body { position: relative; display: grid; grid-template-columns: minmax(0, 512px) minmax(0, 1fr); gap: 32px; padding: 0 24px 24px; align-items: start; }
.ovc-left { display: flex; flex-direction: column; gap: 12px; }
.ovc-chart { min-width: 0; }

.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 24px 20px; }
.seg-btn {
  position: relative; padding: 6px 12px; border-radius: var(--r-md); font-size: 12px; font-weight: 500; color: var(--slate);
  transition: color .2s var(--material), transform .2s var(--material);
}
.seg-btn:hover { color: var(--ink-3); transform: scale(1.02); }
.seg-btn:active { transform: scale(.98); }
.seg-pill {
  position: absolute; inset: 0; border-radius: var(--r-md); background: var(--dark-pill); box-shadow: var(--dark-pill-shadow);
  opacity: 0; transform: scale(.95); transition: opacity .2s var(--material), transform .2s var(--material);
}
.seg-label { position: relative; }
.seg-btn[aria-selected="true"] { color: #fff; }
.seg-btn[aria-selected="true"] .seg-pill { opacity: 1; transform: scale(1); }

.tile {
  position: relative; display: block; width: 100%; height: 60px; overflow: hidden; border-radius: var(--r-xl);
  border: 2px solid var(--gray-300); text-align: left;
  transition: border-color .3s var(--material), box-shadow .3s var(--material), transform .15s var(--material);
}
.tile:active, .pcard:active { transform: scale(.99); }
.tile-bg {
  position: absolute; inset: 0; opacity: .35; transition: opacity .3s var(--material);
  background: linear-gradient(165deg, rgba(114,131,140,.12), rgba(90,107,117,.08) 50%, rgba(74,86,96,.06));
}
.tile-content { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.tile-labels { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tile-label { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-pct { font-size: 12px; font-weight: 500; color: rgba(114,131,140,.6); }
.tile-num { display: flex; align-items: baseline; gap: 3px; }
.tile-v { font-size: 24px; font-weight: 700; color: var(--slate-2); transition: color .3s var(--material), text-shadow .3s var(--material); }
.tile-of { font-size: 14px; font-weight: 500; color: rgba(114,131,140,.35); }
.tile.is-selected { border-color: #9ca3af; box-shadow: 0 0 16px rgba(114,131,140,.25); }
.tile.is-selected .tile-bg { opacity: 1; }
.tile.is-selected .tile-v, .pcard.is-selected .tile-v {
  color: rgb(var(--m));
  text-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 20px rgba(var(--m), .25), 0 0 40px rgba(var(--m), .12);
}

.pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pcard {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); border: 2px solid var(--gray-300); background: #fff;
  transition: border-color .3s var(--material), box-shadow .3s var(--material), transform .15s var(--material);
}
.pcard-photo {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; opacity: .85; transition: opacity .3s var(--material);
  background: linear-gradient(165deg, rgba(114,131,140,.12), rgba(90,107,117,.08) 50%, rgba(74,86,96,.06));
}
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: contrast(.95) brightness(1.02); }
.thumb-ph { position: absolute; inset: 8%; width: 84%; height: 84%; fill: rgba(114,131,140,.45); }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 12px 16px; background: rgba(255,255,255,.98); }
.pcard.is-selected { border-color: rgb(var(--m)); box-shadow: 0 0 16px rgba(var(--m), .25); }
.pcard.is-selected .pcard-photo { opacity: 1; }

/* density chart */
.dchart { position: relative; width: 100%; height: 382px; }
.dchart-svg { display: block; overflow: visible; font-family: var(--font); }
.dchart-grid line { stroke: rgba(114,131,140,.06); }
.dchart-axes line { stroke: rgba(114,131,140,.08); }
.dchart-xt text { font-size: 11px; font-weight: 500; fill: #5a6b75; }
.dchart-yt text { font-size: 9px; font-weight: 500; fill: rgba(114,131,140,.5); }
.dchart-axis-label { font-size: 9px; font-weight: 500; letter-spacing: .1em; fill: rgba(114,131,140,.5); }
.dchart-axis-label--y { letter-spacing: .08em; }
.dchart-ref { stroke: var(--sc-rgb); opacity: .6; }
.dchart-conn { stroke: var(--sc-rgb); opacity: .25; }
.dchart-badge { fill: rgba(255,255,255,.95); stroke: rgba(var(--sc), .35); stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(0,0,0,.06)); }
.dchart-badge-text { font-size: 11px; font-weight: 600; letter-spacing: .02em; fill: var(--sc-rgb); font-variant-numeric: tabular-nums; }
.dchart-cursor { stroke: rgba(114,131,140,.2); opacity: 0; transition: opacity .15s; }
.dchart-hit { fill: transparent; cursor: crosshair; }
.dchart.is-hover .dchart-cursor { opacity: 1; }
.dchart-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 12px 16px;
  box-shadow: 0 4px 24px rgba(114,131,140,.12), 0 8px 32px rgba(114,131,140,.08), inset 0 1px 1px rgba(255,255,255,.9);
}
.dchart.is-hover .dchart-tip { opacity: 1; }
.dchart-tip-score { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.dchart-tip-pct { font-size: 12px; color: var(--slate); }
.dchart-tip-small { font-size: 10px; color: rgba(114,131,140,.7); margin-top: 2px; }

/* roller */
.roller { display: inline-flex; align-items: baseline; }
.roller-win { display: inline-block; overflow: hidden; width: .65em; height: 1.17em; line-height: 1.17em; vertical-align: bottom; text-align: center; }
.roller-col { display: flex; flex-direction: column; transition-property: transform; transition-timing-function: var(--expo-out); }
.roller-cell { display: block; height: 1.17em; line-height: 1.17em; }
.roller-dot { display: inline-block; width: .3em; text-align: center; }
/* the roller window is 1.17em tall; negative margins keep its layout box at 1em, like the static number */
.bignum .roller { line-height: 1.17; margin: -.085em 0; text-shadow: none; filter: drop-shadow(0 0 14px rgba(var(--m), .22)); }

/* strengths / areas */
.card-lg { background: #fff; border: 1px solid var(--line); border-radius: var(--r-glass); box-shadow: var(--shadow-card); }
.ov > .ins { margin-top: 16px; }
.ov > .ovc + .ins { margin-top: 24px; }
.ins { padding: 20px 24px; }
.ins-top { display: flex; flex-direction: column; }
.ins-title { font-size: 19px; font-weight: 600; color: var(--ink); padding-bottom: 12px; }
.ins-top .divider { margin-bottom: 4px; }
.ins-tabs { padding: 12px 0 16px; }
.ins-listbox { margin-top: 12px; }
.ins-tabs + .ins-listbox, .ins-top:has(.ins-tabs) + .ins-listbox { margin-top: 0; }
.ins-list { border-radius: var(--r-xl); background: rgba(255,255,255,.6); border: 1px solid rgba(114,131,140,.08); overflow: hidden; }
.ins-item { border-bottom: 1px solid rgba(0,0,0,.06); }
.ins-list > .ins-item:last-of-type, .ins-more-inner > .ins-item:last-child { border-bottom: 0; }
.ins-more.is-open { border-top: 1px solid rgba(0,0,0,.06); }
.ins-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; transition: background-color .2s var(--material); }
.ins-head:hover { background: rgba(114,131,140,.03); }
.ins-chip { flex: none; display: grid; place-items: center; width: 64px; height: 28px; border-radius: var(--r-lg); font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ins-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: rgba(0,0,0,.85); }
.ins-view { display: inline-block; white-space: nowrap; overflow-wrap: normal; margin-left: 8px; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-400); }
.ins-num { font-size: 14px; font-weight: 600; }
.ins-num--strength { color: var(--green); }
.ins-num--flaw { color: #b87088; }
.ins-chev { width: 16px; height: 16px; color: rgba(0,0,0,.25); transition: transform .25s var(--material); }
.ins-item.is-open .ins-chev { transform: rotate(180deg); }
.ins-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--material); }
.ins-body-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s ease-out; padding: 0 16px 0 92px; }
.ins-item.is-open .ins-body { grid-template-rows: 1fr; }
.ins-item.is-open .ins-body-inner { opacity: 1; padding-bottom: 16px; }
.ins-desc { font-size: 13px; line-height: 1.55; color: rgba(0,0,0,.6); }
.ins-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 11px; color: var(--slate); }
.ins-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--link); transition: gap .2s var(--material); }
.ins-open:hover { gap: 9px; }
.ins-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--material); }
.ins-more.is-open { grid-template-rows: 1fr; }
.ins-more-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s ease-out; }
.ins-more.is-open .ins-more-inner { opacity: 1; }
.ins-more-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding: 12px;
  border-radius: var(--r-xl); font-size: 13px; font-weight: 500;
  transition: transform .2s var(--material), background-color .2s var(--material);
}
.ins-more-btn:hover { transform: translateY(-1px) scale(1.01); }
.ins-more-btn:active { transform: scale(.98); }
.ins-more-btn--strength { background: rgba(74,124,89,.08); color: var(--green); }
.ins-more-btn--strength:hover { background: rgba(74,124,89,.12); }
.ins-more-btn--flaw { background: rgba(184,115,100,.08); color: #b87364; }
.ins-more-btn--flaw:hover { background: rgba(184,115,100,.12); }
.ins-more-chev { transition: transform .3s var(--material); }
.ins-more-btn[aria-expanded="true"] .ins-more-chev { transform: rotate(180deg); }
.ins-empty { padding: 18px 16px; font-size: 13px; color: var(--slate); border-radius: var(--r-xl); background: rgba(114,131,140,.04); }

/* ------------------------------------------------------------------ analysis */
.notice { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r-xl); background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.2); font-size: 13px; color: #8a5a12; }
.notice-title { font-weight: 600; }
.chips {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--shadow-card);
}
.vchip {
  display: flex; align-items: center; gap: 10px; min-width: 126px; padding: 8px 10px; border-radius: var(--r-xl);
  border: 1px solid transparent; background: rgba(255,255,255,.3); opacity: .75;
  transition: background-color .15s var(--material), border-color .15s var(--material), box-shadow .15s var(--material), opacity .15s var(--material), transform .15s var(--material);
}
.vchip:hover { opacity: .9; }
.vchip:active { transform: scale(.98); }
.vchip.is-active { background: rgba(255,255,255,.95); border-color: rgba(28,36,41,.12); box-shadow: 0 1px 3px rgba(0,0,0,.06); opacity: 1; }
.vchip-thumb { width: 36px; height: 36px; border-radius: var(--r-lg); background: #d9dee2 center / cover no-repeat; opacity: .85; flex: none; }
.vchip-thumb.is-empty { background: linear-gradient(165deg, #4a5660, #252d33); }
.vchip.is-active .vchip-thumb { opacity: 1; }
.vchip-text { display: flex; flex-direction: column; }
.vchip-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: rgba(114,131,140,.5); }
.vchip.is-active .vchip-label { color: rgba(28,36,41,.6); }
.vchip-num { font-size: 18px; font-weight: 700; color: rgb(var(--m)); line-height: 28px; }
.vchip-of { font-size: 12px; line-height: 1; font-weight: 400; color: rgba(114,131,140,.25); margin-left: 2px; }
.chips-spacer { flex: 1; }
.chips-sep { width: 1px; height: 40px; background: rgba(114,131,140,.08); margin: 0 8px; }
.chips-overall { display: flex; flex-direction: column; gap: 1px; padding-right: 12px; }
.chips-ov-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(114,131,140,.45); }
.chips-ov-num { font-size: 24px; font-weight: 700; color: rgb(var(--m)); line-height: 32px; }
.chips-ov-of { font-size: 12px; line-height: 1; font-weight: 400; color: rgba(114,131,140,.2); margin-left: 2px; }
.chips-ov-text { display: flex; flex-direction: column; gap: 2px; }
.chips-ov-word { font-size: 14px; font-weight: 600; color: var(--ink); }
.chips-ov-pct { font-size: 12px; font-weight: 500; color: rgba(114,131,140,.5); }

/* photo column 40% + 16 px gap: at 1920x889 the reference panel is 562 px (height-capped) and the list starts 16 px after the column */
.an-grid { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 16px; align-items: start; }
.an-photo { position: sticky; top: 100px; }
.an-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* photo panel */
.pp { width: 100%; max-width: min(100%, calc((100dvh - 140px) * 3 / 4)); transition: max-width .5s var(--material); }
.pp-shell {
  aspect-ratio: 3 / 4; max-height: calc(100dvh - 140px); padding: 2px; border-radius: 24px; background: rgba(255,255,255,.85);
  box-shadow: 0 0 60px rgba(255,255,255,.08), 0 0 100px rgba(255,255,255,.05), 0 8px 40px rgba(0,0,0,.2);
}
.pp-inner { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 22px; background: #1a1a1a; isolation: isolate; }
.pp-bg, .md-scene-wrap::before {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(114,131,140,.4), transparent 50%),
    radial-gradient(100% 60% at 80% 100%, rgba(90,107,117,.3), transparent 40%),
    radial-gradient(80% 50% at 20% 80%, rgba(72,87,97,.25), transparent 35%),
    linear-gradient(165deg, #4a5660, #3d474f 25%, #2f383f 50%, #252d33 75%, #1c2328);
}
.pp-bg { position: absolute; inset: 0; box-shadow: inset 0 2px 20px rgba(0,0,0,.3), inset 0 -2px 15px rgba(255,255,255,.03); }
.pp-vignette { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, transparent 40%, rgba(0,0,0,.25)); }
.pp-shine { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; }
.pp-shine--a { width: 45%; height: 30%; left: -10%; top: -8%; background: rgba(255,255,255,.07); }
.pp-shine--b { width: 40%; height: 25%; right: -12%; bottom: 20%; background: rgba(197,223,240,.05); }
.pp-views { position: absolute; inset: 0; }
.pp-layer { position: absolute; inset: 0; }
.pp-haze {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(var(--p), .3) 0%, rgba(var(--p), .12) 6%, rgba(var(--p), .04) 12%, transparent 20%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 70%);
  mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 70%);
  transition: opacity .4s;
}
.pp-noise {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .2; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 15%), linear-gradient(to left, #000 50%, transparent 70%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, #000 0%, transparent 15%), linear-gradient(to left, #000 50%, transparent 70%);
  mask-composite: intersect;
}
.pp-caption-blur {
  position: absolute; left: 0; right: 0; bottom: 0; height: 128px; z-index: 3; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
}
.pp-caption-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 228px; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(25,30,35,.92) 0%, rgba(25,30,35,.75) 30%, rgba(25,30,35,.4) 55%, rgba(25,30,35,.15) 75%, transparent);
}
.pp-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.pp-plaque {
  align-self: flex-start; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.75); background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.15), 0 1px 3px rgba(0,0,0,.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pp-caption-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pp-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-title { display: block; font-size: 20px; font-weight: 400; line-height: 1.15; letter-spacing: -.5px; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pp-sub { font-size: 20px; font-weight: 400; line-height: 1.15; letter-spacing: -.5px; color: rgba(255,255,255,.55); text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pp-scorebox { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.pp-scoreline { display: flex; align-items: baseline; gap: 4px; }
.pp-numbox { position: relative; display: inline-grid; }
.pp-num-ghost, .pp-num { grid-area: 1 / 1; font-size: 36px; font-weight: 400; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.pp-num-ghost { visibility: hidden; }
.pp-num { text-shadow: 0 2px 20px rgba(var(--p), .4), 0 4px 30px rgba(0,0,0,.25); transform-origin: right bottom; }
.pp-of { font-size: 16px; color: rgba(var(--p), .5); }
.pp-desc { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: .025em; color: rgba(var(--p), .7); }

/* photo stage (panel + modal) */
.stage { position: absolute; inset: 0; overflow: hidden; }
.stage-zoom { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.stage-zoom--ovl { pointer-events: none; }
.stage-fit { position: absolute; }
.stage-img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; }
.stage-img.is-feathered {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.stage-placeholder { display: block; width: 100%; height: 100%; fill: rgba(255,255,255,.28); }
.stage-dim { position: absolute; inset: -2px; background: #000; opacity: 0; transition: opacity .15s ease-out; pointer-events: none; }
.stage-dim.is-hidden, .stage-fit--ovl.is-hidden { visibility: hidden; }
.ov-glow, .ov-lines, .ov-points { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ov-glow { filter: blur(6px); }
.ov-line { fill: none; stroke-linecap: round; stroke-width: calc(var(--w, 2) * var(--k, 1) * 1px); }
.ov-tick { fill: none; stroke-linecap: round; stroke-width: calc(1.5px * var(--k, 1)); }
.ov-point { r: calc(4px * var(--k, 1)); fill: #ef4444; stroke: #fff; stroke-width: calc(1px * var(--k, 1)); transition: r .1s, fill .1s; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.ov-point.is-hot { r: calc(7px * var(--k, 1)); fill: #f59e0b; }
.ov-labels { position: absolute; inset: 0; }
.ov-label { position: absolute; width: 0; height: 0; transform: scale(var(--inv, 1)); transform-origin: 0 0; }
.ov-label-inner {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--font-photo); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ov-text, .ov-halo { display: block; }
.ov-halo { position: absolute; inset: 0; filter: blur(12px); opacity: .35; }
.ov-text { position: relative; text-shadow: 0 0 20px rgba(var(--c), .3), 0 1px 3px rgba(0,0,0,.5), 0 0 8px rgba(0,0,0,.3); }
.ov-num { font-size: 16px; font-weight: 600; }
.ov-unit { font-size: 11px; font-weight: 500; opacity: .85; margin-left: 1px; }
.stage.is-big .ov-num { font-size: 20px; }
.stage.is-big .ov-unit { font-size: 14px; }

/* ratio list */
.rl { border-radius: 28px; padding: 24px; }
.rl-head { padding: 8px 24px 12px; margin: -8px -24px 0; }
.rl-explain { display: flex; flex-direction: column; }
.rl-explain-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--slate); transition: color .2s; }
.rl-explain-btn:hover, .rl-explain-btn[aria-expanded="true"] { color: var(--ink-2); }
.rl-explain-chev { transition: transform .2s var(--material); }
.rl-explain-btn[aria-expanded="true"] .rl-explain-chev { transform: rotate(180deg); }
.rl-explain-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--material); }
.rl-explain-body > div { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .2s ease-out; }
.rl-explain.is-open .rl-explain-body { grid-template-rows: 1fr; }
.rl-explain.is-open .rl-explain-body > div { opacity: 1; }
.rl-explain-body p { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.5); padding-top: 10px; max-width: 70ch; }
.rl-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 14px; }
.rl-title { font-size: 20px; font-weight: 600; letter-spacing: .4px; color: var(--ink-2); }
.st { position: relative; display: inline-flex; }
.st-pill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; pointer-events: none; }
.st-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rl-sort { gap: 2px; }
.rl-sort .st-pill { border-radius: var(--r-lg); background: rgba(114,131,140,.1); border: 1px solid rgba(114,131,140,.15); }
.rl-sort .st-btn { padding: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); transition: color .2s; }
.rl-sort .st-btn:hover, .rl-sort .st-btn[aria-selected="true"] { color: var(--ink); }
.rl-rows { margin-top: 12px; }
.rl-group { display: flex; align-items: baseline; gap: 8px; padding: 18px 16px 6px; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.rl-group-count { font-size: 11px; font-weight: 500; color: rgba(114,131,140,.4); }
.rl-group-sep { height: 1px; margin: 10px 0 0; background: linear-gradient(90deg, rgba(114,131,140,.15), rgba(114,131,140,.08) 50%, transparent); }
/* the bar gives way first (300 -> 100 px), so the name keeps ~300 px and stays on one line on laptop widths */
.rrow {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(100px, calc(100% - 428px), 300px) 64px 16px; align-items: center; gap: 16px;
  padding: 16px 16px 16px 14px; border-left: 2px solid transparent; border-bottom: 1px solid rgba(114,131,140,.06);
  background: linear-gradient(90deg, rgba(114,131,140,.06) 0%, transparent 100%) no-repeat; background-size: 0% 100%;
  transition: background-size .2s ease, border-color .2s ease;
}
.rl-rows > .rrow:last-child { border-bottom: 0; }
.rrow:hover, .rrow:focus-visible { background-size: 100% 100%; border-left-color: rgb(var(--sc)); outline: none; }
.rrow-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.rrow-title { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: rgba(0,0,0,.8); }
.rrow-chip { font-size: 10px; padding: 2px 8px; border-radius: 9999px; color: rgb(var(--st)); background: rgba(var(--st), .12); transition: background-color .2s ease; white-space: nowrap; }
.rrow:hover .rrow-chip { background: rgba(var(--st), .18); }
.rrow-score { justify-self: end; font-size: 18px; line-height: 28px; font-weight: 600; color: rgb(var(--sc)); }
.rrow-score .dot { margin: 0 1px; }
.rrow-chev { width: 16px; height: 16px; color: rgba(0,0,0,.2); transition: color .2s ease, transform .2s ease; }
.rrow:hover .rrow-chev { color: var(--link); transform: translateX(2px); }
.rbar { position: relative; height: 10px; }
.rbar-track {
  position: absolute; inset: 0; border-radius: 9999px; opacity: .6; transition: opacity .25s;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.rrow:hover .rbar-track { opacity: .85; }
.rbar-ideal { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: rgba(100,180,180,.15); border: 1px solid rgba(100,180,180,.3); transition: background-color .25s, border-color .25s; }
.rrow:hover .rbar-ideal { background: rgba(40,205,170,.2); border-color: rgba(40,205,170,.4); }
.rbar-marker {
  position: absolute; top: 50%; width: 16px; height: 9px; transform: translate(-50%, -50%); border-radius: 999px;
  background: #fff; border: 2px solid var(--mb); box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: width .2s var(--ease), height .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.rrow.is-empty .rbar-marker, .rrow.is-empty .rbar-ideal { display: none; }
.rrow.is-empty .rbar-track { filter: grayscale(1); opacity: .25; }
.rrow:hover .rbar-marker { width: 18px; height: 10px; border-color: rgb(var(--sc)); box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 3px rgba(var(--sc), .15); }
.rl-foot { display: flex; justify-content: flex-end; padding: 20px 16px 0; }
.rl-next {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-lg);
  border: 1px solid rgba(114,131,140,.12); font-size: 12px; font-weight: 500; color: rgba(114,131,140,.7); transition: color .2s, border-color .2s;
}
.rl-next .icon { transition: transform .2s var(--material); }
.rl-next:hover { color: var(--ink-3); border-color: rgba(114,131,140,.25); }
.rl-next:hover .icon { transform: translateX(2px); }
.an-insights { display: flex; flex-direction: column; gap: 16px; }
.an-insights .ins-top { background: #fff; }

/* ------------------------------------------------------------------ modal */
.md-root { position: fixed; inset: 0; z-index: 50; }
.md-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
@media (min-width: 768px) { .md-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
.md-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 3vh 0; }
.md-panel-wrap { position: relative; }
.md-panel {
  position: relative; width: min(78rem, calc(100vw - 4rem)); max-height: 94vh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  outline: none; scrollbar-width: thin;
  /* the scrollbar must not change the width when the content grows or shrinks: a width change re-lays out
     the scene and the tab pill mid-animation (the illustration and the zoom would snap to the end) */
  scrollbar-gutter: stable;
}
.md-panel.is-expanded { width: 95vw; height: 95vh; max-height: 95vh; min-height: 85vh; }
@media (max-width: 1400px) and (min-width: 721px) { .md-panel { width: calc(100vw - 160px); } }
.md-header {
  position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 16px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.md-h-left { justify-self: start; }
.md-counter { display: inline-block; white-space: nowrap; padding: 4px 10px; border-radius: 9999px; background: rgba(0,0,0,.04); font-size: 12px; font-weight: 500; color: rgba(0,0,0,.45); }
.md-title { font-size: 18px; font-weight: 600; color: #1a1a1a; text-align: center; padding: 0 12px; }
.md-h-right { justify-self: end; display: flex; gap: 4px; }
.md-icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: rgba(0,0,0,.5); transition: background-color .2s var(--material), color .2s; }
.md-icon-btn:hover { background: rgba(0,0,0,.05); color: rgba(0,0,0,.7); }
.md-progress { position: absolute; left: 0; bottom: -1px; height: 1px; background: rgba(0,0,0,.35); transition: all .3s var(--material); }
.md-arrow {
  position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.95); box-shadow: 0 4px 20px rgba(0,0,0,.15); color: var(--slate); transition: transform .2s var(--material), opacity .2s;
}
.md-arrow:hover:not(:disabled) { transform: scale(1.1); }
.md-arrow:disabled { opacity: .2; }
.md-arrow--prev { right: calc(100% + 17px); }
.md-arrow--next { left: calc(100% + 17px); }
.md-body { display: flex; gap: 24px; padding: 24px; align-items: flex-start; }
.md-scene-col { width: 50%; flex: none; position: sticky; top: 64px; }
.md-scene-wrap {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-xl); border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.08); isolation: isolate; background: #1a1a1a;
}
.md-scene-wrap::before { content: ""; position: absolute; inset: 0; }
.md-scene-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--p, 190,190,150), .3) 0%, rgba(var(--p, 190,190,150), .12) 6%, transparent 18%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 70%);
  mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 70%);
}
.md-scene { position: absolute; inset: 0; }
.md-scene-btn {
  position: absolute; top: 10px; right: 10px; z-index: 45; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .2s, transform .2s var(--material);
}
.md-scene-btn:hover { background: rgba(0,0,0,.5); transform: scale(1.05); }
.md-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.md-score { display: flex; align-items: center; gap: 20px; padding: 14px 16px; border-radius: 24px; background: rgba(0,0,0,.02); border: 1px solid rgba(0,0,0,.06); }
.md-score-left { flex: none; min-width: 64px; }
.md-score-line { display: flex; align-items: baseline; gap: 3px; }
.md-score-num { font-size: 30px; font-weight: 600; line-height: 1; }
.md-score-of { font-size: 12px; font-weight: 500; color: rgba(0,0,0,.25); }
.md-score-label { margin-top: 6px; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.35); }

.gauge { flex: 1; min-width: 0; padding-top: 32px; }
.gauge-track { position: relative; height: 10px; }
.gauge-bar { position: absolute; inset: 0; border-radius: 9999px; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.gauge-ideal { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.65); }
.gauge-marker { position: absolute; top: -3px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 9999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.3); }
.gauge-bubble {
  position: absolute; bottom: calc(100% + 9px); padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: background-color .25s;
}
.gauge-bubble-unit { font-weight: 400; opacity: .7; margin-left: 1px; }
.gauge-labels { position: relative; height: 14px; margin-top: 6px; font-size: 10px; }
.gauge-l { position: absolute; top: 0; white-space: nowrap; }
.gauge-l--min { left: 0; color: rgba(0,0,0,.3); }
.gauge-l--max { right: 0; color: rgba(0,0,0,.3); }
.gauge-l--ideal { transform: translateX(-50%); color: rgba(74,124,89,.65); }

.md-tabs { position: sticky; top: 64px; z-index: 20; border-radius: 9999px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.md-tabs-track { display: flex; width: 100%; gap: 4px; padding: 4px; border-radius: 9999px; background: rgba(0,0,0,.045); }
.md-tabs-track .st-pill { top: 4px; bottom: 4px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04); }
.md-tabs-track .st-btn { flex: 1; padding: 8px 12px; font-size: 12px; font-weight: 600; color: rgba(0,0,0,.45); transition: color .2s; }
.md-tabs-track .st-btn[aria-selected="true"] { color: #1a1a1a; }
.md-content-inner { display: flex; flex-direction: column; gap: 16px; }
.md-card { padding: 16px; border-radius: var(--r-xl); background: rgba(0,0,0,.02); border: 1px solid rgba(0,0,0,.06); }
.md-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.4); }
.md-about { margin-top: 8px; font-size: 14px; line-height: 1.625; color: rgba(0,0,0,.7); }
.md-link-card {
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-xl); background: #fff; border: 1px solid #e4e4e7;
  transition: background-color .2s;
}
.md-link-card:hover { background: #fafafa; }
.md-link-icon { color: #71717a; }
.md-link-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.md-link-title { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.md-link-sub { font-size: 12px; color: #71717a; }
.md-link-arrow { color: #a1a1aa; }
.md-impact--flaw { background: linear-gradient(135deg, rgba(176,122,90,.04), rgba(176,122,90,.02)); border-color: rgba(176,122,90,.12); }
.md-impact--good { background: linear-gradient(135deg, rgba(34,139,34,.04), rgba(34,139,34,.02)); border-color: rgba(34,139,34,.12); }
.md-impact-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.md-impact-title { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.md-impact--flaw .md-impact-title { color: var(--terra); }
.md-impact--good .md-impact-title { color: #228B22; }
.md-impact-count { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px; font-size: 9px; font-weight: 600; }
.md-impact--flaw .md-impact-count { background: rgba(176,122,90,.12); color: var(--terra); }
.md-impact--good .md-impact-count { background: rgba(34,139,34,.1); color: #228B22; }
.md-impact-list { display: flex; flex-direction: column; gap: 8px; }
.md-impact-item { padding: 10px 12px; border-radius: var(--r-lg); background: rgba(255,255,255,.6); border: 1px solid rgba(176,122,90,.1); }
.md-impact--good .md-impact-item { border-color: rgba(34,139,34,.1); }
.md-impact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.md-impact-name { font-size: 14px; font-weight: 500; color: rgba(0,0,0,.8); }
.md-impact-chip { flex: none; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 500; }
.md-impact--flaw .md-impact-chip { background: rgba(176,122,90,.15); color: #9a6448; }
.md-impact--good .md-impact-chip { background: rgba(34,139,34,.1); color: #2f7a36; }
.md-impact-text { margin-top: 4px; font-size: 12px; line-height: 1.5; color: rgba(0,0,0,.5); }

.scc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.scc-headright { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.scc-hlabel { font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.4); }
.scc-hline { white-space: nowrap; }
.scc-hvalue { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.scc-hscore { font-size: 12px; }
.scc-plot { position: relative; }
.scc-svg { display: block; overflow: visible; font-family: var(--font); }
.scc-grid line { stroke: rgba(0,0,0,.04); }
.scc-ticks text { font-size: 9px; fill: rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.scc-ideal { fill: rgba(74,124,89,.08); stroke: rgba(74,124,89,.25); stroke-width: 1; }
.scc-ideal-label text, .scc-you-label text { font-size: 9px; font-weight: 600; fill: #fff; font-variant-numeric: tabular-nums; }
.scc-you { stroke: rgba(0,0,0,.4); stroke-width: 1.5; stroke-dasharray: 4 3; }
.scc-point { fill: #fff; stroke-width: 3; }
.scc-cursor { stroke: rgba(0,0,0,.18); stroke-width: 1; opacity: 0; transition: opacity .15s; }
.scc.is-hover .scc-cursor { opacity: 1; }
.scc-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .15s;
  padding: 10px; border-radius: 8px; background: rgba(0,0,0,.85); color: #fff; font-size: 11px; line-height: 1.5;
}
.scc.is-hover .scc-tip { opacity: 1; }
.scc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.05); font-size: 10px; color: rgba(0,0,0,.5); }
.scc-leg-name { font-weight: 500; color: rgba(0,0,0,.6); margin-right: auto; }
.scc-leg { display: inline-flex; align-items: center; gap: 6px; }
.scc-leg-ideal { width: 10px; height: 10px; border-radius: 2px; background: rgba(74,124,89,.2); border: 1px solid rgba(74,124,89,.4); }
.scc-leg-you { width: 14px; height: 0; border-top: 1.5px dashed rgba(0,0,0,.45); }

.md-points { display: flex; flex-direction: column; margin-top: 10px; }
.md-point { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; transition: background-color .15s; cursor: default; }
.md-point:hover { background: rgba(0,0,0,.03); }
.md-point-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(239,68,68,.25); }
.md-point.is-missing .md-point-dot { background: #d4d4d8; box-shadow: none; }
.md-point-name { flex: 1; font-size: 12px; font-weight: 500; color: rgba(0,0,0,.75); }
.md-point-state { font-size: 11px; color: rgba(0,0,0,.35); }
.md-note { margin-top: 10px; font-size: 12px; color: rgba(0,0,0,.45); }

/* ------------------------------------------------------------------ upload + processing */
.screen { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: var(--page-bg); overflow-y: auto; }
.up-card { width: min(760px, 100%); padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); box-shadow: 0 20px 60px -20px rgba(28,36,41,.18); }
.up-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.up-title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.up-lead { margin-top: 8px; font-size: 14px; color: var(--muted-600); }
.up-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.dz {
  position: relative; display: block; aspect-ratio: 4 / 5; max-height: 46vh; width: 100%; border-radius: var(--r-xl); overflow: hidden; cursor: pointer;
  border: 1.5px dashed rgba(114,131,140,.35); background: linear-gradient(165deg, rgba(114,131,140,.08), rgba(74,86,96,.04));
  transition: border-color .2s var(--material), background-color .2s var(--material), transform .2s var(--material);
}
.dz:hover, .dz.is-drag { border-color: rgba(114,131,140,.7); transform: translateY(-1px); }
.dz-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; pointer-events: none; }
.dz-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--slate); box-shadow: var(--shadow-card-hover); }
.dz-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.dz-hint { font-size: 12px; color: var(--slate); max-width: 22ch; min-height: 4.2em; } /* 3 lines: both pickers keep the icon at the same height */
.dz-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s var(--material); pointer-events: none; }
.dz.has-file .dz-preview { opacity: 1; }
.dz.has-file { border-style: solid; }
.dz-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.4); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; pointer-events: none; }
.dz.has-file .dz-tag { opacity: 1; }
.dz.is-bad { border: 1.5px solid rgba(176,73,63,.7); box-shadow: 0 0 0 4px rgba(176,73,63,.08); }
.dz.is-bad .dz-tag { background: rgba(176,73,63,.85); }
.up-error { min-height: 20px; margin-top: 12px; font-size: 13px; color: #b0493f; }
.up-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.btn-dark {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--dark-pill); box-shadow: var(--dark-pill-shadow); transition: transform .2s var(--material), opacity .2s, box-shadow .2s;
}
.btn-dark:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(28,36,41,.22); }
.btn-dark:active:not(:disabled) { transform: scale(.98); }
.btn-dark:disabled { opacity: .35; }
.btn-ghost { height: 40px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--link); transition: background-color .2s; }
.btn-ghost:hover { background: rgba(114,131,140,.08); }
.up-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(114,131,140,.1); font-size: 12px; color: var(--slate); }

.pr { background: radial-gradient(60% 50% at 50% 45%, #eef3f6 0%, #f8f9fa 60%, #fff 100%); }
.pr-center { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.pr-text { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 280px; }
.pr-label { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.pr-bar { width: 220px; height: 2px; border-radius: 9999px; background: rgba(114,131,140,.15); overflow: hidden; }
.pr-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #4a6478, #1C2429); transform-origin: 0 50%; transform: scaleX(.02); transition: transform .6s var(--expo-out); }
.pr-pct { font-size: 11px; font-weight: 500; color: var(--muted-400); letter-spacing: .06em; }

.orb { --orb-body-core: #141c24; --orb-body-mid: #4a6478; --orb-body-rim: #c5dff0; position: relative; width: 240px; height: 240px; perspective: 600px; }
.orb-float { position: absolute; inset: 0; }
.orb-core, .orb-bloom, .orb-ripple, .orb-ring, .orb-particles, .orb-signal { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.orb-core { width: 120px; height: 120px; margin: -60px 0 0 -60px; overflow: hidden; box-shadow: 0 0 40px rgba(197,231,255,.35), 0 18px 40px -10px rgba(20,28,36,.45); }
.orb-body { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 38% 34%, var(--orb-body-rim) 0%, var(--orb-body-mid) 38%, var(--orb-body-core) 78%); }
.orb-shine { position: absolute; left: 18%; top: 12%; width: 42%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); }
.orb-scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(to bottom, transparent, rgba(197,231,255,.35), transparent); transform: translateY(-110%); }
.orb-bloom { width: 240px; height: 240px; margin: -120px 0 0 -120px; background: radial-gradient(closest-side, #c5e7ff6b, #bac6ff29 55%, transparent 75%); }
.orb-ripple { width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 1px solid rgba(74,100,120,.35); opacity: 0; }
.orb-ring { width: 200px; height: 200px; margin: -100px 0 0 -100px; border: 1px solid rgba(74,100,120,.28); transform: rotateX(62deg); }
.orb-ring--b { width: 172px; height: 172px; margin: -86px 0 0 -86px; border-color: rgba(74,100,120,.2); }
.orb-spark { position: absolute; left: 50%; top: -2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #4a6478; box-shadow: 0 0 8px rgba(74,100,120,.6); }
.orb-particles { width: 0; height: 0; }
.orb-particles span {
  position: absolute; left: -2px; top: -2px; width: 3px; height: 3px; border-radius: 50%; background: #c5e7ffcc; box-shadow: 0 0 6px #c5e7ff;
  --r: calc(78px + var(--i) * 7px); transform: rotate(calc(var(--i) * 60deg)) translateX(var(--r));
}
.orb-signal { width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 2px solid rgba(197,231,255,.8); opacity: 0; }

.orb.is-intro .orb-float { animation: orb-intro 2.2s var(--quint-out) both; }
.orb.is-intro .orb-bloom { animation: orb-bloom-in 2.2s var(--quint-out) both; }
.orb.is-active .orb-float { animation: orb-float 5.5s cubic-bezier(.45,0,.55,1) infinite alternate; }
.orb.is-active .orb-bloom { animation: orb-breathe 4.5s ease-in-out infinite; }
.orb.is-active .orb-ring--a { animation: orb-spin-a 14s linear infinite; }
.orb.is-active .orb-ring--b { animation: orb-spin-b 10s linear infinite; }
.orb.is-active .orb-ripple { animation: orb-ripple 6s cubic-bezier(.45,0,.55,1) infinite; }
.orb.is-active .orb-ripple--late { animation-delay: -3s; }
.orb.is-active .orb-scan { animation: orb-scan 5s ease-in-out infinite; }
.orb.is-active .orb-particles span { animation: orb-orbit calc(6.5s + var(--i) * .5s) linear infinite; }
.orb.is-signal .orb-core { animation: orb-signal .88s var(--expo-out); }
.orb.is-signal .orb-signal { animation: orb-signal-ring 1.1s var(--expo-out); }
@keyframes orb-intro {
  0% { transform: scale(.38); opacity: .15; }
  55% { transform: scale(1.05); opacity: 1; }
  78% { transform: scale(.98); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes orb-bloom-in { 0%, 32% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: scale(1); } }
@keyframes orb-float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(5px, -7px) scale(1.015); }
  66% { transform: translate(-3px, -11px) scale(1.028); }
  100% { transform: translate(4px, -5px) scale(1.01); }
}
@keyframes orb-breathe { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes orb-spin-a { from { transform: rotateX(62deg) rotateZ(0deg); } to { transform: rotateX(62deg) rotateZ(360deg); } }
@keyframes orb-spin-b { from { transform: rotateX(62deg) rotateY(12deg) rotateZ(360deg); } to { transform: rotateX(62deg) rotateY(12deg) rotateZ(0deg); } }
@keyframes orb-ripple { 0% { transform: scale(.88); opacity: 0; } 15% { opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes orb-scan { 0% { transform: translateY(-110%); } 60%, 100% { transform: translateY(360%); } }
@keyframes orb-orbit { from { transform: rotate(calc(var(--i) * 60deg)) translateX(var(--r)); } to { transform: rotate(calc(var(--i) * 60deg + 360deg)) translateX(var(--r)); } }
@keyframes orb-signal { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes orb-signal-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1279px) {
  :root { --sidebar-w: 0px; }
  .sb {
    width: min(320px, 86vw); z-index: 55; box-shadow: 0 0 40px rgba(28,36,41,.18);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .3s var(--material), visibility 0s linear .3s;
  }
  body.sb-open .sb { transform: none; visibility: visible; transition: transform .3s var(--material); }
  .sb-scrim { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .3s var(--material); }
  body.sb-open .sb-scrim { opacity: 1; pointer-events: auto; }
  body.sb-open { overflow: hidden; }
  .hd-menu, .sb-close { display: grid; }
}
@media (max-width: 1100px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connectors { display: none; }
  .ovc { margin-top: 16px; }
  .ovc-body { grid-template-columns: 1fr; }
  .ovc-left { max-width: 560px; }
}
@media (max-width: 900px) {
  .an-grid { grid-template-columns: 1fr; }
  .an-photo { position: relative; top: 0; }
  .pp { max-width: 420px; margin: 0 auto; }
  .rrow { grid-template-columns: minmax(0, 1fr) minmax(80px, 160px) 52px 16px; gap: 10px; }
  .chips-ov-text { display: none; }
}
@media (max-width: 720px) {
  .container, .hd-row, .hd-sub { width: auto; margin: 0 16px; }
  .pillars { grid-template-columns: 1fr; }
  .md-frame { padding: 0; align-items: flex-end; }
  .md-panel { width: 100vw; max-height: 92vh; border-radius: 24px 24px 0 0; }
  .md-arrow { display: none; }
  .md-body { flex-direction: column; align-items: stretch; padding: 16px; }
  .md-right { width: 100%; }
  .md-title { font-size: 16px; }
  .md-scene-col { width: 100%; position: relative; top: 0; }
  .rrow { grid-template-columns: minmax(0, 1fr) 52px 16px; gap: 10px; padding: 14px 10px 14px 8px; }
  .rbar { display: none; }
  .rl { padding: 16px 12px; border-radius: 24px; }
  .rl-head { margin: -8px -12px 0; padding: 8px 12px 12px; }
  .rl-titlebar { flex-wrap: wrap; }
  .rl-title { font-size: 18px; }
  .rl-sort .st-btn { padding: 6px 10px; font-size: 11px; letter-spacing: .06em; }
  .ins { padding: 16px 12px; }
  .ins-body-inner { padding-left: 16px; }
  .ins-chip { width: 56px; }
  .dz-hint { display: none; }
  .chips { flex-wrap: wrap; }
  .chips-sep, .chips-spacer { display: none; }
  /* the chips wrap here: the phrase and «Топ X%» come back on a line of their own under the chips (hidden at 721-900 px only) */
  .chips-ov-text { display: flex; flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 8px 0; }
  .up-zones { grid-template-columns: 1fr 1fr; gap: 10px; }
  .screen.up { padding: 16px; }
  .up-card { padding: 20px; }
  .up-actions { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .up-actions .btn-dark { justify-content: center; height: 46px; }
  .hd-source { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .connector-glint { display: none; }
}

/* ------------------------------------------------------------------ runs: our pipeline vs FaceIQ */
/* FaceIQ is indigo everywhere (chips, bar diamond, curve line, photo points); tones rate a Δ */
.tone-good { color: #3f7a55; }
.tone-mid { color: #a36f16; }
.tone-bad { color: #b0493f; }
.tone-none { color: #9ca3af; }
.rn-delta, .cmpt-delta, .rrow-dv, .fq-line > span[class^="tone-"] { border-radius: 6px; }
.rn-delta:not(.tone-none), .cmpt-delta:not(.tone-none), .rrow-dv:not(.tone-none) { background: color-mix(in srgb, currentColor 11%, transparent); }
body.is-loading-run { cursor: progress; }
body.is-loading-run .main { opacity: .65; transition: opacity .2s var(--material); }

/* sidebar: history and runs share one scroll column */
.sb-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; margin: 0 -4px; padding: 0 4px 8px; scrollbar-width: thin; }
.sb-scroll > .sb-section { flex: none; }
.sb-scroll .sb-history { overflow: visible; margin: 0; padding: 0; }
.sb-empty { padding: 4px 10px 2px; font-size: 12px; color: #9ca3af; }
.sb-runs { gap: 4px; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.rn-head { width: 100%; display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: var(--r-md); transition: background-color .15s var(--material); }
.rn-head:hover { background: #f9fafb; }
.rn-head-icon { color: #6366f1; }
.rn-head-sub { font-size: 11px; color: var(--muted-400); }
.rn-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; display: grid; place-items: center; border-radius: 9999px; background: rgba(99,102,241,.1); color: #4f46e5; font-size: 10px; font-weight: 600; }
.rn-count:empty { display: none; }
.rn-head .rn-count:empty + .rn-chev { margin-left: auto; }
.rn-chev { flex: none; color: #b8bec4; transition: transform .25s var(--material); }
.rn-head[aria-expanded="true"] > .rn-chev, .rn-label[aria-expanded="true"] .rn-chev { transform: rotate(180deg); }
.rn-body, .rn-group-body, .rb-sum { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--material); }
.rn-body.is-open, .rn-group-body.is-open, .rb-sum.is-open { grid-template-rows: 1fr; }
.rn-body-inner, .rn-group-inner, .rb-sum-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s ease-out; }
.rn-body.is-open .rn-body-inner, .rn-group-body.is-open .rn-group-inner, .rb-sum.is-open .rb-sum-inner { opacity: 1; }
.rn-controls { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 10px; }
.rn-ctrl-row { display: flex; align-items: center; gap: 6px; }
.rn-ctrl-label { width: 38px; flex: none; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; }
.rn-seg { gap: 1px; padding: 2px; border-radius: var(--r-md); background: var(--gray-100); }
.rn-seg .st-pill { top: 2px; bottom: 2px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rn-seg .st-btn { padding: 3px 7px; font-size: 11px; font-weight: 500; color: var(--gray-500); transition: color .15s var(--material); }
.rn-seg .st-btn:hover, .rn-seg .st-btn[aria-selected="true"] { color: var(--gray-900); }
.rn-groups { display: flex; flex-direction: column; gap: 2px; }
.rn-label { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--r-lg); transition: background-color .15s var(--material); }
.rn-label:hover { background: #f3f4f6; }
.rn-group.has-active > .rn-label .rn-label-name { color: #4338ca; }
.rn-label-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rn-label-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rn-label-meta { font-size: 10px; color: #9ca3af; }
.rn-gsum { display: flex; gap: 10px; font-size: 10px; color: var(--muted-500); }
.rn-gsum b { font-weight: 600; }
.rn-list { display: flex; flex-direction: column; gap: 1px; margin: 0 0 6px 10px; padding-left: 4px; border-left: 1px solid rgba(99,102,241,.14); }
.rn-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: var(--r-lg); transition: background-color .15s var(--material), box-shadow .15s var(--material); }
.rn-item:hover { background: #f3f4f6; }
.rn-item.is-active { background: rgba(99,102,241,.08); box-shadow: inset 2px 0 0 #6366f1; }
.rn-item.is-missing { opacity: .45; cursor: default; }
.rn-thumb { width: 30px; height: 30px; border-radius: 7px; }
.rn-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rn-top { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.rn-alias { flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rn-tag { flex: none; display: inline-block; height: 15px; padding: 0 5px; border-radius: 4px; font-size: 9px; line-height: 15px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.rn-tag--set-train { background: rgba(114,131,140,.12); color: var(--slate-2); }
.rn-tag--set-test { background: rgba(74,124,89,.12); color: #3f6b4c; }
.rn-tag--set-repeat { background: rgba(34,211,238,.15); color: #0e7490; }
.rn-tag--mode-refined { background: rgba(99,102,241,.1); color: #4f46e5; }
.rn-tag--mode-raw { background: rgba(245,158,11,.15); color: #8a560c; }
.rn-tag--excl { background: rgba(176,73,63,.1); color: #9b3f36; }
.rn-sub { display: flex; gap: 8px; font-size: 10px; color: #9ca3af; white-space: nowrap; }
.rn-sub b { font-weight: 600; color: var(--muted-600); }
.rn-sub-fq b { color: #4f46e5; }
.rn-delta { min-width: 44px; padding: 3px 6px; text-align: center; font-size: 12px; font-weight: 700; }
.rn-item.is-excluded .rn-delta, .rn-item.is-missing .rn-delta { font-size: 10px; font-weight: 500; }
.rn-loading, .rn-empty { padding: 8px 10px; font-size: 11px; line-height: 1.5; color: #9ca3af; }

/* run header above the pages */
.rb { position: relative; margin-bottom: 16px; padding: 14px 20px 16px; border-color: rgba(99,102,241,.16); background: linear-gradient(135deg, rgba(99,102,241,.045), rgba(255,255,255,0) 45%), #fff; }
.rb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rb-id { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.rb-kicker { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6366f1; }
.rb-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.rb-meta { font-size: 11px; color: var(--muted-400); }
.rb-nav { display: flex; gap: 6px; flex: none; }
.rb-nav-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(114,131,140,.16);
  font-size: 12px; font-weight: 600; color: var(--slate-2); transition: background-color .15s var(--material), border-color .15s var(--material), transform .15s var(--material);
}
.rb-nav-btn:hover:not(:disabled) { background: rgba(114,131,140,.06); border-color: rgba(114,131,140,.3); }
.rb-nav-btn:active:not(:disabled) { transform: scale(.97); }
.rb-nav-btn:disabled { opacity: .35; }
.rb-report { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }
.rb-alias { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.rb-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-tags .rn-tag, .md-cmp-head .rn-tag { height: 19px; padding: 0 7px; font-size: 10px; line-height: 19px; }
.rb-spacer { flex: 1; }
.rb-sum-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9999px; font-size: 12px; font-weight: 600; color: #4f46e5; background: rgba(99,102,241,.08); transition: background-color .2s var(--material), transform .15s var(--material); }
.rb-sum-btn:hover { background: rgba(99,102,241,.14); }
.rb-sum-btn:active { transform: scale(.98); }
.rb-sum-chev { transition: transform .25s var(--material); }
.rb-sum-btn[aria-expanded="true"] .rb-sum-chev { transform: rotate(180deg); }
.rb-notes { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.rb-note { font-size: 12px; line-height: 1.5; color: var(--muted-500); }
.rb-sum.is-open .rb-sum-inner { padding-top: 14px; }
.rb-sum-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.rb-sum-inner > .rb-note { margin-top: 8px; font-size: 11px; }
.rb-table-wrap { overflow-x: auto; border-radius: var(--r-xl); border: 1px solid rgba(114,131,140,.1); background: rgba(255,255,255,.75); }
.rb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rb-table th, .rb-table td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(114,131,140,.08); }
.rb-table thead th { font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-400); background: rgba(114,131,140,.04); }
.rb-table thead th:first-child, .rb-table tbody th { text-align: left; }
.rb-table tbody th { font-weight: 600; color: var(--ink-3); }
.rb-table tbody td { font-weight: 600; color: var(--ink-3); }
.rb-table tbody tr:last-child > * { border-bottom: 0; }
.rb-table tr.is-current { background: rgba(99,102,241,.06); }
.rb-table .rb-sep { border-left: 1px solid rgba(114,131,140,.1); }
.rb-table tbody th, .rb-table thead th:first-child { white-space: normal; min-width: 110px; }
.rb-sub { display: block; max-width: 240px; font-size: 10px; font-weight: 500; line-height: 1.35; color: var(--muted-400); }
.rb-dim { color: #b8bec4; font-weight: 500; }

/* overview: both totals, zone scores */
.cmpt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 660px; margin-top: 14px; }
.cmpt-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-xl); background: rgba(255,255,255,.75); border: 1px solid rgba(114,131,140,.12); }
.cmpt-cell.is-off { opacity: .6; }
.cmpt-label { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-400); }
.cmpt-nums { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.cmpt-ours { font-size: 20px; font-weight: 700; line-height: 1.1; }
.cmpt-vs { font-size: 10px; font-weight: 600; color: #6366f1; }
.cmpt-fq { font-size: 14px; font-weight: 600; color: #4f46e5; }
.cmpt-delta { align-self: flex-start; padding: 1px 7px; font-size: 12px; font-weight: 700; }
.pillar-fq { margin-top: 8px; font-size: 11px; color: var(--muted-500); }
.pillar-fq b { font-weight: 600; color: #4f46e5; }
.fq-line { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--muted-500); white-space: nowrap; }
.fq-line b { font-weight: 600; color: #4f46e5; }
.fq-line > span { font-weight: 600; }
.fq-line.is-off { opacity: .6; }

/* ratio list */
.rl.is-compare .rrow { grid-template-columns: minmax(0, 1fr) clamp(90px, calc(100% - 480px), 260px) 96px 16px; }
.rrow-fq, .rrow-dv { font-size: 10px; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.rrow-fq { color: #4f46e5; background: rgba(99,102,241,.08); }
.rrow-fq.is-off, .rrow-fqscore.is-off, .rbar-fq.is-off { opacity: .45; }
.rrow-score--cmp { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.2; }
.rrow-score--cmp .rrow-score-main { font-size: 18px; line-height: 24px; }
.rrow-fqscore { display: flex; gap: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.rrow-fqscore-v { color: #6366f1; }
.rbar-fq {
  position: absolute; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px;
  background: #6366f1; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease);
}
.rrow:hover .rbar-fq { transform: translate(-50%, -50%) rotate(45deg) scale(1.2); }
.rl-cmp { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: -2px 0 12px; }
.rl-cmp-legend { display: flex; gap: 10px; font-size: 11px; color: var(--muted-500); }
.rl-leg { display: inline-flex; align-items: center; gap: 5px; }
.rl-leg-ours { width: 14px; height: 8px; border-radius: 999px; background: #fff; border: 2px solid #72838c; }
.rl-leg-fq { width: 8px; height: 8px; margin: 0 1px; border-radius: 2px; transform: rotate(45deg); background: #6366f1; }
.rl-cmp-filter { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rl-cmp-label { font-size: 11px; color: var(--muted-500); }
.rl-filter .st-btn { padding: 4px 9px; font-size: 11px; letter-spacing: 0; text-transform: none; }
.rl-cmp-count { font-size: 11px; color: var(--muted-400); }
.rl-cmp-note { flex-basis: 100%; font-size: 12px; color: #9b3f36; }
.rl-none { padding: 24px 16px; font-size: 13px; color: var(--slate); }

/* modal: comparison card, FaceIQ points on the photo, curve */
.md-cmp { padding: 14px 16px; border-color: rgba(99,102,241,.14); background: linear-gradient(135deg, rgba(99,102,241,.045), rgba(99,102,241,.015)); }
.md-cmp.is-off { opacity: .75; }
.md-cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.md-cmp-grid { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; row-gap: 5px; font-size: 13px; }
.md-cmp-cell { padding-left: 16px; text-align: right; color: rgba(0,0,0,.75); font-weight: 500; }
.md-cmp-cell:nth-child(3n+1) { padding-left: 0; text-align: left; }
.md-cmp-colhead { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.35); }
.md-cmp-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.md-cmp-who i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.08); }
.md-cmp-delta-label, .md-cmp-delta { padding-top: 5px; border-top: 1px solid rgba(0,0,0,.06); }
.md-cmp-delta-label { font-weight: 600; color: rgba(0,0,0,.5); }
.md-cmp-delta { font-weight: 700; }
.md-cmp-pair { color: rgba(0,0,0,.5); }
.md-cmp-note { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: rgba(0,0,0,.5); }
.md-cmp-note + .md-cmp-note { margin-top: 2px; }
.md-scene-cmp {
  position: absolute; top: 10px; left: 10px; z-index: 45; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9999px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 12px; font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .2s, border-color .2s, transform .2s var(--material), opacity .2s;
}
.md-scene-cmp:hover:not(:disabled) { background: rgba(0,0,0,.5); transform: scale(1.03); }
.md-scene-cmp[aria-pressed="true"] { background: rgba(99,102,241,.85); border-color: rgba(255,255,255,.3); }
.md-scene-cmp[aria-pressed="true"]:hover { background: rgba(99,102,241,.95); }
.md-scene-cmp:disabled { opacity: .45; cursor: not-allowed; }
.md-cmp-legend {
  position: absolute; left: 10px; bottom: 10px; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 12px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 11px; font-weight: 500; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s var(--material), transform .25s var(--material);
}
.md-cmp-legend.is-on { opacity: 1; transform: none; pointer-events: auto; }
.md-cmp-legend-items { display: flex; gap: 10px; }
.md-cmp-leg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.md-cmp-leg i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.md-cmp-all { padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.8); background: rgba(255,255,255,.12); transition: background-color .2s, color .2s; }
.md-cmp-all:hover { background: rgba(255,255,255,.2); }
.md-cmp-all[aria-pressed="true"] { background: rgba(255,255,255,.92); color: #1a1a1a; }
.md-point-px { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 66px; font-size: 11px; font-weight: 600; }
.md-point-px i { width: 6px; height: 6px; border-radius: 50%; }
.stage-fit--cmp { pointer-events: none; }
.ov-cmp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .25s ease-out; }
.ov-cmp.is-on { opacity: 1; }
.ov-cmp-link { stroke-width: calc(1.5px * var(--k, 1)); stroke-dasharray: calc(3px * var(--k, 1)) calc(2.5px * var(--k, 1)); stroke-linecap: round; opacity: .9; transition: opacity .15s; }
.ov-cmp-dot { r: calc(4px * var(--k, 1)); stroke: #fff; stroke-width: calc(1.2px * var(--k, 1)); filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); transition: r .12s, opacity .15s; }
.ov-cmp-dot.is-ref { r: calc(4.5px * var(--k, 1)); }
.ov-cmp-dot.is-hot { r: calc(6.5px * var(--k, 1)); }
.ov-cmp.has-hot .ov-cmp-dot:not(.is-hot), .ov-cmp.has-hot .ov-cmp-link:not(.is-hot) { opacity: .3; }
.ov-cmp-hit { r: calc(10px * var(--k, 1)); fill: transparent; pointer-events: all; cursor: crosshair; }
.ov-cmp-tip {
  position: absolute; left: 0; top: 0; z-index: 46; transform: translate(-50%, -100%); padding: 8px 10px; border-radius: 10px;
  background: rgba(15,18,22,.9); color: #fff; font-size: 11px; line-height: 1.55; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); opacity: 0; transition: opacity .15s;
}
.ov-cmp-tip.is-on { opacity: 1; }
.ov-cmp-tip-name { margin-bottom: 2px; font-weight: 600; }
.ov-cmp-tip-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.ov-cmp-tip-xy { color: rgba(255,255,255,.55); }
.scc-fq { stroke: rgba(79,70,229,.75); stroke-width: 1.5; stroke-dasharray: 2 3; }
.scc-fq-point { fill: #fff; stroke: #6366f1; stroke-width: 2.5; }
.scc-fq-label text { font-size: 9px; font-weight: 600; fill: #fff; font-variant-numeric: tabular-nums; }
.scc-leg--fq { display: none; }
.scc.has-fq .scc-leg--fq { display: inline-flex; }
.scc-leg-fq { width: 14px; height: 0; border-top: 1.5px dashed rgba(79,70,229,.85); }

@media (max-width: 900px) {
  .rl.is-compare .rrow { grid-template-columns: minmax(0, 1fr) minmax(70px, 140px) 88px 16px; gap: 10px; }
}
@media (max-width: 720px) {
  .rl.is-compare .rrow { grid-template-columns: minmax(0, 1fr) 88px 16px; }
  .rl-cmp-filter { margin-left: 0; }
  .rb { padding: 12px 14px 14px; }
  .rb-top { flex-wrap: wrap; }
  .rb-alias { font-size: 20px; }
  .cmpt { grid-template-columns: 1fr; }
  .md-cmp-legend { right: 10px; flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ pillars: angularity, dimorphism, features */
/* ui/pillar-overview.mjs (overview head), ui/pillar-page.mjs (#/pillar/*), ui/pillar-zones.mjs (photo zones) */

/* sub-nav: Гармония + the three pillars; scrolls sideways inside itself on narrow screens */
.sn { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sn::-webkit-scrollbar { display: none; }
.sn-group { flex: none; }
.sn-link { color: inherit; transition: color .15s var(--material); }
.sn-item:not(.is-active) { padding: 6px 12px; }
/* phones: the four tabs fit a 343 px row (375 minus the gutters) instead of scrolling «Гармония» out of view */
@media (max-width: 720px) {
  .sn-group { gap: 2px; padding: 3px 4px; }
  .sn-item, .sn-item:not(.is-active) { padding: 6px 8px; }
}
.sn-item:not(.is-active) .sn-segs { display: none; }
.sn-item--link { transition: color .15s var(--material), background-color .15s var(--material), box-shadow .15s var(--material); }
.sn-item--link:hover, .sn-item:not(.is-active) .sn-link:hover { color: #374151; }

/* overview head: pillar cards -> connectors -> overall */
.pov { display: flex; flex-direction: column; }
.pov-total-body { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; padding: 18px 24px 22px; }
.pov-total-text { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 220px; }
.pov-total .ovc-sub { margin-top: 0; }
/* a low Overall (pillar-overview.mjs LOW_OVERALL): its band's saturated tone on the number, the frame and the phrase */
.pov-total.is-low { border-color: rgba(var(--m), .4); box-shadow: 0 0 0 3px rgba(var(--m), .08), var(--shadow-card); }
.pov-low { display: inline-block; margin: 0 8px 4px 0; padding: 2px 10px; border-radius: 999px; font-weight: 650; color: rgb(var(--m)); background: rgba(var(--m), .13); }
.pov-total .pillar-chips { margin-top: 0; }
.pov-label { margin: 44px 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-400); }

/* chips bar */
.pchip-icon {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-lg); opacity: .85;
  background: linear-gradient(165deg, rgba(114,131,140,.14), rgba(90,107,117,.06));
}
.pchip.is-active .pchip-icon { opacity: 1; background: linear-gradient(165deg, rgba(var(--m), .22), rgba(var(--m), .06)); }

/* "Ваши оценки" */
.pl-list .rl-titlebar { justify-content: flex-start; align-items: baseline; gap: 10px; }
.pl-count { font-size: 12px; font-weight: 500; color: rgba(114,131,140,.55); }
.pl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: -4px 0 12px; font-size: 11px; color: rgba(114,131,140,.8); }
.prow {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(100px, calc(100% - 400px), 260px) 56px; align-items: center; gap: 16px;
  padding: 14px 16px 14px 14px; border-left: 2px solid transparent; border-bottom: 1px solid rgba(114,131,140,.06);
  background: linear-gradient(90deg, rgba(114,131,140,.06) 0%, transparent 100%) no-repeat; background-size: 0% 100%;
  transition: background-size .2s ease, border-color .2s ease;
}
.pl-rows > .prow:last-child { border-bottom: 0; }
.prow:hover, .prow:focus-visible, .prow.is-pinned { background-size: 100% 100%; border-left-color: rgb(var(--sc)); outline: none; }
.prow-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.prow-title { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: rgba(0,0,0,.8); }
.prow.is-empty .prow-title { color: rgba(0,0,0,.45); }
.prow:hover .rrow-chip, .prow.is-pinned .rrow-chip { background: rgba(var(--st), .18); }
.prow-badge {
  display: inline-block; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; color: var(--link); background: rgba(114,131,140,.1); white-space: nowrap;
}
.prow-level { flex-basis: 100%; font-size: 12px; line-height: 1.45; color: rgba(0,0,0,.5); }
.prow-loss { justify-self: end; font-size: 15px; font-weight: 600; color: #b87088; }
.prow-loss.is-zero { font-weight: 500; color: rgba(114,131,140,.4); }
.pbar { position: relative; height: 10px; }
.pbar-track { position: absolute; inset: 0; border-radius: 9999px; opacity: .6; transition: opacity .25s; }
.prow:hover .pbar-track, .prow.is-pinned .pbar-track { opacity: .85; }
.prow.is-empty .pbar-track { filter: grayscale(1); opacity: .25; }
.pbar-ideal { position: absolute; top: -2px; bottom: -2px; border-radius: 3px; background: rgba(100,180,180,.15); border: 1px solid rgba(100,180,180,.35); transition: background-color .25s, border-color .25s; }
.prow:hover .pbar-ideal, .prow.is-pinned .pbar-ideal { background: rgba(40,205,170,.2); border-color: rgba(40,205,170,.4); }
.pbar-marker {
  position: absolute; top: 50%; width: 16px; height: 9px; transform: translate(-50%, -50%); border-radius: 999px;
  background: #fff; border: 2px solid var(--mb); box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: width .2s var(--ease), height .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.prow:hover .pbar-marker, .prow.is-pinned .pbar-marker { width: 18px; height: 10px; border-color: rgb(var(--sc)); box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 3px rgba(var(--sc), .15); }
.pl-cat { align-items: baseline; }
.pl-cat-loss { margin-left: auto; padding-right: 16px; font-size: 13px; font-weight: 600; color: #b87088; }
.pl-cat-loss.is-zero { font-weight: 500; color: rgba(114,131,140,.4); }

/* "Зоны роста" */
.pl-growth-sub { padding: 12px 0 4px; font-size: 13px; line-height: 1.5; color: var(--slate); }
.pl-growth .ins-listbox { margin-top: 12px; }
.pl-growth .ins-item.is-pinned .ins-head { background: rgba(114,131,140,.05); }
.pl-growth .ins-chip { width: 84px; }
.pl-growth .ins-name, .prow-title { overflow-wrap: anywhere; hyphens: auto; }
.pl-growth .ins-body-inner { padding-left: 112px; }
.pl-hint { margin-top: 8px; font-size: 12px; line-height: 1.5; color: rgba(0,0,0,.45); }

/* empty state */
.pl-empty { max-width: 720px; margin: 24px auto 0; padding: 40px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pl-empty-title { max-width: 30ch; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.pl-empty-text { max-width: 52ch; font-size: 14px; line-height: 1.55; color: var(--muted-600); }
.pl-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 8px; }
.pl-empty-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--link); transition: gap .2s var(--material); }
.pl-empty-link:hover { gap: 9px; }

/* photo zones (stroke widths in screen px: --k = photo px per screen px, set by the stage) */
.pz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pp--pillar .stage-dim { display: none; } /* the zones overlay dims around the zones instead */
.pz-dim { fill: #000; opacity: .5; }
.pz-fill { fill: var(--zc); opacity: .07; }
.pz-glow { fill: none; stroke: var(--zc); stroke-width: calc(7px * var(--k, 1)); stroke-linejoin: round; opacity: .22; }
.pz-edge { fill: none; stroke: var(--zc); stroke-width: calc(1.5px * var(--k, 1)); stroke-linejoin: round; opacity: .95; }
.pz-dot {
  fill: var(--zc); stroke: rgba(255,255,255,.6); stroke-width: calc(1px * var(--k, 1));
  transform-box: fill-box; transform-origin: center;
  animation: pz-pulse 2.4s ease-in-out infinite; animation-delay: calc(-1 * var(--d, 0s));
}
@keyframes pz-pulse { 0%, 100% { opacity: .3; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.pp-caption-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pz-note { display: none; font-size: 11px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,.62); text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.pp-inner.has-dots .pz-note { display: block; }

@media (max-width: 720px) {
  .prow { grid-template-columns: minmax(0, 1fr) 52px; grid-template-areas: "name loss" "bar bar"; gap: 8px 10px; padding: 12px 10px 12px 8px; }
  .prow-name { grid-area: name; }
  .prow .pbar { grid-area: bar; }
  .prow-loss { grid-area: loss; }
  .pl-cat-loss { padding-right: 10px; }
  .pl-chips .vchip { flex: 1 1 0; min-width: 0; gap: 6px; padding: 8px; }
  .pl-chips .pchip-icon { display: none; }
  /* «Кожа и детали» не помещается в треть строки: подпись переносится, а не обрезается */
  .pl-chips .vchip-label { font-size: 10px; line-height: 12px; letter-spacing: .02em; overflow-wrap: anywhere; }
  .pl-chips .vchip-text { min-width: 0; }
  .pl-chips .chips-overall { display: none; } /* the active chip shows the same score */
  .pl-growth .ins-chip { width: 76px; }
  .pl-growth .ins-body-inner { padding-left: 16px; }
  .pl-empty { padding: 28px 18px; }
  .pl-empty-title { font-size: 18px; }
  .pov-label { margin-top: 32px; }
  .pov-total .ovc-count { font-size: 10px; white-space: nowrap; } /* «3 из 4 показателей» stays on phones too */
  .pov-total-body { padding: 14px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-dot { animation: none; opacity: .85; }
}

/* ------------------------------------------------------------------ prototype v1: upload steps */
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; }
.up-step-body .up-actions > .btn-ghost:first-child { margin-right: auto; }
.up-card--steps { width: min(820px, 100%); display: flex; flex-direction: column; }
.up-progress { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.up-dots { display: flex; gap: 6px; }
.up-dot { width: 22px; height: 4px; border-radius: 9999px; background: rgba(114,131,140,.18); transition: background-color .3s var(--material), width .3s var(--material); }
.up-dot.is-done { background: rgba(114,131,140,.55); }
.up-dot.is-active { width: 34px; background: var(--ink); }
.up-step { font-size: 12px; font-weight: 500; color: var(--muted-500); }
.up-body { margin-top: 18px; min-height: 280px; }
.up-step-body { display: flex; flex-direction: column; }
.up-step-body .up-actions { margin-top: 20px; }
.up-step-body--intro .up-title { font-size: 26px; }
.up-list { margin: 20px 0 4px; padding: 0; list-style: none; display: grid; gap: 10px; }
.up-list li { position: relative; padding: 12px 14px 12px 38px; border-radius: 12px; background: rgba(114,131,140,.06); font-size: 14px; color: var(--muted-600); }
.up-list li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--slate); }
.up-list b { color: var(--ink); font-weight: 600; }
.up-genders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.up-gender {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 132px; padding: 20px 44px 20px 20px; text-align: left;
  border-radius: var(--r-xl); border: 1.5px solid var(--line); background: linear-gradient(165deg, rgba(114,131,140,.07), rgba(74,86,96,.02));
  transition: border-color .2s var(--material), transform .2s var(--material), box-shadow .2s var(--material);
}
.up-gender:hover, .up-gender:focus-visible { border-color: rgba(28,36,41,.35); transform: translateY(-1px); box-shadow: var(--shadow-card-hover); outline: none; }
.up-gender.is-selected { border-color: var(--ink); }
.up-gender-label { font-size: 20px; font-weight: 600; color: var(--ink); }
.up-gender-sub { font-size: 13px; line-height: 1.45; color: var(--muted-500); }
.up-gender-arrow { position: absolute; right: 18px; top: 22px; color: var(--slate); transition: transform .2s var(--material); }
.up-gender:hover .up-gender-arrow { transform: translateX(3px); }
.up-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 18px; align-items: start; }
.up-photo .dz { max-height: 52vh; }
.up-photo .dz-hint { min-height: 0; }
.up-photo-side { display: flex; flex-direction: column; gap: 14px; }
.up-tips { padding: 16px; border-radius: var(--r-xl); background: rgba(114,131,140,.06); }
.up-tips-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-500); }
.up-tips-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.up-tips-list li { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--muted-600); }
.up-tip-icon { flex: none; margin-top: 1px; color: var(--green); }
.up-check { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted-500); transition: background-color .25s var(--material), border-color .25s var(--material); }
.up-check b { color: var(--ink); font-weight: 600; }
.up-check-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; }
.up-check.is-ok { background: rgba(74,124,89,.06); border-color: rgba(74,124,89,.25); }
.up-check.is-ok .up-check-icon { background: var(--green); }
.up-check.is-warn { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.3); }
.up-check.is-warn .up-check-icon { background: #d08a1a; }
.up-check.is-bad { background: rgba(176,73,63,.06); border-color: rgba(176,73,63,.3); }
.up-check.is-bad .up-check-icon { background: #b0493f; }
.up-check.is-bad b { color: #8f3a32; }
.up-check-retry { display: block; margin-top: 4px; font-weight: 500; color: var(--muted-600); }
.up-check-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(114,131,140,.25); border-top-color: var(--ink); animation: up-spin .8s linear infinite; }
@keyframes up-spin { to { transform: rotate(360deg); } }
.up-error:empty { display: none; }
.btn-dark:disabled { opacity: .35; cursor: default; box-shadow: none; }
@media (max-width: 720px) {
  .screen.up { padding: 12px; place-items: start center; }
  .up-card--steps { padding: 18px 16px; border-radius: 20px; }
  .up-body { min-height: 0; }
  .up-genders, .up-photo { grid-template-columns: 1fr; }
  .up-photo .dz { aspect-ratio: 4 / 3; max-height: 40vh; }
  .up-photo .dz-hint { display: block; }
  .up-gender { min-height: 0; }
  .up-actions { flex-wrap: wrap; }
  .up-step-body .up-actions .btn-dark { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .up-check-spin { animation: none; } }

/* ------------------------------------------------------------------ prototype v1: pillar states, overall, notes */
.pov-card.is-unavailable, .pov-card.is-failed, .pov-card.is-none { --m: 150,158,166; }
.pov-card.is-unavailable .pillar-body, .pov-card.is-failed .pillar-body, .pov-card.is-none .pillar-body { opacity: .9; }
.pov-state { display: inline-flex; align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 9999px; font-size: 13px; font-weight: 600; color: var(--muted-600); background: rgba(114,131,140,.1); }
.pov-card.is-unavailable .pov-state, .pov-card.is-failed .pov-state { color: #8a5a12; background: rgba(245,158,11,.1); }
.pov-total-chips { margin-top: 10px; flex-wrap: wrap; }
.chip-prov { font-size: 10px; font-weight: 500; color: #8a5a12; background: rgba(245,158,11,.1); border-radius: 4px; padding: 2px 8px; }
.pov-note { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted-500); }
.vchip-soon { font-size: 13px; font-weight: 600; line-height: 28px; color: var(--muted-400); }
/* photo cards of the Harmony card: the FaceIQ band labels are longer («Исключительная оценка»); on phones the foot stacks */
.pcard-foot .tile-pct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-foot .tile-num { flex: none; }
@media (max-width: 720px) {
  .pcard-foot { height: auto; min-height: 60px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 12px; }
  .pcard-foot .tile-pct { display: none; }
}
.pl-prov-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; color: #8a5a12; background: rgba(245,158,11,.08); }

/* ------------------------------------------------------------------ prototype v1: unmeasured cards */
.rrow.is-unmeasured { --sc: 150,158,166; --st: 150,158,166; }
.rrow-chip--off { color: #8a6a5a; background: rgba(176,122,90,.1); }
.rrow.is-unmeasured .rrow-title { color: rgba(0,0,0,.55); }
.rrow-reason { font-size: 12px; line-height: 1.4; color: var(--muted-500); }
.rrow-score--off { color: var(--muted-400); font-weight: 500; }
.md-impact--off { background: linear-gradient(135deg, rgba(114,131,140,.06), rgba(114,131,140,.02)); border-color: rgba(114,131,140,.16); }
.md-impact--off .md-impact-title { color: var(--slate-2); }
.md-impact--off .md-impact-item { border-color: rgba(114,131,140,.14); }
.md-impact--off .md-impact-chip { background: rgba(114,131,140,.12); color: var(--slate-2); }
@media (max-width: 720px) {
  .md-h-right > .md-icon-btn:first-child:not(:last-child) { display: none; } /* expand: the sheet is full width already */
  .rrow.is-unmeasured { grid-template-columns: minmax(0, 1fr) 52px 16px; }
  .rrow.is-unmeasured .rrow-reason { grid-column: 1; grid-row: 2; margin-top: -6px; }
  .rrow.is-unmeasured .rrow-score { grid-column: 2; grid-row: 1 / span 2; }
  .rrow.is-unmeasured .rrow-chev { grid-column: 3; grid-row: 1 / span 2; }
}