/* ===== Constrainless Reviews – Premium Light Design ===== */
:root {
  --cr-radius: 18px;
  --cr-radius-lg: 22px;
  --cr-radius-xl: 28px;

  /* Surface Colors */
  --cr-bg: #ffffff;
  --cr-bg-elev: rgba(255, 255, 255, 0.9);
  --cr-bg-secondary: rgba(248, 250, 252, 0.8);
  --cr-bg-tertiary: rgba(245, 247, 250, 0.6);

  /* Text Colors */
  --cr-text: #1d1d1f;
  --cr-text-secondary: #424245;
  --cr-text-tertiary: #6e6e73;
  --cr-text-quaternary: #8e8e93;

  /* Semantic Colors */
  --cr-subtle: #86868b;
  --cr-muted: #f2f2f7;
  --cr-hairline: rgba(0, 0, 0, 0.04);
  --cr-separator: rgba(60, 60, 67, 0.08);

  /* Shadows - Multi-layered style */
  --cr-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 1px 3px rgba(0, 0, 0, 0.03);
  --cr-shadow:
    0 1px 3px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.02),
    0 8px 20px rgba(0, 0, 0, 0.03);
  --cr-shadow-lg:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 10px 25px rgba(0, 0, 0, 0.04),
    0 20px 40px rgba(0, 0, 0, 0.06);
  --cr-shadow-xl:
    0 8px 10px rgba(0, 0, 0, 0.02),
    0 20px 40px rgba(0, 0, 0, 0.05),
    0 40px 80px rgba(0, 0, 0, 0.08);

  /* Accent Colors */
  --cr-accent: #007aff;
  --cr-accent-hover: #0051d3;
  --cr-accent-light: rgba(0, 122, 255, 0.1);
  --cr-ring: rgba(0, 122, 255, 0.3);

  /* Status Colors */
  --cr-success: #34c759;
  --cr-warning: #ff9500;
  --cr-error: #ff3b30;

  /* Glassmorphism */
  --cr-glass-bg: rgba(255, 255, 255, 0.7);
  --cr-glass-border: rgba(255, 255, 255, 0.2);
  --cr-backdrop-blur: saturate(180%) blur(20px);
}

/* SF Pro Display Typography System */
.cr-reviews-root,
.cr-reviews-root * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .cr-reviews-root * {
    animation: none !important;
    transition: none !important;
  }
}

/* Scroll Lock */
.cr-no-scroll {
  overflow: hidden !important;
}

/* ===== Root Layout ===== */
.cr-reviews-root {
  display: flex;
  justify-content: flex-start;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* ===== Premium Trust Strip ===== */
.cr-trust-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--cr-glass-bg);
  backdrop-filter: var(--cr-backdrop-blur);
  -webkit-backdrop-filter: var(--cr-backdrop-blur);
  border-radius: 999px;
  border: 1px solid var(--cr-separator);
  box-shadow: var(--cr-shadow);
  cursor: pointer;
  user-select: none;
  will-change: transform, box-shadow, filter;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: auto;
  max-width: min(580px, 94vw);
  position: relative;
  isolation: isolate;
  margin: 10px 0 16px 0;
}

/* Sophisticated Gradient Orbs */
.cr-trust-strip::before,
.cr-trust-strip::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0.15;
  background: radial-gradient(
    circle at center,
    var(--cr-accent) 0%,
    rgba(0, 122, 255, 0.4) 40%,
    transparent 70%
  );
}

.cr-trust-strip::before {
  width: 200px;
  height: 200px;
  left: -50px;
  top: -40px;
}

.cr-trust-strip::after {
  width: 160px;
  height: 160px;
  right: -40px;
  bottom: -45px;
  opacity: 0.12;
  background: radial-gradient(
    circle at center,
    rgba(52, 199, 89, 0.6) 0%,
    rgba(52, 199, 89, 0.2) 50%,
    transparent 70%
  );
}

.cr-trust-strip > * {
  position: relative;
  z-index: 1;
}

.cr-trust-strip:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--cr-shadow-lg);
  border-color: rgba(60, 60, 67, 0.12);
}

.cr-trust-strip:active {
  transform: translateY(-1px) scale(1.01);
  transition-duration: 0.1s;
}

