/* Website AI Audit tool page */
.au-hero { padding-bottom: 56px; }
.au-form { display: flex; gap: 10px; margin-top: 14px; max-width: 760px; background: #fff; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--yellow); padding: 10px; }
.au-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 10px; color: var(--muted); }
.au-input input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 18px; min-height: 52px; color: var(--ink); background: transparent; }
.au-form:focus-within { box-shadow: 8px 8px 0 var(--green-l); }
.au-form .btn { min-height: 54px; padding: 0 26px; font-size: 17px; }
.au-form .btn[disabled] { opacity: .65; cursor: progress; }
@media (max-width: 560px) { .au-form { flex-direction: column; } .au-form .btn { width: 100%; } }

.au-results { padding: 8px 0 72px; background: var(--mist); scroll-margin-top: 120px; }
.au-wrap { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; }
.au-results .card { padding: 22px; min-width: 0; }
.au-k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 0 0 10px; }

.au-loading { display: flex; gap: 18px; align-items: flex-start; margin-top: 28px; }
.au-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--green-t2); border-top-color: var(--green); animation: auSpin .8s linear infinite; flex: none; }
@keyframes auSpin { to { transform: rotate(360deg); } }
.au-steps { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; display: flex; flex-direction: column; gap: 4px; }
.au-steps li.done { color: var(--green-d); } .au-steps li.now { color: var(--ink); font-weight: 600; }

