* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Orbitron', sans-serif; }

html, body {
overflow-x: hidden;
}

body {
font-family: 'Orbitron', sans-serif;
background-color: #0a0a0a;
color: #fff;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: url('../bg.png') center/cover no-repeat;
opacity: 0.2;
pointer-events: none;
z-index: -1;
}

/* ===== HEADER ===== */
.header {
position: relative;
height: 220px;
overflow: hidden;
background: #000;
}
.header img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.header-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(148,0,211,0.15) 0%, rgba(0,0,0,0.6) 100%);
}

/* ===== NAV BAR ===== */
.nav-bar {
position: relative;
background: rgba(17,17,17,0.15);
display: flex;
justify-content: center;
padding: 6px;
gap: 6px;
}
.nav-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #9400D3 50%, transparent 100%);
}
.nav-bar::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #9400D3 50%, transparent 100%);
}
.nav-item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #ddd;
padding: 14px 24px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
flex: 1;
max-width: 220px;
text-decoration: none;
position: relative;
background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
border: 1px solid #2a2a4a;
border-radius: 6px;
box-shadow:
0 4px 0 #0a0a14,
0 5px 10px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.05);
transform: translateY(0);
transition: all 0.15s ease;
}
.nav-item::before {
content: '';
position: absolute;
inset: 0;
border-radius: 6px;
background: linear-gradient(180deg, rgba(148,0,211,0.15) 0%, rgba(148,0,211,0.02) 50%, transparent 100%);
pointer-events: none;
}
.nav-item:hover {
background: linear-gradient(180deg, #2a1a4a 0%, #1a0f2e 100%);
border-color: #9400D3;
color: #fff;
box-shadow:
0 4px 0 #1a0f2e,
0 0 20px rgba(148,0,211,0.3),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.nav-item:active {
transform: translateY(4px);
box-shadow:
0 0 0 #0a0a14,
0 0 10px rgba(148,0,211,0.2),
inset 0 2px 4px rgba(0,0,0,0.3);
}
.nav-item.active {
background: linear-gradient(180deg, #3a1a5a 0%, #1a0f2e 100%);
border-color: #9400D3;
color: #fff;
box-shadow:
0 4px 0 #1a0f2e,
0 0 25px rgba(148,0,211,0.4),
inset 0 1px 0 rgba(255,255,255,0.15);
}
.nav-item.active::after {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 2px;
background: #9400D3;
border-radius: 2px;
box-shadow: 0 0 8px #9400D3;
}
.nav-item svg {
width: 20px;
height: 20px;
fill: #BA55D3;
filter: drop-shadow(0 0 3px rgba(186,85,211,0.5));
transition: all 0.2s;
}
.nav-item:hover svg, .nav-item.active svg {
fill: #fff;
filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
}

/* ===== MAIN LAYOUT ===== */
.main {
display: flex;
flex: 1;
overflow: hidden;
position: relative;
}


/* ===== SIDEBAR ===== */
.sidebar {
width: 260px;
background: rgba(10,10,10,0.95);
border-right: 1px solid #9400D3;
position: relative;
z-index: 1;
overflow-y: auto;
height: 100%;
flex-shrink: 0;
}
.sidebar-header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px;
color: #9400D3;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid #1a1a1a;
cursor: pointer;
}
.sidebar-header svg {
width: 18px;
height: 18px;
fill: #9400D3;
}
.sidebar-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
color: #aaa;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
border-bottom: 1px solid #1a1a1a;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
position: relative;
overflow: hidden;
}
.sidebar-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #9400D3, #BA55D3, #9400D3);
opacity: 0;
transition: opacity 0.3s;
}
.sidebar-item:hover, .sidebar-item.active {
background: linear-gradient(90deg, rgba(148,0,211,0.25) 0%, rgba(186,85,211,0.15) 50%, transparent 100%);
color: #fff;
transform: translateX(4px);
box-shadow: 4px 0 15px rgba(148,0,211,0.3), inset 0 0 20px rgba(148,0,211,0.1);
border-bottom: 1px solid rgba(148,0,211,0.3);
}
.sidebar-item:hover::before, .sidebar-item.active::before {
opacity: 1;
}
.sidebar-item.active {
border-left: 3px solid #BA55D3;
background: linear-gradient(90deg, rgba(148,0,211,0.35) 0%, rgba(186,85,211,0.2) 60%, transparent 100%);
box-shadow: 4px 0 20px rgba(148,0,211,0.4), inset 0 0 25px rgba(148,0,211,0.15);
}
.sidebar-item svg {
width: 16px;
height: 16px;
fill: #9400D3;
transition: all 0.3s;
}
.sidebar-item:hover svg, .sidebar-item.active svg {
fill: #fff;
filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
transform: scale(1.15);
}

/* ===== CUSTOM SCROLLBAR ===== */
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(148,0,211,0.6), rgba(186,85,211,0.4));
border-radius: 3px;
border: 1px solid #0a0a0a;
transition: all 0.3s;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #9400D3, #BA55D3);
box-shadow: 0 0 12px rgba(148,0,211,0.6);
}

.content::-webkit-scrollbar {
width: 6px;
}
.content::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
.content::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(148,0,211,0.6), rgba(186,85,211,0.4));
border-radius: 3px;
border: 1px solid #0a0a0a;
transition: all 0.3s;
}
.content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #9400D3, #BA55D3);
box-shadow: 0 0 12px rgba(148,0,211,0.6);
}