.cr-trust-strip:focus-visible {
  outline: 2px solid var(--cr-ring);
  outline-offset: 4px;
}

/* ===== Star System ===== */
.cr-stars,
.cr-item-stars {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.cr-star {
  width: 18px;
  height: 18px;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(255, 193, 7, 0.2));
  transition: transform 0.2s ease;
}

.cr-stars:hover .cr-star {
  transform: scale(1.05);
}

/* ===== Metrics Display ===== */
.cr-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cr-metrics .cr-score {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--cr-text);
}

.cr-metrics .cr-count,
.cr-metrics .cr-verified {
  color: var(--cr-text-tertiary);
  font-size: 14px;
  font-weight: 500;
}

.cr-meta {
  margin-left: auto;
  color: var(--cr-subtle);
  font-size: 14px;
  font-weight: 500;
}

/* ===== Premium Overlay ===== */
.cr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cr-overlay-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.cr-overlay[hidden] {
  display: none;
}

@keyframes cr-overlay-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ===== Premium Dialog Sheet ===== */
.cr-dialog {
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  overflow: auto;
  border-radius: var(--cr-radius-xl) var(--cr-radius-xl) 0 0;
  background: var(--cr-glass-bg);
  backdrop-filter: saturate(200%) blur(25px);
  -webkit-backdrop-filter: saturate(200%) blur(25px);
  border: 1px solid var(--cr-glass-border);
  border-bottom: none;
  box-shadow: var(--cr-shadow-xl);
  padding: 24px 24px 32px;
  transform: translateY(10%);
  animation: cr-sheet-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  position: relative;
  overflow: hidden auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cr-dialog::-webkit-scrollbar {
  display: none;
}

/* Advanced Gradient Orbs in Dialog */
.cr-dialog::before,
.cr-dialog::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.12;
}

.cr-dialog::before {
  width: 500px;
  height: 500px;
  right: -200px;
  top: -180px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--cr-accent) 0deg,
    rgba(52, 199, 89, 0.6) 120deg,
    rgba(255, 149, 0, 0.4) 240deg,
    var(--cr-accent) 360deg
  );
}

.cr-dialog::after {
  width: 400px;
  height: 400px;
  left: -150px;
  bottom: -180px;
  background: radial-gradient(
    circle at center,
    rgba(175, 82, 222, 0.3) 0%,
    rgba(52, 199, 89, 0.2) 50%,
    transparent 70%
  );
}

@media (min-width: 992px) {
  .cr-dialog {
    border-radius: var(--cr-radius-xl);
    margin: 6vh 0;
  }
}

@keyframes cr-sheet-in {
  from {
    opacity: 0;
    transform: translateY(15%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== Dialog Header ===== */
.cr-dialog{ position:relative; }

.cr-close{
  position:absolute;
  top:12px; right:12px;
  width:44px; height:44px;
  display:grid; place-items:center;

  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.85);  /* Glass-Look */
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border:1px solid var(--cr-hairline);
  border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--cr-shadow);

  color:var(--cr-text);
  font-size:22px; font-weight:700; line-height:1;
  cursor:pointer; z-index:2;

  transition:background-color .2s ease, color .2s ease,
             box-shadow .2s ease, transform .15s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.cr-close:hover{
  background:rgba(255,255,255,.95);
  color:var(--cr-accent);
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 14px 30px rgba(0,0,0,.12);
}
.cr-close:active{ transform:translateY(0); }
.cr-close:focus-visible{
  outline:2px solid var(--cr-ring);
  outline-offset:3px;
  border-radius:12px;
}
/* Firefox entfernt inneren Fokus-Rand */
.cr-close::-moz-focus-inner{ border:0; }

.cr-title {
  margin: 8px 0 20px;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  color: var(--cr-text);
}

/* ===== Summary Section ===== */
.cr-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .cr-summary {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ===== Premium Score Box ===== */
.cr-scorebox {
  border: 1px solid var(--cr-separator);
  border-radius: var(--cr-radius);
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%),
    var(--cr-bg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    var(--cr-shadow);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
}

.cr-scorebox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%
  );
}

.cr-scorebox .cr-score {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cr-text);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.cr-scorebox .cr-count,
.cr-scorebox .cr-recommend,
.cr-scorebox .cr-verified {
  color: var(--cr-text-tertiary);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}

.cr-verified {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(60, 60, 67, 0.06);
}

/* ===== Distribution Bars ===== */
.cr-distribution .cr-row {
  display: grid;
  grid-template-columns: 20px 1fr 50px;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}

.cr-distribution .cr-bar {
  height: 8px;
  background: var(--cr-muted);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset;
}

.cr-distribution .cr-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--cr-accent) 0%,
    rgba(0, 122, 255, 0.8) 100%
  );
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: inherit;
}

