* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; } body { background-color: #121212; color: #e0e0e0; line-height: 1.6; } .site-banner { background: #1a1a1a; padding: 40px 20px; text-align: center; border-bottom: 4px solid #ffcc00; } .site-banner h1 { color: #ffcc00; font-size: 2.5rem; } .site-nav { background: #181818; display: flex; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid #333; } .site-nav a { color: #fff; padding: 15px 20px; text-decoration: none; font-weight: bold; border-bottom: 3px solid transparent; } .site-nav a:hover, .site-nav a.active { color: #ffcc00; border-bottom-color: #ffcc00; background:#222; } .container { display: grid; grid-template-columns: 280px 1fr 280px; gap: 20px; max-width: 1400px; margin: 20px auto; padding: 0 15px; } .sidebar, .content-area { background: #1e1e1e; padding: 20px; border-radius: 8px; border: 1px solid #2a2a2a; } .content-area { min-height: 500px; } .widget h3 { color: #ffcc00; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px; } .widget-list { list-style: none; } .widget-list li { background: #151515; padding: 10px; margin-bottom: 8px; border-left: 3px solid #ffcc00; border-radius: 4px; font-size: 0.9rem; } .player-box { background: #151515; padding: 10px; border-radius: 6px; } .dj-display { text-align: center; background: #151515; padding: 15px; border-radius: 6px; border: 1px solid #333; } .dj-display img { width: 100%; max-width: 150px; border-radius: 50%; border: 3px solid #ffcc00; margin-bottom: 10px; aspect-ratio: 1/1; object-fit: cover; } .dj-display h4 { color: #fff; font-size: 1.2rem; } .status-badge { display: inline-block; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; margin-top: 5px; } .status-auto { background: #17a2b8; color: #fff; } .status-live { background: #dc3545; color: #fff; } input[type='text'], input[type='password'], input[type='email'], textarea, select { width: 100%; padding: 12px; margin-bottom: 15px; background: #252525; border: 1px solid #444; color: #fff; border-radius: 4px; } .btn-pirate { background: #ffcc00; color: #121212; border: none; padding: 12px 20px; font-weight: bold; border-radius: 4px; cursor: pointer; } .btn-pirate:hover { background: #e6b800; } .alert-box { background: #222; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .prog-list { display: flex; flex-direction: column; gap: 10px; } .prog-item { display: flex; align-items: center; background: #151515; padding: 10px; border-radius: 6px; border-left: 4px solid #ffcc00; } .prog-item img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } .team-card { background: #151515; padding: 15px; border-radius: 6px; text-align: center; border-top: 3px solid #ffcc00; } .team-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; margin-bottom: 10px; } .gb-item { background: #151515; padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 3px solid #28a745; } .admin-reply { background: #222; padding: 10px; margin-top: 10px; border-radius: 4px; border-left: 3px solid #ffcc00; font-size: 0.9rem; } table { width: 100%; border-collapse: collapse; margin-bottom: 20px; background:#151515; } th, td { padding: 12px; border: 1px solid #333; text-align: left; } th { background: #222; color: #ffcc00; } .btn-action { padding: 6px 12px; font-size: 0.85rem; border:none; border-radius:4px; cursor:pointer; color:#fff; font-weight:bold; } .btn-green { background: #28a745; } .btn-red { background: #dc3545; } .btn-blue { background: #17a2b8; } .badge { padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; } .badge-orange { background: #fd7e14; color: #fff; } @media(max-width: 1000px) { .container { grid-template-columns: 1fr; } } footer { text-align: center; padding: 20px; background: #1a1a1a; margin-top: 40px; color: #777; border-top: 1px solid #333; }