/* ===== HORIZONTAL SCROLLBAR ===== */
::-webkit-scrollbar {
height: 4px;
}

::-webkit-scrollbar-track:horizontal {
background: transparent;
border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(90deg, rgba(148,0,211,0.6), rgba(186,85,211,0.4));
border-radius: 3px;
transition: all 0.3s;
}

::-webkit-scrollbar-thumb:horizontal:hover {
background: linear-gradient(90deg, #9400D3, #BA55D3);
box-shadow: 0 0 12px rgba(148,0,211,0.6);
}

/* ===== CONTENT ===== */
.content {
flex: 1;
padding: 30px 40px;
position: relative;
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
max-width: 100%;
word-wrap: break-word;
}
.content-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 25px;
}
.content-header svg {
width: 32px;
height: 32px;
fill: #9400D3;
}
.content-title {
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
}
.content-subtitle {
color: #9400D3;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
}
.content-text {
color: #bbb;
font-size: 13px;
line-height: 1.7;
margin-bottom: 25px;
max-width: 700px;
}
.content-text strong {
color: #fff;
font-weight: 700;
}

/* ===== RULE LIST ===== */
.rule-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.rule-item {
display: flex;
gap: 18px;
align-items: flex-start;
padding-bottom: 16px;
border-bottom: 1px solid #1a1a1a;
}
.rule-num {
width: 36px;
height: 36px;
background: #9400D3;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 900;
border-radius: 4px;
flex-shrink: 0;
}
.rule-body h3 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 6px;
color: #fff;
}
.rule-body p {
font-size: 12px;
color: #999;
line-height: 1.6;
}
.rule-body ul {
margin-top: 8px;
padding-left: 18px;
}
.rule-body ul li {
font-size: 12px;
color: #aaa;
line-height: 1.8;
margin-bottom: 4px;
}

/* ===== TERM SECTIONS ===== */
.term-section {
margin-bottom: 25px;
}
.term-section h3 {
font-size: 15px;
font-weight: 700;
color: #9400D3;
text-transform: uppercase;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.term-section h3 .icon {
font-size: 20px;
}
.term-section p {
font-size: 13px;
color: #bbb;
line-height: 1.8;
margin-bottom: 10px;
}
.term-section ul {
padding-left: 20px;
margin-top: 8px;
}
.term-section ul li {
font-size: 13px;
color: #aaa;
line-height: 1.8;
margin-bottom: 6px;
}

/* ===== WARNING BOX ===== */
.warning-box {
display: flex;
align-items: flex-start;
gap: 14px;
background: rgba(148,0,211,0.1);
border: 1px solid #9400D3;
border-radius: 8px;
padding: 16px 20px;
margin-top: 20px;
}
.warning-box svg {
width: 28px;
height: 28px;
fill: #9400D3;
flex-shrink: 0;
margin-top: 2px;
}
.warning-box p {
font-size: 12px;
color: #ccc;
line-height: 1.6;
}

/* ===== FOOTER ===== */
.footer {
position: relative;
background: #050505;
border-top: 1px solid #1a1a1a;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
z-index: 1;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
inset: 0;
background: url('../footer-bg.png') center/cover no-repeat;
opacity: 0.25;
pointer-events: none;
z-index: -1;
}
.footer-brand img {
width: 180px;
height: auto;
margin-bottom: 10px;
}
.footer-brand p {
font-size: 11px;
color: #666;
line-height: 1.6;
}
.footer-section h4 {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: #9400D3;
margin-bottom: 14px;
letter-spacing: 1px;
}
.footer-section a, .footer-section p {
display: block;
font-size: 11px;
color: #888;
text-decoration: none;
margin-bottom: 8px;
transition: color 0.2s;
}
.footer-section a:hover {
color: #BA55D3;
}
.footer-socials {
display: flex;
gap: 12px;
}
.footer-socials a {
width: 32px;
height: 32px;
background: #1a1a1a;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.footer-socials a:hover {
background: #9400D3;
}
.footer-socials svg {
width: 16px;
height: 16px;
fill: #888;
}
.footer-socials a:hover svg {
fill: #fff;
}
.footer-copy {
text-align: center;
padding: 15px;
font-size: 10px;
color: #444;
background: #050505;
border-top: 1px solid #111;
}

/* ===== CHAPTER / CONTENT SECTIONS ===== */
.chapter {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(148,0,211,0.2);
}
.chapter:last-of-type {
border-bottom: none;
}
.chapter-title {
font-size: 15px;
font-weight: 700;
color: #9400D3;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(148,0,211,0.3);
}
.chapter-subtitle {
font-size: 13px;
font-weight: 700;
color: #BA55D3;
text-transform: uppercase;
margin-top: 15px;
margin-bottom: 8px;
}
.chapter p {
font-size: 13px;
color: #bbb;
line-height: 1.8;
margin-bottom: 10px;
}
.chapter ul {
padding-left: 20px;
margin-top: 8px;
margin-bottom: 12px;
}
.chapter ul li {
font-size: 13px;
color: #aaa;
line-height: 1.8;
margin-bottom: 6px;
}
.chapter strong {
color: #fff;
font-weight: 700;
}