:root { --bg:#050505; --box:#0d0d0d; --border:#1a1a1a; --text:#999; --acc:#c0392b; --acc-h:#e74c3c; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; margin: 0; }
a { color: var(--acc); text-decoration: none; transition: 0.2s; } a:hover { color: #fff; }
.header-wrap { background: #000; text-align: center; border-bottom: 2px solid var(--acc); padding: 20px; }
.nav-bar { background: #080808; border-bottom: 1px solid #151515; display: flex; justify-content: center; }
.nav-bar a { padding: 18px 30px; color: #555; font-weight: bold; text-transform: uppercase; font-size: 13px; }
.nav-bar a:hover { background: var(--acc); color: #fff; }
.container { display: flex; max-width: 1500px; margin: 30px auto; gap: 20px; padding: 0 15px; }
.mid { flex: 1; background: var(--box); padding: 40px; border: 1px solid var(--border); min-height: 700px; border-radius: 4px; }
.left, .right { width: 280px; flex-shrink: 0; }
.box { background: var(--box); border: 1px solid var(--border); margin-bottom: 25px; border-radius: 4px; overflow: hidden; }
.box h3 { background: #000; color: #fff; margin: 0; padding: 15px; font-size: 11px; text-transform: uppercase; border-bottom: 2px solid var(--acc); letter-spacing:1px; }
.box-content { padding: 15px; font-size: 13px; }
.box-content ul { list-style:none; padding:0; margin:0; }
.box-content li { border-bottom:1px solid #1a1a1a; padding:10px 0; }
.table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th { text-align: left; background: #0a0a0a; padding: 12px; color: #fff; font-size: 11px; border-bottom: 1px solid var(--acc); }
td { padding: 12px; border-bottom: 1px solid #1a1a1a; }
.btn-titan { background: var(--acc); color: #fff; border: none; padding: 12px 25px; cursor: pointer; font-weight: bold; border-radius: 2px; text-transform:uppercase; font-size:12px; }
footer { text-align: center; padding: 60px; background: #000; color: #333; border-top: 1px solid #111; font-size: 12px; }