/*
  QR Studio Ultra - World-Class Polish System V1
  Premium visual system for the crown-jewel dashboard, command centre, report hub, and printable report surfaces.
*/

:root,
.qru-lux-root {
  --qru-bg: #050711;
  --qru-bg-2: #0A1022;
  --qru-ink: #F8FAFC;
  --qru-muted: rgba(248,250,252,.68);
  --qru-soft: rgba(248,250,252,.48);
  --qru-line: rgba(255,255,255,.13);
  --qru-line-strong: rgba(255,255,255,.22);
  --qru-cyan: #00D4FF;
  --qru-pink: #FF2E9F;
  --qru-purple: #8B5CF6;
  --qru-blue: #38BDF8;
  --qru-teal: #14B8A6;
  --qru-green: #22C55E;
  --qru-red: #F43F5E;
  --qru-orange: #F97316;
  --qru-lime: #A3E635;
  --qru-radius-xl: 28px;
  --qru-radius-lg: 20px;
  --qru-glow-cyan: 0 0 34px rgba(0,212,255,.22);
  --qru-glow-pink: 0 0 34px rgba(255,46,159,.20);
  --qru-shadow-deep: 0 28px 90px rgba(0,0,0,.48);
  --qru-shadow-soft: 0 18px 54px rgba(0,0,0,.32);
  --qru-gradient-signature: linear-gradient(116deg, #00D4FF 0%, #8B5CF6 45%, #FF2E9F 100%);
  --qru-gradient-surface:
    radial-gradient(circle at 12% 0%, rgba(0,212,255,.18), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255,46,159,.14), transparent 30%),
    radial-gradient(circle at 52% 120%, rgba(139,92,246,.18), transparent 42%),
    linear-gradient(135deg, #020617, #050711 54%, #10071F);
}

html.qru-lux-root {
  background: var(--qru-bg);
  color-scheme: dark;
}

body.qru-lux {
  background: var(--qru-gradient-surface) !important;
  color: var(--qru-ink);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "kern";
}

body.qru-lux::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 20%, black, transparent 72%);
}

body.qru-lux > * {
  position: relative;
  z-index: 1;
}

body.qru-lux :is(.hero, .panel, .status, .report, .command, .board, .card, .metric, .lane, article.card, section.card, .qru-crown-jewels) {
  border-color: var(--qru-line);
  box-shadow: var(--qru-shadow-soft);
}

body.qru-lux :is(.hero, .report, .command, .board, .qru-crown-jewels) {
  position: relative;
  overflow: hidden;
}

body.qru-lux :is(.hero, .report, .command, .board, .qru-crown-jewels)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), transparent 24%, transparent 70%, rgba(255,255,255,.045)),
    radial-gradient(circle at top left, rgba(0,212,255,.13), transparent 36%),
    radial-gradient(circle at bottom right, rgba(255,46,159,.10), transparent 34%);
  opacity: .82;
}

body.qru-lux :is(.hero, .report, .command, .board, .qru-crown-jewels) > * {
  position: relative;
  z-index: 1;
}

body.qru-lux :is(.card, article.card, section.card, .metric, .lane) {
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035)),
    rgba(5,7,17,.62) !important;
  border: 1px solid rgba(255,255,255,.125) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

body.qru-lux :is(.card, article.card, section.card, .metric, .lane):hover {
  transform: translateY(-2px);
  border-color: rgba(0,212,255,.28) !important;
  box-shadow: 0 22px 62px rgba(0,0,0,.35), 0 0 34px rgba(0,212,255,.10);
}

body.qru-lux :is(h1, h2, h3) {
  letter-spacing: -.035em;
}

body.qru-lux h1 {
  text-shadow: 0 0 46px rgba(0,212,255,.18);
}

body.qru-lux :is(.kicker, .qru-eyebrow, .metric-label, th) {
  color: var(--qru-cyan) !important;
}

body.qru-lux :is(button, .button, a.button, input[type="submit"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

body.qru-lux :is(button, .button, a.button, input[type="submit"]):not(.secondary)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--qru-gradient-signature);
  opacity: .96;
}

