/* Rights Protection product-specific diagrams and interactions */
.rights-protection-page {
  --rights-blue: var(--product-blue);
  --rights-cyan: var(--product-cyan);
  --rights-violet: #786dff;
  --rights-green: #45d49a;
  --rights-night: #04151f;
}

.rights-hero {
  background:
    radial-gradient(circle at 81% 26%, rgba(73, 83, 255, 0.22), transparent 32rem),
    radial-gradient(circle at 64% 79%, rgba(30, 211, 220, 0.1), transparent 28rem),
    linear-gradient(145deg, #031018, #061722 58%, #07182a);
}

.rights-hero-system {
  padding: 1rem;
}

.rights-hero-system > header,
.rights-hero-foot {
  display: flex;
  min-height: 4.1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(133, 202, 226, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  align-items: center;
  justify-content: space-between;
}

.rights-hero-system span,
.rights-detail-layout li > span,
.rights-drm-layout > ol li > span,
.rights-route-examples article > span,
.rights-cdn-attachment > span {
  display: block;
  color: #56e0e8;
  font-size: var(--product-font-label-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rights-hero-system > header strong {
  display: block;
  margin-top: 0.2rem;
  color: #f5fbff;
  font-size: var(--product-font-title-sm);
}

.rights-hero-system > header small,
.rights-hero-foot p {
  margin: 0;
  color: #7d95a1;
  font-size: var(--product-font-caption);
}

.rights-hero-route {
  display: grid;
  margin: 0.75rem 0;
  grid-template-columns: 0.9fr auto 1.1fr auto 1fr;
  gap: 0.65rem;
  align-items: stretch;
}

.rights-hero-route > div {
  min-height: 8rem;
  padding: 0.85rem;
  border: 1px solid rgba(133, 202, 226, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.rights-hero-route > div.is-selected {
  border-color: rgba(75, 213, 224, 0.48);
  background: linear-gradient(145deg, rgba(25, 135, 160, 0.14), rgba(83, 77, 211, 0.12));
}

.rights-hero-route strong,
.rights-hero-route small {
  display: block;
  margin-top: 0.5rem;
  color: #e1edf2;
  font-size: var(--product-font-card);
  line-height: 1.45;
}

.rights-hero-route small {
  color: #8299a4;
  font-size: var(--product-font-caption);
}

.rights-hero-route > i {
  color: #4edbe3;
  font-style: normal;
  align-self: center;
}

.rights-hero-route > i::after { content: "\2192"; }

.rights-hero-tabs {
  margin-bottom: 0.75rem;
}

.rights-hero-foot { min-height: 3.5rem; }
.rights-hero-foot > span { flex: 0 0 auto; }
.rights-hero-foot p { padding-left: 1rem; text-align: right; }

.rights-scenario-flow {
  display: grid;
  margin: 0;
  padding: 1.1rem;
  border: 1px solid var(--product-line);
  border-radius: 11px;
  background: #f7f9fb;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
  list-style: none;
}

.rights-scenario-flow li {
  position: relative;
  display: flex;
  min-height: 7.2rem;
  padding: 0.75rem;
  border: 1px solid #dbe3e8;
  border-radius: 7px;
  background: #fff;
  color: #345666;
  font-size: var(--product-font-caption);
  text-align: center;
  align-items: center;
  justify-content: center;
}

.rights-scenario-flow li + li::before {
  position: absolute;
  left: -1rem;
  color: var(--rights-blue);
  content: "\2192";
}

.rights-scenario-flow li.is-rights {
  border-color: #91abff;
  background: #eaf0ff;
  color: #2057bd;
  font-weight: 700;
}

.rights-scenario-flow li.is-cdn {
  border-style: dashed;
  border-color: #64cdb3;
  background: #edf9f5;
  color: #287763;
}

.rights-scenario-flow li span {
  display: block;
  color: #2f7d69;
  font-size: var(--product-font-label-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.rights-matrix-section { background: var(--product-canvas); }

.rights-matrix {
  overflow: hidden;
  border: 1px solid var(--product-line);
  border-radius: 12px;
  background: #fff;
}

.rights-matrix-head,
.rights-matrix-row {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 1.25fr 1fr;
}

.rights-matrix-head { background: #e9eef2; }

.rights-matrix-head span,
.rights-matrix-row > * {
  margin: 0;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--product-line);
  font-size: var(--product-font-caption);
}

.rights-matrix-head span:last-child,
.rights-matrix-row > *:last-child { border-right: 0; }

.rights-matrix-head span {
  color: #66808d;
  font-size: var(--product-font-label-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rights-matrix-row + .rights-matrix-row { border-top: 1px solid var(--product-line); }
.rights-matrix-row strong { color: #284c5c; }
.rights-matrix-row span { color: #607985; }
.rights-matrix-row b { color: #245cbd; }
.rights-matrix-row.is-related b { color: #2f7d69; }

.rights-matrix footer {
  padding: 1rem;
  border-top: 1px solid var(--product-line);
  background: #f4f7ff;
  color: #526f7d;
  font-size: var(--product-font-caption);
}

.rights-detail-layout,
.rights-drm-layout {
  display: grid;
  grid-template-columns: minmax(24rem, 0.85fr) minmax(36rem, 1.15fr);
  gap: 2rem;
  align-items: stretch;
}

.rights-detail-layout > ol,
.rights-drm-layout > ol {
  margin: 0;
  padding: 0;
  border: 1px solid var(--product-line);
  border-radius: 10px;
  background: #fff;
  list-style: none;
}

.rights-detail-layout > ol li {
  display: grid;
  min-height: 6.7rem;
  padding: 1rem;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.7rem;
  align-items: start;
}

.rights-detail-layout > ol li + li,
.rights-drm-layout > ol li + li { border-top: 1px solid var(--product-line); }
.rights-detail-layout li > span,
.rights-drm-layout > ol li > span { color: var(--rights-blue); }
.rights-detail-layout strong,
.rights-drm-layout > ol strong { color: #294d5d; font-size: var(--product-font-card); }
.rights-detail-layout p,
.rights-drm-layout > ol p { margin: 0.35rem 0 0; color: var(--product-muted); font-size: var(--product-font-caption); }

.rights-hls-section { background: var(--product-surface); }

.rights-hls-visual {
  display: flex;
  padding: 1.2rem;
  border: 1px solid #cbd8ea;
  border-radius: 10px;
  background: linear-gradient(145deg, #f8fbff, #edf3ff);
  flex-direction: column;
  justify-content: space-between;
}

.rights-hls-visual > header span,
.rights-hls-visual > header strong {
  display: block;
  color: var(--rights-blue);
  font-size: var(--product-font-label-xs);
  text-transform: uppercase;
}

.rights-hls-visual > header strong { margin-top: 0.3rem; color: #284d5d; font-size: var(--product-font-title-lg); text-transform: none; }

.rights-segment-line {
  display: grid;
  grid-template-columns: 0.8fr auto 1.1fr auto 0.9fr;
  gap: 0.7rem;
  align-items: center;
}

.rights-segment-line > div {
  min-height: 8rem;
  padding: 0.8rem;
  border: 1px solid #cad8e2;
  border-radius: 7px;
  background: #fff;
}

.rights-segment-line small,
.rights-segment-line b { display: block; color: #607986; font-size: var(--product-font-caption); }
.rights-segment-line b { margin-top: 0.5rem; color: #315464; }
.rights-segment-line > i { color: var(--rights-blue); font-style: normal; }
.rights-segment-line > i::after { content: "\2192"; }

.rights-segment-line .is-locked {
  border-color: #8ca9ff;
  background: #eaf0ff;
}

.rights-segment-line .is-locked b {
  display: grid;
  margin-top: 0.75rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.rights-segment-line .is-locked em {
  height: 2.3rem;
  border-radius: 3px;
  background: linear-gradient(145deg, #2bd6df, #536eff);
}

.rights-hls-visual > footer {
  display: flex;
  color: #607986;
  font-size: var(--product-font-caption);
  gap: 0.65rem;
}

.rights-hls-visual > footer em { color: #92a5ae; font-style: normal; }

.rights-boundary {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--rights-cyan);
  background: #f4f7f9;
  color: #687f8b;
  font-size: var(--product-font-caption);
}

.rights-drm-section { background: var(--product-canvas); }

.rights-drm-route {
  position: relative;
  display: grid;
  min-height: 25rem;
  padding: 1.2rem;
  border: 1px solid var(--product-line);
  border-radius: 10px;
  background: #fff;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0.65rem;
  align-items: center;
}

.rights-drm-route > div {
  z-index: 1;
  min-height: 8rem;
  padding: 0.8rem;
  border: 1px solid #cedbe3;
  border-radius: 7px;
  background: #fafcfd;
}

.rights-drm-route > div.is-drm { border-color: #918cff; background: #f0efff; }
.rights-drm-route span,
.rights-drm-route strong,
.rights-drm-route small { display: block; color: #667e8a; font-size: var(--product-font-caption); }
.rights-drm-route span { color: var(--rights-blue); font-size: var(--product-font-label-xs); font-weight: 700; text-transform: uppercase; }
.rights-drm-route strong { margin-top: 0.5rem; color: #315463; }
.rights-drm-route small { margin-top: 0.4rem; }
.rights-drm-route > i { color: var(--rights-blue); font-style: normal; }
.rights-drm-route > i::after { content: "\2192"; }
.rights-drm-route svg { position: absolute; right: 8%; bottom: 2.7rem; left: 8%; width: 84%; height: 5.2rem; }
.rights-drm-route path { fill: none; stroke: #7a70ff; stroke-dasharray: 5 5; stroke-width: 1.5; }
.rights-drm-route > p { position: absolute; right: 1.2rem; bottom: 0.8rem; margin: 0; color: #7a70ad; font-size: var(--product-font-label-xs); }

.rights-drm-layout > ol { display: grid; grid-template-columns: repeat(2, 1fr); }
.rights-drm-layout > ol li { min-height: 12.5rem; padding: 1rem; }
.rights-drm-layout > ol li:nth-child(even) { border-left: 1px solid var(--product-line); }
.rights-drm-layout > ol li:nth-child(3) { border-top: 1px solid var(--product-line); }

.rights-watermark-section {
  border-color: rgba(135, 200, 222, 0.12);
  background: linear-gradient(145deg, #03121b, #061b27 64%, #071a30);
  color: #f4fbff;
}

.rights-watermark-section .product-section-heading p:last-child { color: #9cb1bb; }

.rights-watermark-demo {
  overflow: hidden;
  border: 1px solid rgba(137, 202, 225, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.rights-watermark-panel {
  display: grid;
  padding: 1rem;
  grid-template-columns: minmax(34rem, 1.35fr) minmax(22rem, 0.65fr);
  gap: 1rem;
}

.rights-watermark-panel figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(137, 202, 225, 0.18);
  border-radius: 8px;
  background: #020c12;
}

.rights-watermark-panel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rights-watermark-panel figcaption { padding: 0.7rem 0.85rem; color: #8ca3ae; font-size: var(--product-font-caption); }

.rights-analysis-overlay {
  position: absolute;
  inset: 0 0 2.4rem;
  display: flex;
  opacity: 0;
  background: linear-gradient(90deg, rgba(19, 218, 226, 0.04), rgba(71, 84, 255, 0.08));
  transition: opacity 260ms ease;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.rights-analysis-overlay::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(74, 226, 234, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 226, 234, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
}

.rights-analysis-overlay i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #66f0f4;
  box-shadow: 0 0 20px #45dbe3;
  animation: rights-scan 3.2s ease-in-out infinite;
}

.rights-analysis-overlay span {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(93, 230, 237, 0.48);
  border-radius: 5px;
  background: rgba(3, 18, 27, 0.82);
  color: #c8f7f8;
  font-size: var(--product-font-caption);
}

.rights-watermark-demo.is-investigating .rights-analysis-overlay { opacity: 1; }
@keyframes rights-scan { 0%, 100% { left: 10%; } 50% { left: 90%; } }

.rights-watermark-analysis {
  padding: 1rem;
  border: 1px solid rgba(137, 202, 225, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.rights-watermark-analysis > p { min-height: 4.5rem; margin: 0 0 1rem; color: #a8bbc4; font-size: var(--product-font-body-compact); }
.rights-watermark-analysis ol { margin: 0; padding: 0; list-style: none; }
.rights-watermark-analysis li { position: relative; padding: 0.7rem 0.7rem 0.7rem 2rem; border-top: 1px solid rgba(137, 202, 225, 0.12); color: #8ea5af; font-size: var(--product-font-caption); }
.rights-watermark-analysis li::before { position: absolute; left: 0.5rem; color: #55dfe7; content: "\2192"; }
.rights-boundary-dark { background: rgba(255, 255, 255, 0.025); color: #829aa6; }

.rights-routes-section { background: var(--product-canvas); }
.rights-route-examples { display: grid; border: 1px solid var(--product-line); border-radius: 11px; background: #fff; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rights-route-examples article { padding: 1rem; }
.rights-route-examples article + article { border-left: 1px solid var(--product-line); }
.rights-route-examples article > span { color: var(--rights-blue); }
.rights-route-examples ol { margin: 0.8rem 0 0; padding: 0; list-style: none; }
.rights-route-examples li { position: relative; min-height: 4rem; padding: 0.8rem; border: 1px solid var(--product-line); border-radius: 6px; color: #536f7c; font-size: var(--product-font-caption); }
.rights-route-examples li + li { margin-top: 1.3rem; }
.rights-route-examples li + li::before { position: absolute; top: -1.25rem; left: 50%; color: var(--rights-blue); content: "\2193"; }
.rights-route-examples li.is-rights { border-color: #91aaff; background: #eaf0ff; color: #2057bd; font-weight: 700; }

.rights-cdn-attachment {
  display: grid;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed #69bea9;
  border-radius: 8px;
  background: #edf8f5;
  grid-template-columns: 0.7fr 1.2fr 1fr;
  gap: 1rem;
  align-items: center;
}

.rights-cdn-attachment > span { color: #2d806b; }
.rights-cdn-attachment strong { color: #315f54; font-size: var(--product-font-card); }
.rights-cdn-attachment p { margin: 0; color: #65847d; font-size: var(--product-font-caption); }

@media (max-width: 1199.98px) {
  .rights-detail-layout,
  .rights-drm-layout { grid-template-columns: minmax(21rem, 0.8fr) minmax(29rem, 1.2fr); }
}

@media (max-width: 991.98px) {
  .rights-hero-system { margin-top: 1rem; }
  .rights-detail-layout,
  .rights-drm-layout,
  .rights-watermark-panel { grid-template-columns: 1fr; }
  .rights-matrix { overflow-x: auto; }
  .rights-matrix-head,
  .rights-matrix-row { min-width: 58rem; }
  .rights-drm-route { min-height: 20rem; }
  .rights-route-examples { grid-template-columns: 1fr; }
  .rights-route-examples article + article { border-top: 1px solid var(--product-line); border-left: 0; }
  .rights-cdn-attachment { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .rights-hero-system > header,
  .rights-hero-foot { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
  .rights-hero-route,
  .rights-scenario-flow,
  .rights-segment-line,
  .rights-drm-route,
  .rights-drm-layout > ol { grid-template-columns: 1fr; }
  .rights-hero-route > i { text-align: center; }
  .rights-hero-route > i::after { content: "\2193"; }
  .rights-hero-foot p { padding-left: 0; text-align: left; }
  .rights-scenario-flow li { min-height: 4.7rem; }
  .rights-scenario-flow li + li { margin-top: 1.1rem; }
  .rights-scenario-flow li + li::before { top: -1.2rem; left: 50%; content: "\2193"; }
  .rights-matrix { overflow: visible; border: 0; background: transparent; }
  .rights-matrix-head { display: none; }
  .rights-matrix-row { min-width: 0; margin-bottom: 0.75rem; border: 1px solid var(--product-line); border-radius: 8px; background: #fff; grid-template-columns: 1fr; }
  .rights-matrix-row + .rights-matrix-row { border-top: 1px solid var(--product-line); }
  .rights-matrix-row > * { border-right: 0; border-bottom: 1px solid var(--product-line); }
  .rights-matrix-row > *:last-child { border-bottom: 0; }
  .rights-matrix-row > *::before { display: block; margin-bottom: 0.3rem; color: #7b909a; font-size: var(--product-font-label-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; content: attr(data-label); }
  .rights-matrix footer { border: 1px solid var(--product-line); border-radius: 8px; }
  .rights-detail-layout > ol li { min-height: 0; }
  .rights-segment-line > div { min-height: 5rem; }
  .rights-segment-line > i { text-align: center; }
  .rights-segment-line > i::after { content: "\2193"; }
  .rights-hls-visual > footer { align-items: flex-start; flex-direction: column; }
  .rights-drm-route { min-height: 0; }
  .rights-drm-route > div { min-height: 5rem; }
  .rights-drm-route > i { text-align: center; }
  .rights-drm-route > i::after { content: "\2193"; }
  .rights-drm-route svg,
  .rights-drm-route > p { display: none; }
  .rights-drm-layout > ol li { min-height: 0; }
  .rights-drm-layout > ol li:nth-child(even) { border-left: 0; }
  .rights-drm-layout > ol li + li { border-top: 1px solid var(--product-line); }
  .rights-watermark-panel { padding: 0.75rem; }
  .rights-watermark-analysis > p { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rights-analysis-overlay i { animation: none; }
  .rights-analysis-overlay { transition: none; }
}