/* O Jailbreaks — verify page (verify/index.html).
   Builds on ../styles.css: colours, header, buttons, chip and footer all come from there. */

.vf-field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.vf { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: calc(var(--header-h) + 36px) var(--gutter) 0; }

/* Header: brand, back to the packs, Join the Discord */
.vf-back {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 15px 0 11px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); font: 600 13.5px var(--font); white-space: nowrap;
  transition: border-color .3s, background .3s, color .3s;
}
.vf-back .ico { font-size: 16px; }
.vf-back:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .06); color: #fff; }

/* Entrance: everything rises in, one after another */
.vf-in { animation: vf-up .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }
@keyframes vf-up { from { opacity: 0; transform: translateY(22px); } }

/* Hero */
.vf-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px; min-height: calc(100vh - var(--header-h) - 60px); padding-bottom: 40px; }
.vf-title { margin: 24px 0 20px; font-size: clamp(66px, 8.4vw, 140px); }
.vf-accent { background: linear-gradient(180deg, #8fb6ff, var(--blue) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.vf-go.is-discord { color: #fff; background: linear-gradient(180deg, var(--discord-2), var(--discord)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(88, 101, 242, .6), 0 16px 38px -12px rgba(88, 101, 242, 1); }
.vf-go.is-discord .btn-icon { background: rgba(5, 8, 30, .28); color: #fff; }
.vf-fine { margin-top: 16px; font-size: 13.5px; color: var(--dim); }

/* How it's going (what the bot said / who's logged in) */
.vf-status {
  --tone: var(--blue-2); --tone-bg: rgba(79, 141, 255, .1);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; max-width: 520px; margin-bottom: 22px; padding: 16px 18px 16px 16px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  background: linear-gradient(110deg, var(--tone-bg), rgba(10, 15, 27, .5) 80%);
  box-shadow: 0 20px 50px -26px color-mix(in srgb, var(--tone) 70%, transparent);
  animation: vf-pop .6s var(--spring) both;
}
.vf-status[data-tone="ok"] { --tone: var(--green); --tone-bg: rgba(71, 230, 161, .1); }
.vf-status[data-tone="warn"] { --tone: var(--amber); --tone-bg: rgba(245, 177, 74, .1); }
.vf-status[data-tone="bad"] { --tone: #ff6b6b; --tone-bg: rgba(255, 107, 107, .1); }
@keyframes vf-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.vf-status-ico { grid-row: span 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone); font-size: 20px; }
.vf-status b { align-self: center; font-size: 16px; font-weight: 600; color: #fff; }
.vf-status p { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.vf-status small { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.vf-user { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.vf-user img { width: 26px; height: 26px; border-radius: 50%; background: var(--discord); }
.vf-user span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-user b { color: var(--text); font-weight: 600; }
.vf-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; color: var(--muted); font: 500 13px var(--font); transition: color .2s, background .2s; }
.vf-link .ico { font-size: 14px; }
.vf-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }

/* The emblem: the O inside spinning rings, scanned until you're verified, then a green check */
.vf-art { display: grid; justify-items: center; gap: 22px; }
.vf-emblem { --ring: rgba(120, 160, 255, .5); --glow: rgba(47, 107, 255, .55); position: relative; width: min(460px, 100%); aspect-ratio: 1; transition: filter .6s; }
.vf-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 66%); filter: blur(38px); animation: breathe 4s ease-in-out infinite alternate; transition: background .8s; }
.vf-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vf-ring { fill: none; stroke: var(--ring); transform-origin: 200px 200px; transition: stroke .8s; }
.vf-ring.r1 { stroke-width: 1; stroke-dasharray: 2 7; opacity: .55; animation: spin 80s linear infinite; }
.vf-ring.r2 { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 22 78; filter: drop-shadow(0 0 6px var(--ring)); animation: spin 9s linear infinite; }
.vf-ring.r3 { stroke-width: 1; opacity: .35; }
.vf-ring.r4 { stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 8 92; opacity: .7; animation: spin 14s linear infinite reverse; }
.vf-logo { position: absolute; inset: 24%; width: 52%; height: 52%; border-radius: 50%; filter: drop-shadow(0 0 30px var(--glow)); animation: vf-float 6s ease-in-out infinite alternate; }
@keyframes vf-float { to { transform: translateY(-8px); } }
.vf-scan { position: absolute; inset: 24%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.vf-scan::before {
  content: ''; position: absolute; left: -10%; right: -10%; height: 18%; top: -20%;
  background: linear-gradient(180deg, transparent, rgba(127, 227, 255, .55) 50%, transparent); filter: blur(2px); mix-blend-mode: screen;
  animation: vf-scan 2.8s var(--ease-io) infinite;
}
@keyframes vf-scan { 0% { top: -20%; } 60%, 100% { top: 105%; } }
.vf-badge {
  position: absolute; right: 17%; bottom: 17%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--green); color: #052014; font-size: 32px; box-shadow: 0 0 0 6px rgba(4, 6, 11, .9), 0 0 40px rgba(71, 230, 161, .8);
  transform: scale(0) rotate(-40deg); transition: transform .7s var(--spring);
}
.vf-badge .ico { stroke-width: 3; }
.vf-emblem.is-verified { --ring: rgba(71, 230, 161, .6); --glow: rgba(71, 230, 161, .4); }
.vf-emblem.is-verified .vf-scan { display: none; }
.vf-emblem.is-verified .vf-badge { transform: none; }
.vf-emblem.is-stopped { --ring: rgba(255, 140, 120, .45); --glow: rgba(255, 107, 107, .3); }
.vf-emblem.is-stopped .vf-scan, .vf-emblem.is-stopped .vf-ring { animation-play-state: paused; }
.vf-art-label { display: inline-flex; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.vf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-2); animation: pulse 2.2s infinite; }
.vf-emblem.is-verified + .vf-art-label .vf-dot { background: var(--green); }
.vf-emblem.is-stopped + .vf-art-label .vf-dot { background: #ff6b6b; animation: none; }

/* Sections */
.vf-section { padding-top: 90px; }
.vf-h2 { max-width: 16ch; font: 900 clamp(42px, 5.4vw, 80px)/.88 var(--display); letter-spacing: -.005em; text-transform: uppercase; }
.vf-h3 { margin-bottom: 8px; font: 800 clamp(30px, 3vw, 42px)/.95 var(--display); text-transform: uppercase; }
.vf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; counter-reset: none; }
.vf-step {
  position: relative; display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(165deg, rgba(47, 107, 255, .09), rgba(10, 15, 27, .72) 60%);
  transition: border-color .3s, transform .5s var(--ease);
}
.vf-step:hover { border-color: var(--line-3); transform: translateY(-3px); }
.vf-num { position: absolute; top: 18px; right: 22px; font: 500 12px var(--mono); letter-spacing: .14em; color: var(--blue-2); }
.vf-step-ico { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--ice); font-size: 22px; }
.vf-step h3 { font: 600 19px var(--font); letter-spacing: -.02em; }
.vf-step p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.vf-step p b { color: var(--text-2); font-weight: 600; }
.vf-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vf-card { padding: 30px 28px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(47, 107, 255, .08), rgba(10, 15, 27, .75) 55%); }
.vf-safe { border-color: rgba(71, 230, 161, .22); background: linear-gradient(160deg, rgba(71, 230, 161, .07), rgba(10, 15, 27, .75) 55%); }
.vf-card .eyebrow { margin-bottom: 10px; }
.vf-safe .eyebrow { color: var(--green); }
.vf-list { margin-top: 18px; }
.vf-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.vf-list li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(79, 141, 255, .12); color: var(--ice); font-size: 19px; }
.vf-safe .vf-list li > span { background: rgba(71, 230, 161, .12); color: var(--green); }
.vf-list b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--text); }
.vf-list a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; }
.vf-small { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--dim); }
.vf-small b { color: var(--muted); font-weight: 600; }