.cr-distribution .cr-pct {
  color: var(--cr-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
  text-align: right;
}

/* ===== Pills System ===== */
.cr-pills {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.cr-pill {
  border: 1px solid var(--cr-separator);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--cr-text-tertiary);
  background: rgba(248, 250, 252, 0.8);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    var(--cr-shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.cr-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    var(--cr-shadow);
}

.cr-pill em {
  font-style: normal;
  color: var(--cr-text);
  font-weight: 700;
}

/* ===== Reviews List ===== */
.cr-list {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.cr-item {
  border: 1px solid var(--cr-separator);
  border-radius: var(--cr-radius);
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
    var(--cr-bg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    var(--cr-shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.cr-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
}

.cr-item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    var(--cr-shadow);
  border-color: rgba(60, 60, 67, 0.1);
}

.cr-item-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cr-item-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cr-success);
  font-weight: 600;
  background: rgba(52, 199, 89, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
}

.cr-item-time {
  margin-left: auto;
  font-size: 13px;
  color: var(--cr-text-quaternary);
  font-weight: 500;
}

.cr-item-text {
  margin: 0;
  line-height: 1.5;
  color: var(--cr-text-secondary);
  font-size: 15px;
}

.cr-more {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--cr-accent);
  font-weight: 600;
  padding: 4px 0;
  margin-top: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.2s ease;
}

.cr-more:hover {
  color: var(--cr-accent-hover);
}

.cr-more:focus-visible {
  outline: 2px solid var(--cr-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== Premium Icons ===== */
.cr-icon-shield,
.cr-icon-check {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.cr-icon-shield {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 1l8.5 3v6.5c0 5.5-3.8 10.7-8.5 12-4.7-1.3-8.5-6.5-8.5-12V4l8.5-3z"/></svg>');
}

.cr-icon-check {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2l-3.5-3.6L4 14l5 5 11-11-1.5-1.4z"/></svg>');
}

/* ===== Skeleton Loading ===== */
.cr-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    110deg,
    var(--cr-muted) 8%,
    rgba(255, 255, 255, 0.5) 18%,
    var(--cr-muted) 33%
  );
  background-size: 200% 100%;
  animation: cr-shimmer 1.8s infinite;
}

.cr-skeleton::after {
  display: none;
}

.cr-stars-skeleton {
  width: 130px;
  height: 20px;
  border-radius: 8px;
}

.cr-metrics-skeleton {
  width: 260px;
  height: 14px;
  border-radius: 8px;
  margin-left: 10px;
}

@keyframes cr-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ===== CSP-safe Width Control via data-pct ===== */
.cr-row[data-pct="0"] .cr-bar i { width: 0%; }
.cr-row[data-pct="1"] .cr-bar i { width: 1%; }
.cr-row[data-pct="2"] .cr-bar i { width: 2%; }
.cr-row[data-pct="3"] .cr-bar i { width: 3%; }
.cr-row[data-pct="4"] .cr-bar i { width: 4%; }
.cr-row[data-pct="5"] .cr-bar i { width: 5%; }
.cr-row[data-pct="6"] .cr-bar i { width: 6%; }
.cr-row[data-pct="7"] .cr-bar i { width: 7%; }
.cr-row[data-pct="8"] .cr-bar i { width: 8%; }
.cr-row[data-pct="9"] .cr-bar i { width: 9%; }
.cr-row[data-pct="10"] .cr-bar i { width: 10%; }
.cr-row[data-pct="11"] .cr-bar i { width: 11%; }
.cr-row[data-pct="12"] .cr-bar i { width: 12%; }
.cr-row[data-pct="13"] .cr-bar i { width: 13%; }
.cr-row[data-pct="14"] .cr-bar i { width: 14%; }
.cr-row[data-pct="15"] .cr-bar i { width: 15%; }
.cr-row[data-pct="16"] .cr-bar i { width: 16%; }
.cr-row[data-pct="17"] .cr-bar i { width: 17%; }
.cr-row[data-pct="18"] .cr-bar i { width: 18%; }
.cr-row[data-pct="19"] .cr-bar i { width: 19%; }
.cr-row[data-pct="20"] .cr-bar i { width: 20%; }
.cr-row[data-pct="21"] .cr-bar i { width: 21%; }
.cr-row[data-pct="22"] .cr-bar i { width: 22%; }
.cr-row[data-pct="23"] .cr-bar i { width: 23%; }
.cr-row[data-pct="24"] .cr-bar i { width: 24%; }
.cr-row[data-pct="25"] .cr-bar i { width: 25%; }
.cr-row[data-pct="26"] .cr-bar i { width: 26%; }
.cr-row[data-pct="27"] .cr-bar i { width: 27%; }
.cr-row[data-pct="28"] .cr-bar i { width: 28%; }
.cr-row[data-pct="29"] .cr-bar i { width: 29%; }
.cr-row[data-pct="30"] .cr-bar i { width: 30%; }
.cr-row[data-pct="31"] .cr-bar i { width: 31%; }
.cr-row[data-pct="32"] .cr-bar i { width: 32%; }
.cr-row[data-pct="33"] .cr-bar i { width: 33%; }
.cr-row[data-pct="34"] .cr-bar i { width: 34%; }
.cr-row[data-pct="35"] .cr-bar i { width: 35%; }
.cr-row[data-pct="36"] .cr-bar i { width: 36%; }
.cr-row[data-pct="37"] .cr-bar i { width: 37%; }
.cr-row[data-pct="38"] .cr-bar i { width: 38%; }
.cr-row[data-pct="39"] .cr-bar i { width: 39%; }
.cr-row[data-pct="40"] .cr-bar i { width: 40%; }
.cr-row[data-pct="41"] .cr-bar i { width: 41%; }
.cr-row[data-pct="42"] .cr-bar i { width: 42%; }
.cr-row[data-pct="43"] .cr-bar i { width: 43%; }
.cr-row[data-pct="44"] .cr-bar i { width: 44%; }
.cr-row[data-pct="45"] .cr-bar i { width: 45%; }
.cr-row[data-pct="46"] .cr-bar i { width: 46%; }
.cr-row[data-pct="47"] .cr-bar i { width: 47%; }
.cr-row[data-pct="48"] .cr-bar i { width: 48%; }
.cr-row[data-pct="49"] .cr-bar i { width: 49%; }
.cr-row[data-pct="50"] .cr-bar i { width: 50%; }
.cr-row[data-pct="51"] .cr-bar i { width: 51%; }
.cr-row[data-pct="52"] .cr-bar i { width: 52%; }
.cr-row[data-pct="53"] .cr-bar i { width: 53%; }
.cr-row[data-pct="54"] .cr-bar i { width: 54%; }
.cr-row[data-pct="55"] .cr-bar i { width: 55%; }
.cr-row[data-pct="56"] .cr-bar i { width: 56%; }
.cr-row[data-pct="57"] .cr-bar i { width: 57%; }
.cr-row[data-pct="58"] .cr-bar i { width: 58%; }
.cr-row[data-pct="59"] .cr-bar i { width: 59%; }
.cr-row[data-pct="60"] .cr-bar i { width: 60%; }
.cr-row[data-pct="61"] .cr-bar i { width: 61%; }
.cr-row[data-pct="62"] .cr-bar i { width: 62%; }
.cr-row[data-pct="63"] .cr-bar i { width: 63%; }
.cr-row[data-pct="64"] .cr-bar i { width: 64%; }
.cr-row[data-pct="65"] .cr-bar i { width: 65%; }
.cr-row[data-pct="66"] .cr-bar i { width: 66%; }
.cr-row[data-pct="67"] .cr-bar i { width: 67%; }
.cr-row[data-pct="68"] .cr-bar i { width: 68%; }
.cr-row[data-pct="69"] .cr-bar i { width: 69%; }
.cr-row[data-pct="70"] .cr-bar i { width: 70%; }
.cr-row[data-pct="71"] .cr-bar i { width: 71%; }
.cr-row[data-pct="72"] .cr-bar i { width: 72%; }
.cr-row[data-pct="73"] .cr-bar i { width: 73%; }
.cr-row[data-pct="74"] .cr-bar i { width: 74%; }
.cr-row[data-pct="75"] .cr-bar i { width: 75%; }
.cr-row[data-pct="76"] .cr-bar i { width: 76%; }
.cr-row[data-pct="77"] .cr-bar i { width: 77%; }
.cr-row[data-pct="78"] .cr-bar i { width: 78%; }
.cr-row[data-pct="79"] .cr-bar i { width: 79%; }
.cr-row[data-pct="80"] .cr-bar i { width: 80%; }
.cr-row[data-pct="81"] .cr-bar i { width: 81%; }
.cr-row[data-pct="82"] .cr-bar i { width: 82%; }
.cr-row[data-pct="83"] .cr-bar i { width: 83%; }
.cr-row[data-pct="84"] .cr-bar i { width: 84%; }
.cr-row[data-pct="85"] .cr-bar i { width: 85%; }
.cr-row[data-pct="86"] .cr-bar i { width: 86%; }
.cr-row[data-pct="87"] .cr-bar i { width: 87%; }
.cr-row[data-pct="88"] .cr-bar i { width: 88%; }
.cr-row[data-pct="89"] .cr-bar i { width: 89%; }
.cr-row[data-pct="90"] .cr-bar i { width: 90%; }
.cr-row[data-pct="91"] .cr-bar i { width: 91%; }
.cr-row[data-pct="92"] .cr-bar i { width: 92%; }
.cr-row[data-pct="93"] .cr-bar i { width: 93%; }
.cr-row[data-pct="94"] .cr-bar i { width: 94%; }
.cr-row[data-pct="95"] .cr-bar i { width: 95%; }
.cr-row[data-pct="96"] .cr-bar i { width: 96%; }
.cr-row[data-pct="97"] .cr-bar i { width: 97%; }
.cr-row[data-pct="98"] .cr-bar i { width: 98%; }
.cr-row[data-pct="99"] .cr-bar i { width: 99%; }
.cr-row[data-pct="100"] .cr-bar i { width: 100%; }

/* ===== Responsive Design Enhancements ===== */
@media (max-width: 768px) {
  .cr-trust-strip {
    padding: 0.6rem 0.85rem;
    gap: 0.6rem;
    max-width: 96vw;
  }

  .cr-dialog {
    padding: 20px 18px 28px;
    max-height: 92vh;
  }

  .cr-title {
    font-size: 20px;
    margin: 6px 0 16px;
  }

  .cr-summary {
    gap: 18px;
  }

  .cr-scorebox {
    padding: 16px;
  }

  .cr-scorebox .cr-score {
    font-size: 2.4rem;
  }

  .cr-item {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .cr-trust-strip {
    padding: 0.55rem 0.75rem;
    gap: 0.5rem;
  }

  .cr-dialog {
    padding: 16px 16px 24px;
    border-radius: 20px 20px 0 0;
  }

  .cr-pills {
    gap: 8px;
  }

  .cr-pill {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ===== Dark Mode Preparations (Optional) ===== */
@media (prefers-color-scheme: dark) {
  /* Intentionally empty - maintaining light theme */
  /* Can be expanded later if dark mode is desired */
}

/* ===== High Contrast Mode Support ===== */
@media (prefers-contrast: high) {
  :root {
    --cr-hairline: rgba(0, 0, 0, 0.2);
    --cr-separator: rgba(0, 0, 0, 0.15);
  }

  .cr-trust-strip,
  .cr-item,
  .cr-scorebox {
    border-color: rgba(0, 0, 0, 0.2);
  }
}

/* ===== Print Styles ===== */
@media print {
  .cr-overlay {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cr-dialog {
    box-shadow: none;
    border: 1px solid #ccc;
    background: white;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cr-dialog::before,
  .cr-dialog::after {
    display: none;
  }
}