/* ============================================================
   AI Quality Inspection — layered on style.css + risk.css (boards, tabs, panels)
   ============================================================ */

/* ---------- Hero ---------- */
.qc-hero::before {
  background:
    radial-gradient(900px 600px at 80% 40%, rgba(47, 107, 255, 0.26), transparent 60%),
    radial-gradient(520px 380px at 66% 88%, rgba(92, 242, 176, 0.08), transparent 70%),
    radial-gradient(600px 400px at 10% 10%, rgba(60, 211, 255, 0.10), transparent 70%),
    linear-gradient(180deg, #050d26 0%, var(--ink) 100%);
}
.qc-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; min-height: 640px; padding-bottom: 72px; }
.qc-hero__title { font-size: clamp(34px, 4vw, 56px); }
.qc-quote { margin: 22px 0 0; padding-left: 18px; border-left: 2px solid var(--cyan); font-size: 17px; line-height: 1.7; color: var(--text); font-style: italic; }
html.is-local .qc-quote { font-style: normal; }
.qc-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.qc-feat { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r); border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.45); }
.qc-feat__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), #1f8bff); box-shadow: 0 10px 24px -10px rgba(47, 107, 255, 0.9); }
.qc-feat.is-ok .qc-feat__ico { background: linear-gradient(135deg, #1fbf83, var(--ok)); box-shadow: 0 10px 24px -10px rgba(92, 242, 176, 0.7); }
.qc-feat__ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.qc-feat b { display: block; font-size: 15px; color: var(--ice); }
.qc-feat span:not(.qc-feat__ico) { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.qc-hero .hero__ctas { margin-top: 28px; }
.qc-hero .hero__stats { margin-top: 40px; }

.qc-hero__visual { position: relative; padding-bottom: 30px; }
.qc-live { border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: rgba(5, 12, 34, 0.88); backdrop-filter: blur(14px); overflow: hidden; box-shadow: 0 50px 90px -40px rgba(47, 107, 255, 0.7), 0 0 0 1px rgba(60, 211, 255, 0.06) inset; }
.qc-live__bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: rgba(11, 24, 64, 0.6); font-size: 11.5px; color: var(--cyan); }
.qc-live__meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px 4px; font-size: 13px; color: var(--text); }
.qc-wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.qc-wave i { width: 3px; height: 30%; border-radius: 2px; background: linear-gradient(180deg, var(--cyan), var(--blue)); animation: qcWave 1.1s ease-in-out infinite; }
.qc-wave i:nth-child(2n) { animation-delay: -.3s; } .qc-wave i:nth-child(3n) { animation-delay: -.55s; } .qc-wave i:nth-child(5n) { animation-delay: -.8s; }
@keyframes qcWave { 50% { height: 100%; } }
.qc-live__lines { display: grid; gap: 8px; align-content: start; min-height: 318px; padding: 10px 16px; }
.qc-line { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(16, 32, 78, 0.4); animation: lineIn .35s var(--ease); }
.qc-line__who { padding-top: 2px; font-size: 10.5px; letter-spacing: .08em; color: var(--mute); }
.qc-line.is-agent .qc-line__who { color: var(--cyan); }
.qc-line p { font-size: 13.5px; line-height: 1.55; color: var(--ice); }
.qc-line mark { padding: 0 3px; border-radius: 4px; background: rgba(255, 107, 129, 0.25); color: #ffb3bf; box-shadow: 0 0 0 1px rgba(255, 107, 129, 0.55); }
.qc-line.is-hit { border-color: rgba(255, 107, 129, 0.55); background: linear-gradient(110deg, rgba(255, 107, 129, 0.14), rgba(16, 32, 78, 0.4)); }
.qc-line.is-sum { grid-template-columns: 1fr; border-style: dashed; border-color: rgba(92, 242, 176, 0.45); background: rgba(92, 242, 176, 0.06); }
.qc-line.is-sum p { font: 12.5px/1.5 var(--f-mono); color: var(--ok); }
.qc-live__foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.qc-live__foot > div { display: grid; gap: 4px; padding: 12px 18px; }
.qc-live__foot > div + div { border-left: 1px solid var(--line); }
.qc-live__foot small { font-size: 10px; letter-spacing: .1em; color: var(--mute); }
.qc-live__foot b { font-size: 20px; font-weight: 500; color: var(--ok); }
.qc-live__score.is-bad b, .qc-live__hits b { color: var(--warn); }
.qc-live__lat b { color: var(--cyan); }
.qc-pop { position: absolute; right: -24px; bottom: 0; max-width: 300px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 107, 129, 0.6); background: rgba(24, 8, 20, 0.94); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(255, 107, 129, 0.6); opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.qc-pop.is-show { opacity: 1; transform: none; }
.qc-pop__k { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 6px; background: #ff6b81; color: #22040a; font-size: 10.5px; letter-spacing: .08em; }
.qc-pop b { display: block; font-size: 14px; color: #fff; }
.qc-pop p { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: #f5c9d1; }

/* ---------- Closed loop (offline vs real-time) ---------- */
.qc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qc-mode { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(16, 32, 78, 0.6), rgba(4, 10, 28, 0.3)); }
.qc-mode h3 { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 19px; color: var(--cyan); }
.qc-mode__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(60, 211, 255, 0.12); border: 1px solid rgba(60, 211, 255, 0.4); }
.qc-mode__ico svg, .qc-steps__ico svg, .qc-ebhe__ico svg, .qc-ly__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qc-steps { position: relative; display: grid; gap: 12px; }
.qc-steps::before { content: ""; position: absolute; left: 20px; top: 20px; bottom: 20px; width: 2px; background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px); opacity: .5; }
.qc-steps li { position: relative; display: flex; align-items: center; gap: 16px; }
.qc-steps__ico { flex: none; position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0b1a48; border: 1px solid var(--line-strong); color: var(--cyan); }
.qc-steps b, .qc-ebhe b { display: block; font-size: 15px; color: var(--ice); }
.qc-steps span:not(.qc-steps__ico), .qc-ebhe span:not(.qc-ebhe__ico) { display: block; font-size: 13.5px; color: var(--mute); }
.qc-mode--rt { border-color: rgba(60, 211, 255, 0.45); background: radial-gradient(420px 220px at 100% 0%, rgba(60, 211, 255, 0.14), transparent 70%), linear-gradient(180deg, rgba(47, 107, 255, 0.24), rgba(4, 10, 28, 0.3)); }
.qc-mode__val { margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(110deg, var(--blue), #1f6ae0); text-align: center; font-size: 14.5px; font-weight: 600; color: #fff; }
.qc-ebhe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qc-ebhe li { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 10, 28, 0.4); }
.qc-ebhe__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), #1f8bff); color: #fff; }
.qc-ebhe b i { font-style: normal; font-weight: 500; color: var(--mute); }
.qc-note { margin-top: 18px; padding: 18px 24px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: rgba(47, 107, 255, 0.08); text-align: center; font-size: 15px; color: var(--ice); }

/* ---------- Diagram engine ---------- */
.qc-dg { position: relative; display: grid; grid-template-columns: var(--cols); grid-auto-rows: minmax(44px, auto); gap: 26px 30px; padding: 12px 6px 6px; }
.qc-dg--dense { gap: 22px 24px; }
.qc-board--xl { min-width: 1240px; }
.qc-board--flow { min-width: 900px; }
.qc-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.qc-wires marker path { fill: rgba(140, 190, 255, 0.85); }
.qc-w { fill: none; stroke: rgba(130, 175, 255, 0.55); stroke-width: 1.4; stroke-linejoin: round; transition: stroke .3s; }
.qc-w.is-dash { stroke-dasharray: 4 4; stroke: rgba(130, 175, 255, 0.45); }
.qc-w__flow { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 22; animation: qcFlow 1.6s linear infinite; filter: drop-shadow(0 0 3px rgba(60, 211, 255, 0.9)); opacity: .85; }
@keyframes qcFlow { to { stroke-dashoffset: -25; } }
.qc-w.is-live { stroke: var(--cyan); stroke-width: 2.2; }
.qc-w__flow.is-live { stroke-dasharray: 6 8; stroke-width: 2.6; opacity: 1; }

.qc-g, .qc-n { grid-row: var(--r) / span var(--rs, 1); grid-column: var(--c) / span var(--cs, 1); }
.qc-g { position: relative; z-index: 0; margin: -14px -12px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.35); }
.qc-g__t { position: absolute; left: 14px; top: -10px; padding: 2px 10px; border-radius: 6px; background: #0a1640; border: 1px solid var(--line-strong); font-size: 11.5px; font-weight: 600; color: var(--ice); white-space: nowrap; }
.qc-g--plat { background: linear-gradient(160deg, rgba(47, 107, 255, 0.2), rgba(47, 107, 255, 0.06)); border-color: rgba(60, 211, 255, 0.4); }
.qc-g--plat > .qc-g__t { background: linear-gradient(120deg, var(--blue), #1f8bff); border-color: transparent; color: #fff; }
.qc-g--blue { background: rgba(60, 140, 255, 0.12); border-color: rgba(90, 160, 255, 0.4); }
.qc-g--green { background: rgba(47, 107, 255, 0.06); border-color: var(--line-strong); }
.qc-g--warm { background: rgba(60, 211, 255, 0.04); border-color: rgba(60, 211, 255, 0.26); }
.qc-g--violet { margin-block: -10px; background: rgba(110, 125, 255, 0.1); border-color: rgba(140, 155, 255, 0.4); }
.qc-g--lime { background: rgba(60, 211, 255, 0.04); border-color: rgba(60, 211, 255, 0.26); }
.qc-g--inner { margin: -10px -8px; border-style: dashed; border-color: rgba(60, 211, 255, 0.35); background: rgba(4, 10, 28, 0.35); }
.qc-g--inner > .qc-g__t { top: -9px; font-size: 11px; background: #071338; }

.qc-n { position: relative; z-index: 2; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: #0d1d4c; text-align: center; font-size: 13px; line-height: 1.35; color: var(--ice); transition: border-color .3s, box-shadow .3s, background .3s, transform .3s var(--ease); }
.qc-n small { font-size: 11px; color: var(--mute); }
.qc-n b { font-weight: 600; }
.qc-n:hover { border-color: rgba(60, 211, 255, 0.7); box-shadow: 0 0 0 3px rgba(60, 211, 255, 0.1); }
.qc-n--hd { min-height: 54px; font-size: 16px; font-weight: 600; background: linear-gradient(120deg, rgba(60, 211, 255, 0.22), rgba(47, 107, 255, 0.25)); border-color: rgba(60, 211, 255, 0.5); }
.qc-n--tall { align-self: stretch; }
.qc-n--db { background: linear-gradient(160deg, rgba(110, 125, 255, 0.24), rgba(110, 125, 255, 0.08)); border-color: rgba(140, 155, 255, 0.5); }
.qc-n--soft { background: rgba(60, 211, 255, 0.12); border-color: rgba(60, 211, 255, 0.4); }
.qc-n--set { gap: 6px; padding: 10px; border-style: dashed; border-color: rgba(60, 211, 255, 0.5); background: rgba(4, 10, 28, 0.6); }
.qc-n--set span { width: 100%; padding: 6px; border-radius: 7px; background: rgba(60, 211, 255, 0.12); border: 1px solid rgba(60, 211, 255, 0.35); }
.qc-n--ven { align-self: stretch; background: linear-gradient(160deg, rgba(110, 125, 255, 0.24), rgba(110, 125, 255, 0.08)); border-color: rgba(140, 155, 255, 0.5); color: var(--ice); font-weight: 600; }
.qc-n--cloud { border-radius: 99px; border-style: dashed; background: rgba(4, 10, 28, 0.85); }
.qc-n--cloud b { font-family: var(--f-mono); font-size: 12.5px; }
.qc-n--warm { background: rgba(60, 211, 255, 0.10); border-color: rgba(60, 211, 255, 0.42); }
.qc-n--pink { background: linear-gradient(135deg, #2f6bff, #22b8ff); border-color: rgba(60, 211, 255, 0.6); color: #fff; font-weight: 600; }
.qc-n--red2 { background: linear-gradient(180deg, rgba(47, 107, 255, 0.3), rgba(47, 107, 255, 0.1)); border-color: rgba(90, 150, 255, 0.55); }
.qc-n--gold { background: rgba(60, 211, 255, 0.10); border-color: rgba(60, 211, 255, 0.42); }
.qc-n--grey { background: linear-gradient(160deg, rgba(150, 170, 215, 0.16), rgba(150, 170, 215, 0.05)); border-color: rgba(150, 170, 215, 0.38); }
.qc-n--teal { background: linear-gradient(120deg, rgba(60, 211, 255, 0.24), rgba(60, 211, 255, 0.08)); border-color: rgba(60, 211, 255, 0.5); }
.qc-n--olive { min-height: 60px; background: linear-gradient(160deg, rgba(110, 125, 255, 0.24), rgba(110, 125, 255, 0.08)); border-color: rgba(140, 155, 255, 0.5); }
.qc-n--lime { background: rgba(60, 211, 255, 0.10); border-color: rgba(60, 211, 255, 0.42); }
.qc-n--io { transform: skewX(-12deg); }
.qc-n--io:hover { transform: skewX(-12deg); }
.qc-n--cyl { border-radius: 50% / 22%; background: linear-gradient(180deg, #1a3270, #0d1d4c); font-family: var(--f-mono); }
.qc-n--key { background: linear-gradient(120deg, var(--blue), #1f8bff); border-color: rgba(60, 211, 255, 0.6); color: #fff; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(47, 107, 255, 0.9); }
.qc-n--human { background: linear-gradient(160deg, rgba(110, 125, 255, 0.24), rgba(110, 125, 255, 0.08)); border-color: rgba(140, 155, 255, 0.5); }
.qc-n--oval { border-radius: 99px; background: rgba(4, 10, 28, 0.9); border-color: rgba(60, 211, 255, 0.55); }
.qc-n--dia { min-height: 64px; border: 0; background: transparent; }
.qc-n--dia::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(135deg, rgba(60, 211, 255, 0.7), rgba(110, 125, 255, 0.6)); }
.qc-n--dia::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #0d1d4c; }
.qc-n--dia:hover { box-shadow: none; }
.qc-tag { margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(4, 10, 28, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 10.5px !important; color: var(--ice) !important; }

.qc-n--card { align-self: stretch; justify-content: flex-start; gap: 8px; padding: 12px; }
.qc-n--card h5 { font-size: 13px; color: #fff; }
.qc-n--card ul, .qc-n--card ol { display: grid; gap: 6px; width: 100%; }
.qc-n--card li { padding: 6px 8px; border-radius: 7px; background: rgba(4, 10, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; color: var(--ice); }
.qc-n--card li.is-warm { background: rgba(60, 211, 255, 0.12); border-color: rgba(60, 211, 255, 0.42); }
.qc-n--card li.is-hot { background: linear-gradient(120deg, #2f6bff, #22b8ff); border-color: rgba(60, 211, 255, 0.6); color: #fff; }
.qc-n--row { flex-direction: row; justify-content: space-between; gap: 16px; padding: 10px 16px; align-self: center; }
.qc-n--row h5 { flex: none; min-width: 7em; text-align: left; }
.qc-n--row ul { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.qc-n--red { background: linear-gradient(180deg, rgba(47, 107, 255, 0.3), rgba(47, 107, 255, 0.1)); border-color: rgba(90, 150, 255, 0.55); }
.qc-n--rose { background: linear-gradient(160deg, rgba(110, 125, 255, 0.24), rgba(110, 125, 255, 0.08)); border-color: rgba(140, 155, 255, 0.5); }
.qc-n--rosec { background: linear-gradient(160deg, rgba(110, 125, 255, 0.24), rgba(110, 125, 255, 0.08)); border-color: rgba(140, 155, 255, 0.5); }
.qc-n--bluec { background: linear-gradient(180deg, rgba(47, 107, 255, 0.3), rgba(47, 107, 255, 0.1)); border-color: rgba(90, 150, 255, 0.55); }
.qc-n--amber { background: linear-gradient(160deg, rgba(110, 125, 255, 0.24), rgba(110, 125, 255, 0.08)); border-color: rgba(140, 155, 255, 0.5); }
.qc-n--red2c { background: linear-gradient(180deg, rgba(47, 107, 255, 0.3), rgba(47, 107, 255, 0.1)); border-color: rgba(90, 150, 255, 0.55); }
.qc-chain li { position: relative; }
.qc-chain li + li { margin-top: 6px; }
.qc-chain li + li::before { content: ""; position: absolute; left: 50%; top: -11px; border-inline: 4px solid transparent; border-top: 6px solid rgba(255, 255, 255, 0.6); transform: translateX(-50%); }
.qc-g2 { grid-template-columns: 1fr 1fr; }
.qc-g3 { grid-template-columns: repeat(3, 1fr); }
.qc-n--card ul.qc-g2, .qc-n--card ul.qc-g3 { display: grid; }
.qc-n.is-live { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(60, 211, 255, 0.16), 0 0 26px -4px rgba(60, 211, 255, 0.85); transform: translateY(-2px); }
.qc-n--oval.is-live, .qc-n--human.is-live { background: linear-gradient(120deg, var(--blue), #1f8bff); color: #fff; }

.qc-lbl { position: absolute; z-index: 3; transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 6px; background: #071233; border: 1px solid var(--line); font-size: 11px; line-height: 1.5; color: #b9ccff; white-space: nowrap; pointer-events: none; }
.qc-lbl.mono { color: var(--cyan); }
.qc-legend { display: flex; gap: 22px; justify-content: center; margin-top: 4px; font-size: 11.5px; color: var(--mute); }
.qc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.qc-legend b { font-weight: 500; font-family: inherit; }
.qc-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-strong); background: #0d1d4c; }
.qc-legend i.is-h { background: rgba(110, 125, 255, 0.24); border-color: rgba(140, 155, 255, 0.5); }

/* ---------- Scenarios + offline layer cards ---------- */
.qc-scen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(16, 32, 78, 0.35); }
.qc-scen .rk-sub { width: 100%; margin: 0; }
.qc-scen > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.qc-scen b { font-size: 14.5px; color: var(--ice); margin-right: 4px; }
.qc-scen ul { display: flex; flex-wrap: wrap; gap: 8px; }
.qc-scen li { padding: 5px 12px; border-radius: 99px; background: rgba(47, 107, 255, 0.14); border: 1px solid var(--line-strong); font-size: 13px; color: var(--ice); }

.qc-layers4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.qc-layers4 article { padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16, 32, 78, 0.55), rgba(4, 10, 28, 0.2)); }
.qc-layers4 article.is-key { border-color: rgba(60, 211, 255, 0.5); background: linear-gradient(180deg, rgba(47, 107, 255, 0.3), rgba(4, 10, 28, 0.25)); }
.qc-layers4 .mono { font-size: 12px; color: var(--cyan); }
.qc-layers4 h4 { margin: 8px 0 10px; font-size: 15.5px; line-height: 1.4; }
.qc-layers4 p, .qc-layers4 li { font-size: 13.5px; line-height: 1.6; color: var(--mute); }
.qc-layers4 li { position: relative; padding-left: 14px; }
.qc-layers4 li + li { margin-top: 6px; }
.qc-layers4 li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }

/* ---------- Four real-time layers ---------- */
.qc-ly { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.qc-ly article { position: relative; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: linear-gradient(160deg, hsl(222 80% calc(30% - var(--i) * 3%) / .55), rgba(4, 10, 28, 0.3)); overflow: hidden; transition: border-color .3s, transform .3s var(--ease); }
.qc-ly article:hover { border-color: rgba(60, 211, 255, 0.5); transform: translateY(-3px); }
.qc-ly article::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(60, 211, 255, 0.16), transparent 70%); pointer-events: none; }
.qc-ly header { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.qc-ly__ico { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--blue), #1f8bff); color: #fff; box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.14), 0 14px 30px -10px rgba(47, 107, 255, 0.9); }
.qc-ly header .qc-ly__ico { color: #fff; }
.qc-ly__ico svg { width: 26px; height: 26px; }
.qc-ly header small { font-size: 11px; letter-spacing: .14em; color: var(--cyan); }
.qc-ly header h3 { margin: 4px 0 2px; font-size: 20px; }
.qc-ly header span { font-size: 13.5px; color: var(--mute); }
.qc-ly__val { position: relative; margin-bottom: 16px; padding: 10px 14px 10px 38px; border-radius: 10px; background: rgba(92, 242, 176, 0.08); border: 1px solid rgba(92, 242, 176, 0.3); font-size: 14px; color: var(--ice); }
.qc-ly__val::before { content: ""; position: absolute; left: 15px; top: 50%; width: 11px; height: 6px; margin-top: -5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.qc-ly dl { display: grid; gap: 12px; }
.qc-ly dt { margin-bottom: 4px; font-size: 12px; letter-spacing: .06em; color: var(--mute); }
.qc-ly dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); }
.qc-ly dd li { position: relative; padding-left: 14px; }
.qc-ly dd li + li { margin-top: 6px; }
.qc-ly dd li::before { content: ""; position: absolute; left: 0; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.qc-ly dd b { color: var(--ice); }
.qc-code { display: inline-block; padding: 1px 7px; border-radius: 6px; background: rgba(60, 211, 255, 0.1); border: 1px solid rgba(60, 211, 255, 0.35); font: 12.5px/1.6 var(--f-mono); color: var(--cyan); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .qc-hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .qc-hero__visual { max-width: 620px; width: 100%; justify-self: center; }
  .qc-pop { right: 12px; }
  .qc-two, .qc-ly { grid-template-columns: 1fr; }
  .qc-layers4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .qc-feats, .qc-ebhe, .qc-layers4 { grid-template-columns: 1fr; }
  .qc-live__lines { min-height: 0; }
  .qc-pop { position: relative; right: 0; margin-top: -10px; max-width: none; }
  .qc-hero__visual { padding-bottom: 0; }
  .qc-live__foot b { font-size: 16px; }
  .qc-mode, .qc-ly article { padding: 20px; }
  .qc-ly header { align-items: flex-start; }
}
.qc-g--plat > .qc-g__t { left: auto; right: 14px; }
.qc-g > .qc-g__t--b { top: auto; bottom: -11px; left: 50%; right: auto; transform: translateX(-50%); }
.qc-lbl--l { transform: translate(calc(-100% + 8px), -50%); }
.qc-lbl--r { transform: translate(-8px, -50%); }
.qc-n--ven { white-space: nowrap; padding-inline: 4px; }