body.qru-lux :is(button, .button, a.button, input[type="submit"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(0,212,255,.20), 0 0 30px rgba(255,46,159,.12);
  filter: saturate(1.08);
}

body.qru-lux :is(button, .button, a.button, input[type="submit"]):active {
  transform: translateY(0) scale(.99);
}

body.qru-lux :is(input, select, textarea) {
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.045)),
    rgba(5,7,17,.68) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.qru-lux :is(input, select, textarea):focus {
  border-color: rgba(0,212,255,.54) !important;
  box-shadow: 0 0 0 4px rgba(0,212,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
}

body.qru-lux table {
  border-collapse: separate;
  border-spacing: 0;
}

body.qru-lux th {
  background: rgba(0,212,255,.055);
  border-bottom: 1px solid rgba(0,212,255,.18) !important;
}

body.qru-lux td {
  border-bottom-color: rgba(255,255,255,.085) !important;
}

body.qru-lux tr:hover td {
  background: rgba(255,255,255,.035);
}

body.qru-lux :is(.bar-fill, .fill) {
  box-shadow: 0 0 22px color-mix(in srgb, var(--c, #00D4FF), transparent 58%);
}

body.qru-lux :is(svg, canvas) {
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.22));
}

.qru-crown-jewels {
  margin: 0 0 18px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(0,212,255,.16), transparent 36%),
    radial-gradient(circle at bottom right, rgba(255,46,159,.14), transparent 34%),
    rgba(5,7,17,.88);
}

.qru-crown-copy {
  max-width: 920px;
}

.qru-eyebrow {
  margin: 0 0 8px;
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.qru-crown-copy h2 {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  line-height: 1.02;
}

.qru-crown-copy p {
  max-width: 850px;
  color: var(--qru-muted);
  margin: 10px 0 0;
}

.qru-crown-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.qru-crown-card {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--qru-ink);
  text-decoration: none;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.04)),
    rgba(255,255,255,.045);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.qru-crown-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,212,255,.38);
  box-shadow: 0 22px 58px rgba(0,0,0,.32), 0 0 34px rgba(0,212,255,.13);
}

.qru-crown-card-primary {
  background:
    radial-gradient(circle at top left, rgba(0,212,255,.22), transparent 42%),
    radial-gradient(circle at bottom right, rgba(255,46,159,.20), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
}

.qru-crown-card span {
  color: var(--qru-cyan);
  font-weight: 950;
  font-size: .82rem;
}

.qru-crown-card strong {
  font-size: 1.08rem;
  line-height: 1.05;
}

.qru-crown-card small {
  color: rgba(255,255,255,.62);
  line-height: 1.35;
}

.qru-reveal {
  opacity: 0;
  transform: translateY(10px);
}

.qru-reveal.qru-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: var(--qru-delay, 0ms);
}

.qru-geo-accent {
  --qru-geo: #00D4FF;
  border-color: color-mix(in srgb, var(--qru-geo), transparent 60%) !important;
  box-shadow: inset 3px 0 0 var(--qru-geo);
}

@media (max-width: 1120px) {
  .qru-crown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qru-crown-card-primary {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .qru-crown-grid {
    grid-template-columns: 1fr;
  }

  .qru-crown-card-primary {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.qru-lux *,
  body.qru-lux *::before,
  body.qru-lux *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .qru-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  @page {
    size: A4;
    margin: 14mm;
  }

  html,
  body.qru-lux {
    background: #fff !important;
    color: #111827 !important;
  }

  body.qru-lux::before {
    display: none !important;
  }

  body.qru-lux :is(.hero, .panel, .status, .actions, nav, .qru-crown-jewels) {
    display: none !important;
  }

  body.qru-lux :is(.report, .command, .board, .card, .metric, article.card, section.card, .lane) {
    background: #fff !important;
    color: #111827 !important;
    box-shadow: none !important;
    border-color: #D1D5DB !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.qru-lux :is(.card, .metric, article.card, section.card, .lane, tr, img, svg, canvas) {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.qru-lux table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  body.qru-lux thead {
    display: table-header-group;
  }

  body.qru-lux th,
  body.qru-lux td {
    color: #111827 !important;
    border-color: #D1D5DB !important;
  }

  body.qru-lux a {
    color: #111827 !important;
    text-decoration: none !important;
  }
}