:root {
    --codex-bg: #050914;
    --codex-panel: #0a1425;
    --codex-line: rgba(153, 190, 229, .2);
    --codex-text: #f4f7fc;
    --codex-muted: #99a9bf;
    --codex-mint: #75f2dc;
    --codex-blue: #65a7ff;
}
* { box-sizing: border-box; }
.codex-body {
    min-height: 100vh;
    margin: 0;
    color: var(--codex-text);
    background-color: var(--codex-bg);
    background-image: linear-gradient(rgba(5, 9, 20, .68), rgba(5, 9, 20, .82)), var(--site-bg-image, url('../images/bg.jpg'));
    background-position: center top, center top;
    background-size: cover, cover;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    font-family: 'Poppins', sans-serif;
}
.codex-nav {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
    align-items: center;
    gap: 24px;
    padding: 12px 30px;
    border-bottom: 1px solid var(--codex-line);
    background: rgba(3, 7, 17, .94);
    position: sticky;
    top: 0;
    z-index: 20;
}
.codex-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font-size: .86rem; }
.codex-brand span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(117,242,220,.55); border-radius: 6px; color: var(--codex-mint); background: rgba(117,242,220,.1); }
.codex-nav-links { display: flex; align-items: center; gap: 28px; }
.codex-nav-links a { color: #aebbd0; text-decoration: none; font-size: .78rem; font-weight: 700; }
.codex-nav-links a:hover, .codex-nav-links a.active { color: #fff; }
.codex-languages { display: flex; justify-content: flex-end; gap: 6px; }
.codex-languages a { padding: 7px 8px; border: 1px solid transparent; border-radius: 5px; color: var(--codex-muted); text-decoration: none; font-size: .68rem; font-weight: 800; }
.codex-languages a.active { color: var(--codex-mint); border-color: rgba(117,242,220,.35); background: rgba(117,242,220,.08); }
.codex-main { width: min(1420px, calc(100% - 40px)); margin: 0 auto; padding: 58px 0 80px; }
.codex-hero { max-width: 780px; margin-bottom: 30px; }
.codex-eyebrow { color: var(--codex-mint); font-size: .72rem; font-weight: 900; }
.codex-hero h1, .codex-detail h1 { margin: 8px 0 10px; color: #fff; font-family: 'Cinzel', serif; font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: 0; }
.codex-hero p { color: var(--codex-muted); }
.codex-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(150px, 200px)); gap: 12px; margin-bottom: 22px; }
.codex-toolbar label { display: flex; flex-direction: column; gap: 6px; color: var(--codex-muted); font-size: .7rem; font-weight: 700; }
.codex-toolbar input, .codex-toolbar select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--codex-line); border-radius: 6px; outline: none; background: rgba(8, 16, 32, .94); color: #fff; }
.codex-toolbar input:focus, .codex-toolbar select:focus { border-color: var(--codex-mint); box-shadow: 0 0 0 3px rgba(117,242,220,.08); }
.codex-search { justify-content: flex-end; }
.codex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 10px; min-height: 280px; }
.codex-item { min-width: 0; min-height: 82px; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--codex-line); border-left: 3px solid var(--quality, var(--codex-blue)); border-radius: 6px; color: #fff; text-decoration: none; background: rgba(8, 16, 32, .9); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.codex-item:hover { transform: translateY(-2px); border-color: var(--quality, var(--codex-blue)); background: #0d1a2d; }
.codex-item img { width: 50px; height: 50px; object-fit: contain; border-radius: 5px; background: #050a13; }
.codex-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.codex-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }
.codex-item-copy span { color: var(--codex-muted); font-size: .68rem; }
.codex-item > b { color: var(--codex-mint); font-size: .68rem; white-space: nowrap; }
.quality-1 { --quality: #929aa5; }.quality-2 { --quality: #46d379; }.quality-3 { --quality: #4f9cff; }.quality-4 { --quality: #ff9f43; }.quality-5 { --quality: #f5d547; }.quality-6 { --quality: #bd75ff; }.quality-7 { --quality: #ff5964; }.quality-special { --quality: #75f2dc; }
.codex-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 26px; }
.codex-pagination a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--codex-line); border-radius: 6px; color: #fff; text-decoration: none; background: var(--codex-panel); }
.codex-pagination a.disabled { opacity: .35; pointer-events: none; }
.codex-pagination span { color: var(--codex-muted); font-size: .78rem; }
.codex-empty { grid-column: 1 / -1; padding: 70px 20px; border-top: 1px solid var(--codex-line); color: var(--codex-muted); text-align: center; }
.codex-back { display: inline-block; margin-bottom: 22px; color: var(--codex-mint); text-decoration: none; font-size: .78rem; font-weight: 700; }
.codex-detail { border-top: 3px solid var(--quality); }
.codex-detail-header { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--codex-line); }
.codex-detail-header img { width: 104px; height: 104px; object-fit: contain; border: 1px solid var(--codex-line); border-radius: 7px; background: rgba(3, 8, 17, .8); }
.codex-detail h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
.codex-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.codex-badges span { padding: 6px 9px; border: 1px solid var(--codex-line); border-radius: 4px; color: var(--codex-muted); font-size: .68rem; }
.codex-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 34px 0; }
.codex-detail h2 { margin: 0 0 16px; color: #fff; font-size: 1rem; }
.codex-stat-list { margin: 0; border-top: 1px solid var(--codex-line); }
.codex-stat-list div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--codex-line); }
.codex-stat-list dt { color: var(--codex-muted); }.codex-stat-list dd { margin: 0; color: #fff; font-weight: 700; }
.codex-description { padding: 28px 0; border-top: 1px solid var(--codex-line); }
.codex-description p { max-width: 900px; color: #c1ccdb; line-height: 1.75; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 980px) {
    .codex-nav { grid-template-columns: 1fr auto; }
    .codex-nav-links { order: 3; grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; padding: 6px 0; }
    .codex-toolbar { grid-template-columns: 1fr 1fr; }
    .codex-search { grid-column: 1 / -1; }
    .codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .codex-nav { padding: 10px 14px; gap: 10px; }
    .codex-brand strong { display: none; }
    .codex-languages a { padding: 6px; }
    .codex-nav-links { gap: 18px; }
    .codex-main { width: min(100% - 24px, 1420px); padding-top: 36px; }
    .codex-hero h1 { font-size: 2.35rem; }
    .codex-toolbar { grid-template-columns: 1fr; }
    .codex-search { grid-column: auto; }
    .codex-grid { grid-template-columns: 1fr; }
    .codex-detail-header { grid-template-columns: 74px minmax(0, 1fr); gap: 15px; }
    .codex-detail-header img { width: 70px; height: 70px; }
    .codex-detail h1 { font-size: 1.65rem; overflow-wrap: anywhere; }
    .codex-detail-columns { grid-template-columns: 1fr; gap: 30px; }
}