/* Russian */
.vf-ru { max-width: 760px; border-radius: 18px; border: 1px solid var(--line); background: rgba(10, 15, 27, .6); }
.vf-ru summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; font: 600 15px var(--font); }
.vf-ru summary::-webkit-details-marker { display: none; }
.vf-ru summary .ico { font-size: 16px; color: var(--muted); transform: rotate(135deg); transition: transform .4s var(--ease); }
.vf-ru[open] summary .ico { transform: rotate(-45deg); }
.vf-ru div { display: grid; gap: 10px; padding: 0 20px 20px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.vf-ru ol { display: grid; gap: 4px; padding-left: 20px; list-style: decimal; color: var(--muted); }

.vf-footer { margin-top: 110px; }
.vf-footer .footer-bottom a { color: var(--text-2); transition: color .2s; }
.vf-footer .footer-bottom a:hover { color: #fff; }

@media (max-width: 1020px) {
  .vf-hero { grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .vf-art { order: -1; margin-bottom: 22px; }
  .vf-emblem { width: min(300px, 70vw); }
  .vf-title { font-size: clamp(60px, 13vw, 110px); }
  .vf-steps, .vf-duo { grid-template-columns: 1fr; }
  .vf-section { padding-top: 70px; }
}
@media (max-width: 680px) {
  .vf { padding-top: calc(var(--header-h) + 20px); }
  .vf-back span { display: none; }
  .vf-back { width: 44px; padding: 0; justify-content: center; }
  .vf-actions .btn { width: 100%; justify-content: space-between; }
  .vf-card { padding: 24px 20px; }
  .vf-footer .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
}