* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Roboto, Arial, Helvetica, sans-serif; background: #1a1a1a; color: #1a1a1a; padding: 0; margin: 0; }
.tabs { background: #000000; display: flex; flex-wrap: wrap; padding: 0; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #222; border-radius: 12px; }
.tab { padding: 14px 28px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; background: transparent; border: none; border-bottom: 2px solid transparent; transition: all .2s; text-decoration: none; display: inline-block; }
.tab:hover { color: #e2e8f0; background: #1a1a1a; }
.tab.active { color: #009b51; border-bottom-color: #009b51; }
.content { padding: 32px 24px; max-width: 900px; margin: 0 auto; }
.tab .fi { margin-right: 8px; vertical-align: middle; }
.header { background: #1a1a1a; padding: 16px 0; text-align: center; border-bottom: 1px solid #222; }
.header img { height: 40px; }

@media (max-width: 768px) {
    .tabs { border-radius: 0; }
    .tab { padding: 12px 18px; font-size: 11px; letter-spacing: 0.5px; }
    .content { padding: 20px 0px; }
    .header img { height: 32px; }
}

@media (max-width: 480px) {
    .tabs { justify-content: center; }
    .tab { padding: 10px 14px; font-size: 10px; flex: 1 1 auto; text-align: center; min-width: 0; }
    .tab span.fi { display: none; }
    .content { padding: 16px 0px; }
    .header { padding: 12px 0; }
    .header img { height: 28px; }
}