.au-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.au-score { display: flex; gap: 22px; align-items: center; min-width: 0; }
.au-ring { position: relative; flex: none; width: 148px; height: 148px; }
.au-ring svg { transform: rotate(-90deg); }
.au-ring circle { fill: none; stroke-width: 12; }
.au-ring .trk { stroke: var(--line-2); }
.au-ring .val { stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.au-ring.pass .val { stroke: var(--green); } .au-ring.warn .val { stroke: #E0A100; } .au-ring.fail .val { stroke: var(--red); }
.au-ring-n { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 50px; gap: 2px; }
.au-ring-n b { font-family: var(--display); font-size: 46px; letter-spacing: -0.04em; line-height: 1; }
.au-ring-n span { color: var(--muted); font-weight: 600; }
.au-score-t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.au-grade { font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; }
.au-grade.pass { color: var(--green-d); } .au-grade.warn { color: #8A6400; } .au-grade.fail { color: var(--red); }
.au-host { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.au-sub { margin: 0; font-size: 13.5px; color: var(--muted); }
.au-gate { margin-top: 10px; background: var(--yellow-t); border: 1px solid var(--yellow-t2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.au-gate span { color: var(--ink-2); }
.au-gate div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.au-actions .btn svg { flex: none; }
.au-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.au-eng-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.au-eng { border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; background: var(--green-t); color: var(--green-d); }
.au-eng b { font-size: 15px; color: var(--ink); }
.au-eng.n { background: var(--red-t); color: var(--red); }
.au-eng-i { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; background: var(--green); color: #fff; margin-bottom: 4px; }
.au-eng.n .au-eng-i { background: var(--red); }
.au-eng-i svg { width: 13px; height: 13px; }

.au-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.au-cat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s; min-width: 0; }
.au-cat:hover { border-color: var(--ink-2); color: var(--ink); transform: translateY(-2px); }
.au-cat-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.au-cat-h b { font-size: 14.5px; line-height: 1.25; }
.au-cat-h .mono { font-size: 20px; font-weight: 500; }
.au-bar { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.au-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.au-cat.warn .au-bar i { background: #E0A100; } .au-cat.fail .au-bar i { background: var(--red); }
.au-cat-f { font-size: 12px; color: var(--muted); }

.au-prio h2, .au-cta h2, .au-sec-h h2 { font-size: 24px; font-weight: 800; }
.au-prio > p { margin: 6px 0 12px; }
.au-prio ol { list-style: none; counter-reset: p; margin: 0; padding: 0; display: flex; flex-direction: column; }
.au-prio li { counter-increment: p; display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-2); }
.au-prio li::before { content: counter(p); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.au-prio li > div { flex: 1; min-width: 0; }
.au-prio li p { margin: 2px 0 0; color: var(--ink-2); font-size: 14.5px; }
.au-pts { flex: none; background: var(--yellow-t); color: #6B5200; font-weight: 700; font-size: 13px; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }

.au-snap-t { margin: 0; color: #1A0DAB; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.au-snap-d { margin: 4px 0 10px; color: var(--ink-2); font-size: 14.5px; }
.au-snap-x { margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); background: var(--mist); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }

.au-detail { display: flex; flex-direction: column; gap: 18px; }
.au-sec { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px 10px; scroll-margin-top: 130px; min-width: 0; }
.au-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.au-sec-p { margin: 4px 0 10px; font-size: 14.5px; }
.au-pill { font-family: var(--mono); font-weight: 500; font-size: 14px; border-radius: 99px; padding: 3px 10px; background: var(--green-t); color: var(--green-d); white-space: nowrap; }
.au-pill.warn { background: var(--yellow-t); color: #6B5200; } .au-pill.fail { background: var(--red-t); color: var(--red); }
.au-row { border-top: 1px solid var(--line-2); }
.au-row summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 2px; cursor: pointer; }
.au-row summary::-webkit-details-marker { display: none; }
.au-row summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 2px; transition: transform .15s; flex: none; }
.au-row[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.au-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--green); }
.au-dot.warn { background: #E0A100; } .au-dot.fail { background: var(--red); } .au-dot.info { background: var(--muted); }
.au-row-l { flex: 1; min-width: 0; font-weight: 600; }
.au-row-s { flex: none; font-size: 15px; color: var(--ink-2); }
.au-row-b { padding: 0 2px 14px 38px; font-size: 14.5px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.au-row-b p { margin: 0; overflow-wrap: anywhere; }
.au-k2 { display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 1px; }
.au-fix { background: var(--yellow-t); border-radius: 10px; padding: 10px 12px; }
.au-tablewrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 12px; }
.au-bots { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.au-bots th, .au-bots td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.au-bots th { font-size: 12px; color: var(--muted); font-weight: 700; background: var(--mist); }
.au-bots tr:last-child td { border-bottom: 0; }
.au-yn { display: inline-block; border-radius: 99px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.au-yn.y { background: var(--green-t); color: var(--green-d); } .au-yn.n { background: var(--red-t); color: var(--red); }
.au-rule { font-size: 12px; color: var(--muted); }
.au-fw { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.au-fw li { display: inline-flex; gap: 8px; align-items: center; background: var(--mist); border-radius: 10px; padding: 6px 10px; font-size: 13px; }

.au-cta { display: flex; gap: 20px; align-items: center; justify-content: space-between; background: var(--ink) !important; color: #fff; border-color: var(--ink) !important; }
.au-cta p { color: #C9D3CD; margin: 6px 0 0; max-width: 44em; }
.au-cta h2 { color: #fff; }

.au-fcats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.au-fcat { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: #fff; min-width: 0; }
.au-fcat-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.au-fcat-h b { font-family: var(--display); font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; }
.au-fcat-h .mono { color: var(--green); font-weight: 500; }
.au-fcat p { margin: 6px 0 10px; color: var(--muted); font-size: 14px; }
.au-fcat ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 980px) { .au-top { grid-template-columns: 1fr; } .au-cats, .au-fcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .au-results .card { padding: 16px; }
  .au-score { flex-direction: column; align-items: flex-start; gap: 12px; }
  .au-cats, .au-fcats { grid-template-columns: 1fr; }
  .au-sec { padding: 16px 14px 6px; }
  .au-row-b { padding-left: 0; }
  .au-cta { flex-direction: column; align-items: stretch; }
  .au-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .au-ring .val { transition: none; } .au-spin { animation-duration: 3s; } }

/* ---- immersive hero: live scan window ---- */
.au-ask { max-width: 720px; }
.au-stage { margin-bottom: 0; }
.au-demo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 380px; }
.au-log-wrap { padding: 18px 20px; border-right: 1px solid var(--line-2); background: #0F1512; color: #DDE5E0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.au-log-wrap .au-k { color: #8FA197; }
.au-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 13px; line-height: 1.45; flex: 1; min-height: 270px; }
.au-log li { display: flex; gap: 10px; align-items: flex-start; animation: auLine .35s ease both; overflow-wrap: anywhere; }
.au-log li .au-lg-i { flex: none; width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-top: 1px; background: #26312B; color: #9FB0A6; }
.au-log li.ok .au-lg-i { background: #1E4D33; color: #7BE08F; }
.au-log li.fail .au-lg-i { background: #5A1F1B; color: #FF9C93; } .au-log li.fail { color: #FFC9C3; }
.au-log li.warn .au-lg-i { background: #5A4A12; color: #FFD84D; }
.au-log li.star { color: var(--yellow); font-weight: 600; } .au-log li.star .au-lg-i { background: var(--yellow); color: var(--ink); }
.au-log li.run { color: #9FB0A6; }
@keyframes auLine { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.au-prog { height: 4px; border-radius: 99px; background: #26312B; overflow: hidden; }
.au-prog i { display: block; height: 100%; width: 0; background: var(--green-l); transition: width .5s ease; }
.au-live { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.au-live-top { display: flex; gap: 16px; align-items: center; }
.au-ring.sm { width: 112px; height: 112px; }
.au-ring.sm .au-ring-n { padding-top: 36px; } .au-ring.sm .au-ring-n b { font-size: 34px; }
.au-mini-eng { display: flex; flex-wrap: wrap; gap: 5px; }
.au-me { font-size: 12px; font-weight: 600; border-radius: 99px; padding: 3px 9px; background: var(--mist-2); color: var(--muted); transition: background .3s, color .3s; }
.au-me.y { background: var(--green-t); color: var(--green-d); } .au-me.n { background: var(--red-t); color: var(--red); }
.au-mini-cats { display: flex; flex-direction: column; gap: 7px; }
.au-mc { display: grid; grid-template-columns: 128px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.au-mc b { text-align: right; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.au-bar i { transition: width .7s cubic-bezier(.2,.8,.2,1); }
.au-bar i.warn { background: #E0A100; } .au-bar i.fail { background: var(--red); } .au-bar i.info { background: var(--line); }
.au-demo-note { margin: auto 0 0; font-size: 12.5px; color: var(--muted); }
.au-demo-note a { font-weight: 700; text-decoration: none; }
.dot.pulse { animation: auPulse 1s ease-in-out infinite; }
@keyframes auPulse { 50% { opacity: .3; } }
@media (max-width: 860px) { .au-demo { grid-template-columns: minmax(0, 1fr); } .au-log-wrap { border-right: 0; } .au-log { min-height: 0; } }
@media (max-width: 420px) { .au-mc { grid-template-columns: 104px minmax(0, 1fr) 26px; } .au-live-top { flex-direction: column; align-items: flex-start; } }

/* ---- report: entrance animations ---- */
.au-results { background: linear-gradient(var(--paper), var(--mist) 120px); }
.au-in { opacity: 0; transform: translateY(14px); }
.au-results.shown .au-in { animation: auIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes auIn { to { opacity: 1; transform: none; } }
.au-pop { opacity: 0; transform: scale(.9); }
.au-results.shown .au-pop { animation: auPop .45s cubic-bezier(.2,1.4,.4,1) both; animation-delay: var(--d, 0ms); }
@keyframes auPop { to { opacity: 1; transform: none; } }
.au-ring { width: 156px; height: 156px; }
.au-ring .au-ring-n { padding-top: 54px; }
.au-ring .proj { fill: none; stroke-width: 12; stroke: var(--green-l); opacity: 0; stroke-dasharray: 4 5; transition: stroke-dashoffset .6s ease, opacity .3s; }
.au-ring.projecting .proj { opacity: .55; stroke-dasharray: none; }

/* ---- fix simulator ---- */
.au-prio-h { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.au-proj { display: flex; flex-direction: column; align-items: flex-end; background: var(--mist); border-radius: 14px; padding: 10px 16px; min-width: 150px; }
.au-proj b { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: -0.04em; transition: color .3s; }
.au-proj b.pass { color: var(--green); } .au-proj b.warn { color: #8A6400; } .au-proj b.fail { color: var(--red); }
.au-proj-d { font-weight: 700; color: var(--green); font-size: 14px; min-height: 1.2em; }
.au-prio li::before { display: none; }
.au-tick { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line); background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 1px; transition: all .15s; }
.au-tick:hover { border-color: var(--green); }
.au-tick[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; transform: scale(1.06); }
.au-prio li { transition: background .2s; border-radius: 10px; }
.au-prio li.on { background: var(--green-t); }
.au-prio li.on p { color: var(--green-d); }
.au-prio li { padding-left: 8px; padding-right: 8px; }
#tickAll { margin-top: 10px; }

/* ---- filters and factor meters ---- */
.au-filter { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: calc(var(--promo-h, 0px) + 69px); z-index: 5; background: rgba(246,247,245,.94); backdrop-filter: blur(6px); padding: 10px 0; }
.au-filter .hz-tones { background: #fff; border: 1px solid var(--line); }
.au-meter { flex: none; width: 90px; height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.au-meter i { display: block; height: 100%; background: var(--green); }
.au-meter i.warn { background: #E0A100; } .au-meter i.fail { background: var(--red); } .au-meter i.info { background: var(--line); }
.au-row summary:hover .au-row-l { color: var(--green-d); }
@media (max-width: 560px) { .au-meter { display: none; } .au-proj { align-items: flex-start; width: 100%; } .au-filter { top: calc(var(--promo-h, 0px) + 69px); } }
@media (prefers-reduced-motion: reduce) { .au-in, .au-pop { opacity: 1; transform: none; animation: none !important; } .au-log li { animation: none; } }

.au-stage.real .float, .au-stage.real .au-demo-note { display: none; }
@media (max-width: 560px) {
  .au-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .au-cat { padding: 11px; gap: 6px; } .au-cat-h { flex-direction: column-reverse; gap: 2px; } .au-cat-h b { font-size: 13px; } .au-cat-h .mono { font-size: 22px; } .au-cat-f { font-size: 11px; }
}

/* ================= live factor board ================= */
.au-board { padding: 22px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; position: relative; }
.au-board::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(91,195,106,.10) 50%, transparent 70%); background-size: 250% 100%; animation: bdSweep 2.4s linear infinite; pointer-events: none; }
.au-board[data-phase="done"]::before, .au-board[data-phase="error"]::before { display: none; }
@keyframes bdSweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.bd-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.bd-h .au-k { display: flex; align-items: center; gap: 8px; }
.bd-h .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-l); display: inline-block; }
.au-board[data-phase="error"] .bd-h .dot { background: var(--red); }
.bd-h h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin-top: 4px; overflow-wrap: anywhere; }
.bd-host { color: var(--green-d); }
.bd-final { padding: 0 6px; border-radius: 8px; animation: auPop .5s cubic-bezier(.2,1.4,.4,1) both; display: inline-block; }
.bd-final.pass { background: var(--green-t); color: var(--green-d); } .bd-final.warn { background: var(--yellow-t); color: #6B5200; } .bd-final.fail { background: var(--red-t); color: var(--red); }
.bd-count { display: flex; align-items: baseline; gap: 4px; flex: none; color: var(--muted); font-weight: 600; }
.bd-count b { font-size: 34px; color: var(--ink); line-height: 1; font-weight: 500; }
.bd-prog { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.bd-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--green-l)); border-radius: 99px; transition: width .35s ease; }
.bd-now { margin: 0; min-height: 26px; font-size: 14.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-now-k { font-family: var(--mono); font-size: 12px; background: var(--ink); color: var(--yellow); border-radius: 6px; padding: 2px 8px; }
.bd-pill { font-size: 13px; font-weight: 700; border-radius: 99px; padding: 3px 11px; animation: auPop .4s cubic-bezier(.2,1.4,.4,1) both; }
.bd-pill.pass { background: var(--green-t); color: var(--green-d); } .bd-pill.warn { background: var(--yellow-t); color: #6B5200; animation-delay: .1s; } .bd-pill.fail { background: var(--red-t); color: var(--red); animation-delay: .2s; }
.bd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.bd-g { border: 1px solid var(--line-2); border-radius: 16px; padding: 10px; background: #FBFCFB; transition: border-color .3s, box-shadow .3s, transform .3s; min-width: 0; }
.bd-g.active { border-color: var(--green-l); box-shadow: 0 0 0 4px var(--green-t); transform: translateY(-2px); }
.bd-gh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 2px 4px 8px; }
.bd-gh b { font-size: 13px; line-height: 1.25; }
.bd-cs { font-size: 15px; color: var(--muted); }
.bd-cs.pass { color: var(--green-d); } .bd-cs.warn { color: #8A6400; } .bd-cs.fail { color: var(--red); }
.bd-tiles { display: flex; flex-direction: column; gap: 5px; }
.bd-t { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid transparent; background: #fff; border-radius: 10px; padding: 6px 8px; font: inherit; font-size: 12.5px; color: var(--muted); opacity: .45; cursor: default; transition: opacity .25s, background .25s, border-color .25s, transform .25s, color .25s; }
.bd-i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .25s; }
.bd-i svg { width: 11px; height: 11px; }
.bd-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-s { flex: none; font-size: 12px; }
.bd-t.checking { opacity: 1; color: var(--ink); border-color: var(--green-l); background: var(--green-t); transform: scale(1.03); box-shadow: 0 6px 16px rgba(11,122,62,.15); }
.bd-t.checking .bd-i { border-color: var(--green); border-top-color: transparent; animation: auSpin .6s linear infinite; }
.bd-t.checked { opacity: .8; color: var(--ink-2); }
.bd-t.checked .bd-i { border-color: var(--green-l); background: var(--green-t2); }
.au-board[data-phase="scoring"] .bd-t.checked { animation: bdBreathe 1.2s ease-in-out infinite; }
.au-board[data-phase="scoring"] .bd-t:nth-child(2n) { animation-delay: .3s; } .au-board[data-phase="scoring"] .bd-t:nth-child(3n) { animation-delay: .6s; }
@keyframes bdBreathe { 50% { opacity: .45; } }
.bd-t.res { opacity: 1; color: var(--ink); animation: bdFlip .45s cubic-bezier(.2,.8,.2,1) both; cursor: pointer; }
.bd-t.res:hover { border-color: var(--ink-2); transform: translateX(2px); }
.bd-t.res .bd-i { border: 0; }
.bd-t.pass { background: var(--green-t); } .bd-t.pass .bd-i { background: var(--green); }
.bd-t.warn { background: var(--yellow-t); } .bd-t.warn .bd-i { background: #E0A100; }
.bd-t.fail { background: var(--red-t); } .bd-t.fail .bd-i { background: var(--red); }
.bd-t.info { background: var(--mist-2); } .bd-t.info .bd-i { background: var(--muted); }
.bd-t.res .bd-s { font-weight: 500; color: var(--ink-2); }
@keyframes bdFlip { 0% { transform: rotateX(90deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
.bd-g.done { animation: bdDone .5s ease; }
@keyframes bdDone { 40% { box-shadow: 0 0 0 5px var(--green-t2); } }
.au-row.flash { animation: rowFlash 1.6s ease; }
@keyframes rowFlash { 0%, 40% { background: var(--yellow-t); } 100% { background: transparent; } }
@media (max-width: 1100px) { .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .au-board { padding: 16px; } .bd-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .bd-h { flex-direction: column; align-items: flex-start; gap: 6px; } .bd-count b { font-size: 26px; } }

/* ================= factor explorer ================= */
.fx { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.fx.seen { opacity: 1; transform: none; }
.fx-bar { display: flex; gap: 4px; height: 44px; }
.fx-seg { border: 0; border-radius: 10px; background: var(--c); color: #fff; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; min-width: 0; overflow: hidden; opacity: .35; transform-origin: left; transition: opacity .3s, transform .3s, flex-grow .4s; }
.fx.seen .fx-seg { animation: segGrow .7s cubic-bezier(.2,.8,.2,1) both; }
.fx.seen .fx-seg:nth-child(2) { animation-delay: .06s; } .fx.seen .fx-seg:nth-child(3) { animation-delay: .12s; } .fx.seen .fx-seg:nth-child(4) { animation-delay: .18s; } .fx.seen .fx-seg:nth-child(5) { animation-delay: .24s; } .fx.seen .fx-seg:nth-child(6) { animation-delay: .3s; } .fx.seen .fx-seg:nth-child(7) { animation-delay: .36s; } .fx.seen .fx-seg:nth-child(8) { animation-delay: .42s; }
@keyframes segGrow { from { transform: scaleX(0); } to { transform: none; } }
.fx-seg:hover { opacity: .7; } .fx-seg.on { opacity: 1; box-shadow: 0 8px 18px rgba(15,21,18,.18); }
.fx-seg span { white-space: nowrap; }
.fx-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.fx-tabs { display: flex; flex-direction: column; gap: 6px; }
.fx-tab { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; }
.fx-tab:hover { transform: translateX(4px); border-color: var(--ink-2); }
.fx-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 10px 24px rgba(15,21,18,.18); transform: translateX(6px); }
.fx-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); transition: transform .3s; }
.fx-tab.on .fx-ic { background: var(--c); color: #fff; transform: rotate(-8deg) scale(1.08); }
.fx-tn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fx-tn b { font-size: 14.5px; line-height: 1.25; } .fx-tn small { font-size: 12px; color: var(--muted); } .fx-tab.on .fx-tn small { color: #9FB0A6; }
.fx-w { font-size: 15px; font-weight: 500; }
.fx-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.fx-tab.on .fx-timer { animation: fxTimer 5.2s linear both; }
.fx.manual .fx-timer, .fx.hold .fx-timer { animation: none !important; transform: scaleX(0); }
@keyframes fxTimer { to { transform: scaleX(1); } }
.fx-panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; min-height: 100%; position: relative; overflow: hidden; }
.fx-panel::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--c); opacity: .08; }
.fx-ph { display: flex; gap: 20px; align-items: center; margin-bottom: 16px; }
.fx-big { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 24px; background: var(--c); color: #fff; }
.fx-big b { font-size: 40px; line-height: 1; font-weight: 500; } .fx-big span { font-size: 11px; opacity: .85; text-align: center; line-height: 1.2; margin-top: 4px; padding: 0 6px; }
.fx-ph h3 { font-size: 24px; font-weight: 800; } .fx-ph p { margin: 6px 0 0; color: var(--ink-2); }
.fx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fx-list li { display: flex; gap: 10px; align-items: flex-start; background: var(--mist); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.fx-panel.play .fx-list li { animation: fxItem .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
.fx-panel.play .fx-big { animation: auPop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes fxItem { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.fx-chk { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--c); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.fx-list b { display: block; font-size: 14px; } .fx-list small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
@media (max-width: 900px) { .fx-body { grid-template-columns: minmax(0, 1fr); } .fx-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } .fx-tab { flex: none; scroll-snap-align: start; } .fx-tab:hover, .fx-tab.on { transform: none; } .fx-list { grid-template-columns: minmax(0, 1fr); } .fx-bar span { display: none; } }
@media (max-width: 560px) { .fx-ph { flex-direction: column; align-items: flex-start; } .fx-big { width: 84px; height: 84px; } .fx-big b { font-size: 32px; } .fx-panel { padding: 18px; } }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.rv.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fx, .rv { opacity: 1; transform: none; transition: none; }
  .fx-seg, .fx-list li, .fx-big, .bd-t, .bd-g, .au-board::before, .fx-timer { animation: none !important; }
}