/* Kavvi final-check preparation screen (examlang-20261013) - see kv-exam-prep-20261013.js. A solid stage, never a blur
   over the concept page; Kavvi's deep green on dark, a pale mint on light; Syne / Kavvi Alexandria titles. */
.kvxp {
  --kvxp-bg: #07110e; --kvxp-bg2: #12231c; --kvxp-ink: #ecf6f1; --kvxp-ink2: #a7bdb4; --kvxp-accent: #7de3b8; --kvxp-cell: 125,227,184;
  --kvxp-card: rgba(255,255,255,.04); --kvxp-edge: rgba(125,227,184,.18);
  --kvxp-face: 'Syne', var(--kv-font-head, system-ui), sans-serif; --kvxp-body: var(--kv-font-body, 'DM Sans'), 'IBM Plex Sans Arabic', system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px 18px; box-sizing: border-box;
  background: radial-gradient(80% 60% at 50% 35%, var(--kvxp-bg2) 0%, var(--kvxp-bg) 75%); color: var(--kvxp-ink); text-align: center;
  opacity: 0; transition: opacity .25s ease;
}
.kvxp[dir='rtl'] { --kvxp-face: 'Kavvi Alexandria', var(--kv-font-ar, 'IBM Plex Sans Arabic'), system-ui, sans-serif; --kvxp-body: var(--kv-font-ar, 'IBM Plex Sans Arabic'), system-ui, sans-serif; }
:root[data-theme='light'] .kvxp { --kvxp-bg: #f1f7f3; --kvxp-bg2: #ffffff; --kvxp-ink: #10241d; --kvxp-ink2: #50665d; --kvxp-accent: #17805a; --kvxp-cell: 23,128,90; --kvxp-card: rgba(255,255,255,.8); --kvxp-edge: rgba(23,128,90,.18); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .kvxp { --kvxp-bg: #f1f7f3; --kvxp-bg2: #ffffff; --kvxp-ink: #10241d; --kvxp-ink2: #50665d; --kvxp-accent: #17805a; --kvxp-cell: 23,128,90; --kvxp-card: rgba(255,255,255,.8); --kvxp-edge: rgba(23,128,90,.18); }
}
.kvxp.is-on { opacity: 1; }
html.kvxp-open, html.kvxp-open body { overflow: hidden; }
.kvxp *, .kvxp *::before { box-sizing: border-box; }
.kvxp__card { width: min(100%, 440px); display: grid; justify-items: center; gap: 10px; }

/* the mark: seven cells - a core and six around it - that light up one after another, round and round */
.kvxp__mark { position: relative; width: 74px; height: 74px; margin-bottom: 8px; }
.kvxp__mark i {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 25px; margin: -12.5px 0 0 -11px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(var(--kvxp-cell), .18);
  animation: kvxp-cell 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 160ms);
}
.kvxp__mark i:nth-child(1) { transform: none; background: rgba(var(--kvxp-cell), .55); animation-name: kvxp-core; }
.kvxp__mark i:nth-child(2) { transform: translate(0, -24px); }
.kvxp__mark i:nth-child(3) { transform: translate(21px, -12px); }
.kvxp__mark i:nth-child(4) { transform: translate(21px, 12px); }
.kvxp__mark i:nth-child(5) { transform: translate(0, 24px); }
.kvxp__mark i:nth-child(6) { transform: translate(-21px, 12px); }
.kvxp__mark i:nth-child(7) { transform: translate(-21px, -12px); }

.kvxp__eyebrow { font: 700 11.5px/1.3 var(--kvxp-body); letter-spacing: .3em; text-indent: .3em; color: var(--kvxp-accent); }
.kvxp[dir='rtl'] .kvxp__eyebrow { letter-spacing: 0; text-indent: 0; font-size: 13.5px; }
.kvxp__title { margin: 0; font: 800 clamp(26px, 6vw, 38px)/1.15 var(--kvxp-face); letter-spacing: -.02em; color: var(--kvxp-ink); }
.kvxp[dir='rtl'] .kvxp__title { font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.kvxp__line { margin: 0 0 8px; font: 500 15px/1.5 var(--kvxp-body); color: var(--kvxp-ink2); }

.kvxp__steps { list-style: none; margin: 4px 0 0; padding: 14px 16px; width: 100%; display: grid; gap: 10px; text-align: start;
  border-radius: 18px; background: var(--kvxp-card); border: 1px solid var(--kvxp-edge); }
.kvxp__steps li { display: flex; align-items: center; gap: 10px; font: 600 14.5px/1.35 var(--kvxp-body); color: var(--kvxp-ink2); opacity: .55; transition: opacity .3s, color .3s; }
.kvxp__steps li.is-now, .kvxp__steps li.is-done { opacity: 1; }
.kvxp__steps li.is-now { color: var(--kvxp-ink); }
.kvxp__dot { position: relative; width: 18px; height: 18px; flex: none; border-radius: 99px; border: 2px solid rgba(var(--kvxp-cell), .35); }
.kvxp__steps li.is-now .kvxp__dot { border-color: var(--kvxp-accent); border-top-color: transparent; animation: kvxp-spin .8s linear infinite; }
.kvxp__steps li.is-done .kvxp__dot { border-color: var(--kvxp-accent); background: var(--kvxp-accent); }
.kvxp__steps li.is-done .kvxp__dot::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--kvxp-bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kvxp__note { margin: 8px 0 0; font: 500 13px/1.4 var(--kvxp-body); color: var(--kvxp-ink2); opacity: .8; }

@keyframes kvxp-cell { 0%, 100% { background: rgba(var(--kvxp-cell), .14); } 40% { background: rgba(var(--kvxp-cell), .6); } }
@keyframes kvxp-core { 0%, 100% { background: rgba(var(--kvxp-cell), .45); } 50% { background: rgba(var(--kvxp-cell), .8); } }
@keyframes kvxp-spin { to { transform: rotate(360deg); } }
.kvxp.is-still, .kvxp.is-still * { animation: none !important; transition: none !important; }