.portal-security { --security-surface: #fff; --security-subtle: #f4f7fc; --security-text: #18304f; --security-muted: #657b96; --security-border: #dbe4f0; --security-accent: #2465d8; }
html[data-theme="dark"] .portal-security { --security-surface: #142237; --security-subtle: #1b2e47; --security-text: #edf4ff; --security-muted: #9eb3ce; --security-border: #2c415e; --security-accent: #85b5ff; }
/* This artwork belongs only to the anti-cheat directory, not shared portal pages. */
.portal-security .portal-hero {
  --security-hero-wash: linear-gradient(90deg, rgba(8, 19, 33, .99) 0%, rgba(8, 19, 33, .96) 36%, rgba(8, 19, 33, .72) 60%, rgba(8, 19, 33, .45) 100%);
  --security-hero-fade: linear-gradient(180deg, transparent 55%, #060b16 100%);
}
html[data-theme="light"] .portal-security .portal-hero {
  --security-hero-wash: linear-gradient(90deg, #f4f8fd 0%, rgba(244, 248, 253, .99) 34%, rgba(244, 248, 253, .78) 49%, rgba(244, 248, 253, .06) 72%);
  --security-hero-fade: linear-gradient(180deg, transparent 65%, #f4f8fd 100%);
}
html .portal-security .portal-hero::before {
  background: var(--security-hero-wash), url('/assets/security-anticheat-hero-20261001.jpg') right center / auto 120% no-repeat;
  background-color: #e8f3ff;
  opacity: 1;
}
html .portal-security .portal-hero::after { background: var(--security-hero-fade); }
html .portal-security .portal-hero-grid { opacity: .07; }
@media (max-width: 760px) {
  .portal-security .portal-hero { --security-hero-wash: linear-gradient(90deg, rgba(8, 19, 33, .97), rgba(8, 19, 33, .78)); }
  html[data-theme="light"] .portal-security .portal-hero { --security-hero-wash: linear-gradient(90deg, rgba(244, 248, 253, .98), rgba(244, 248, 253, .78)); }
}
.security-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.security-product-card { display: flex; min-width: 0; flex-direction: column; padding: 30px; border: 1px solid var(--security-border); border-radius: 16px; background: var(--security-surface); color: var(--security-text); text-decoration: none; transition: border-color .18s, background .18s; }
.security-product-card:hover { border-color: var(--security-accent); background: var(--security-subtle); }
.security-product-overview:focus-visible, .security-product-history:focus-visible, .security-product-download:focus-visible, .security-back:focus-visible, .security-year-filters button:focus-visible, .security-release-download:focus-visible { outline: 3px solid var(--security-accent); outline-offset: 4px; }
.security-product-overview { display: block; color: inherit; text-decoration: none; border-radius: 8px; }
.security-product-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--security-muted); font-size: 11px; letter-spacing: .1em; }
.security-product-icon { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; overflow: hidden; border: 1px solid var(--security-border); border-radius: 12px; background: var(--security-subtle); color: var(--security-accent); font-size: 25px; }
.security-product-icon img { width: 100%; height: 100%; object-fit: contain; }
.security-product-display { max-width: 460px; margin: 20px auto 0; overflow: hidden; border-radius: 10px; background: var(--security-subtle); }
.security-product-display img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: contain; }
.security-configured-overview { max-width: 720px; color: var(--security-muted); line-height: 1.9; }
.security-configured-overview .security-product-display { margin: 0 0 24px; }
.security-configured-overview .security-product-download { width: fit-content; }
.security-product-card h3 { margin: 24px 0 12px; font-size: clamp(20px, 2vw, 25px); line-height: 1.5; overflow-wrap: anywhere; }
.security-product-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 50px; margin: 0 0 24px; color: var(--security-muted); font-size: 14px; line-height: 1.8; }
.security-product-facts { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-bottom: 24px; color: var(--security-muted); font-size: 12px; }
.security-product-facts time { margin-left: 8px; color: var(--security-text); font-weight: 600; }
.security-product-purchase { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; margin: 0 0 20px; border: 1px solid var(--security-accent); border-radius: 8px; background: var(--security-accent); box-shadow: 0 4px 10px rgba(28, 74, 128, .14); color: var(--security-surface); font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .18s; }
.security-product-purchase:hover { transform: translateY(-2px); }
.security-product-purchase:focus-visible { outline: 3px solid var(--security-accent); outline-offset: 4px; }
.security-product-card.security-product-pending { border-style: dashed; background: transparent; }
.security-product-card.security-product-pending:hover { border-color: var(--security-border); background: transparent; }
.security-pending-overview { display: flex; flex: 1; min-height: 340px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--security-muted); text-align: center; }
.security-pending-overview > span { display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid var(--security-border); border-radius: 50%; font-size: 35px; }
.security-pending-overview h3, .security-pending-overview h1 { margin: 12px 0; color: var(--security-muted); }
.security-pending-overview strong { color: var(--security-text); font-size: 25px; font-weight: 500; letter-spacing: 2px; }
.security-pending-overview p { margin: 0; font-size: 13px; }
.security-history-pending { min-height: 400px; }
.security-product-enter { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--security-border); color: var(--security-accent); font-size: 14px; }
.security-product-history { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--security-accent); font-weight: 600; text-decoration: none; }
.security-product-history:hover { text-decoration: underline; text-underline-offset: 4px; }
.security-product-download { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 6px; min-width: 192px; padding: 12px 20px; border: 1px solid #2465d8; border-radius: 9px; background: #2465d8; color: #fff; text-decoration: none; transition: background .18s, color .18s; }
.security-product-download strong { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.4; }
.security-product-download small { color: inherit; opacity: .88; font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.security-product-download:hover { background: #fff; color: #2465d8; }
.security-product-download.unavailable { background: var(--security-subtle); border-color: var(--security-border); color: var(--security-muted); cursor: default; }
html[data-theme="dark"] .security-product-download:not(.unavailable) { border-color: #85b5ff; background: #85b5ff; color: #102743; }
html[data-theme="dark"] .security-product-download:not(.unavailable):hover { background: #fff; border-color: #fff; }
.security-history { padding-top: 128px; color: var(--security-text); }
.security-back { display: inline-flex; color: var(--security-muted); font-size: 14px; text-decoration: none; }
.security-back:hover { color: var(--security-accent); }
.security-history-heading { margin: 38px 0 32px; }
.security-history-heading > p { color: var(--security-accent); font-size: 11px; letter-spacing: .12em; }
.security-history-heading h1 { margin: 14px 0 16px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.4; overflow-wrap: anywhere; }
.security-history-heading > span { color: var(--security-muted); font-size: 14px; }
.security-year-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.security-year-filters button { padding: 10px 20px; border: 1px solid var(--security-border); border-radius: 8px; background: var(--security-surface); color: var(--security-muted); cursor: pointer; font: inherit; font-size: 13px; }
.security-year-filters button:hover, .security-year-filters button.active { border-color: var(--security-accent); color: var(--security-accent); background: var(--security-subtle); }
.security-year-group + .security-year-group { margin-top: 34px; }
.security-year-group > h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; font-size: 23px; }
.security-year-group > h2 > span { font-size: 12px; font-weight: 400; color: var(--security-muted); }
.security-release-list { overflow: hidden; border: 1px solid var(--security-border); border-radius: 12px; background: var(--security-surface); }
.security-release-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 144px; align-items: start; gap: 24px; padding: 26px; }
.security-release-row + .security-release-row { border-top: 1px solid var(--security-border); }
.security-release-date { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.security-release-date time { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.security-latest-label { padding: 4px 8px; border-radius: 5px; background: var(--security-subtle); color: var(--security-accent); font-size: 11px; }
.security-release-copy { min-width: 0; }
.security-release-copy h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.security-release-copy p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--security-muted); font-size: 13px; line-height: 1.9; }
.security-release-version { display: block; margin-bottom: 10px; color: var(--security-accent); font-size: 12px; }
.security-release-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.security-release-copy li { padding: 3px 7px; border: 1px solid var(--security-border); border-radius: 4px; color: var(--security-muted); font-size: 11px; }
.security-release-download { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--security-border); border-radius: 8px; background: var(--security-subtle); color: var(--security-accent); font-size: 13px; text-decoration: none; white-space: nowrap; }
.security-release-download:hover { border-color: var(--security-accent); }
.security-download-missing { padding: 11px 0; color: var(--security-muted); font-size: 13px; text-align: center; }
.security-history-empty { padding: 40px 24px; border: 1px solid var(--security-border); border-radius: 12px; background: var(--security-surface); color: var(--security-muted); text-align: center; line-height: 1.8; }
@media (max-width: 760px) {
  .security-product-grid { grid-template-columns: 1fr; gap: 16px; }
  .security-product-card { padding: 24px; }
  .security-product-enter { flex-wrap: wrap; gap: 14px; }
  .security-product-download { margin-left: auto; }
  .security-history { padding-top: 112px; }
  .security-release-row { grid-template-columns: 1fr; padding: 22px; gap: 16px; }
  .security-release-date { flex-direction: row; align-items: center; justify-content: space-between; }
  .security-release-download { justify-self: start; min-width: 150px; }
  .security-download-missing { text-align: left; }
}
@media (max-width: 440px) {
  .security-product-download { width: 100%; min-width: 0; }
}