/* ============================================================
   CATEGORY CODES — DEDICATED STYLESHEET (Cyber Emerald Theme)
   ============================================================ */
.codes-hero { background:linear-gradient(135deg,#0b1329 0%,#1e293b 100%); border:1px solid #334155; border-radius:18px; padding:32px 24px; margin:0 0 28px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
html.light .codes-hero, body.light-mode .codes-hero { background:linear-gradient(135deg,#ffffff 0%,#f1f5f9 100%) !important; border:1px solid #cbd5e1 !important; box-shadow:0 8px 24px rgba(0,0,0,0.06) !important; }
.codes-hero h1 { color:#f8fafc; font-size:1.8rem; font-weight:800; margin:0 0 10px; }
html.light .codes-hero h1, body.light-mode .codes-hero h1 { color:#0f172a !important; }
.codes-hero p { color:#94a3b8; font-size:1rem; margin:0; }
html.light .codes-hero p, body.light-mode .codes-hero p { color:#475569 !important; }
.codes-badge { display:inline-block; background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-size:0.75rem; font-weight:800; padding:5px 14px; border-radius:20px; letter-spacing:.08em; margin-bottom:14px; text-transform:uppercase; box-shadow:0 4px 12px rgba(16,185,129,0.3); }

.codes-table-wrap { background:#0f172a; border:1px solid #1e293b; border-radius:16px; padding:24px; margin:28px 0; box-shadow:0 8px 24px rgba(0,0,0,0.25); }
html.light .codes-table-wrap, body.light-mode .codes-table-wrap { background:#ffffff !important; border:1px solid #e2e8f0 !important; box-shadow:0 6px 20px rgba(0,0,0,0.05) !important; }
.codes-table-wrap h3 { color:#f1f5f9; font-size:1.1rem; font-weight:700; margin:0 0 18px; display:flex; align-items:center; gap:10px; }
html.light .codes-table-wrap h3, body.light-mode .codes-table-wrap h3 { color:#0f172a !important; }
.codes-table { width:100%; border-collapse:collapse; }
.codes-table th { background:#1e293b; color:#94a3b8; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; padding:12px 16px; text-align:left; font-weight:700; }
html.light .codes-table th, body.light-mode .codes-table th { background:#f8fafc !important; color:#475569 !important; border-bottom:2px solid #e2e8f0 !important; }
.codes-table td { padding:14px 16px; border-bottom:1px solid #1e293b; color:#e2e8f0; font-size:.95rem; vertical-align:middle; }
html.light .codes-table td, body.light-mode .codes-table td { border-bottom:1px solid #f1f5f9 !important; color:#1e293b !important; }

.code-pill { background:#020617; border:1px solid #3b82f6; border-radius:10px; padding:8px 16px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:0.95rem; font-weight:700; color:#38bdf8; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all .25s ease; box-shadow:0 2px 8px rgba(56,189,248,0.15); }
html.light .code-pill, body.light-mode .code-pill { background:#f0f9ff !important; border:1px solid #0284c7 !important; color:#0284c7 !important; }
.code-pill:hover { border-color:#10b981; color:#10b981; background:#0f172a; transform:translateY(-2px); box-shadow:0 6px 18px rgba(16,185,129,0.35); }
html.light .code-pill:hover, body.light-mode .code-pill:hover { background:#0284c7 !important; color:#ffffff !important; }

.code-status-active { background:rgba(16,185,129,0.15); color:#10b981; border:1px solid rgba(16,185,129,0.3); font-weight:800; font-size:.75rem; padding:4px 10px; border-radius:20px; text-transform:uppercase; }
.code-status-exp { background:rgba(239,68,68,0.15); color:#ef4444; border:1px solid rgba(239,68,68,0.3); font-weight:800; font-size:.75rem; padding:4px 10px; border-radius:20px; text-transform:uppercase; }

.codes-cta-box { background:linear-gradient(135deg,#059669 0%,#047857 100%); border-radius:16px; padding:28px 24px; text-align:center; margin:32px 0; box-shadow:0 10px 30px rgba(5,150,105,0.3); }
.codes-cta-box h3 { color:#ffffff; margin:0 0 10px; font-size:1.25rem; font-weight:800; }
.codes-cta-box p { color:#d1fae5; font-size:.95rem; margin:0 0 20px; }
.codes-cta-btn { display:inline-block; background:#ffffff; color:#047857; font-weight:800; padding:14px 36px; border-radius:50px; text-decoration:none; font-size:1.05rem; transition:all .25s ease; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
.codes-cta-btn:hover { transform:scale(1.05); background:#f8fafc; color:#065f46; box-shadow:0 8px 25px rgba(0,0,0,0.3); }

.codes-copy-toast { position:fixed; bottom:28px; right:28px; background:linear-gradient(135deg,#10b981,#059669); color:#ffffff; padding:12px 24px; border-radius:12px; font-weight:800; font-size:.95rem; z-index:99999; display:none; box-shadow:0 10px 30px rgba(16,185,129,0.4); border:1px solid #34d399; }