@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');
:root {
  --primary: #eab308;
  --primary-hover: #ca8a04;
  --primary-light: #fef08a;
  --bg-light: #fefce8;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: var(--bg-light); color: #1e293b; display:flex; flex-direction:column; min-height:100vh; }
.navbar { padding: 1.5rem 2rem; display:flex; justify-content:space-between; align-items:center; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.brand { font-weight: 800; font-size: 1.5rem; color: var(--primary); text-decoration:none; }
.main-container { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 2rem; text-align:center; }
.hero-title { font-size: 3rem; font-weight:800; margin-bottom: 1rem; color:#334155; }
.shortener-box { background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05); max-width: 600px; width:100%; border-top: 6px solid var(--primary); }
.input-group { display:flex; gap:1rem; margin-top:1.5rem; }
.input-group input { flex:1; padding:1rem 1.5rem; border:2px solid var(--primary-light); border-radius:12px; font-size:1.1rem; outline:none; transition:border 0.3s; }
.input-group input:focus { border-color:var(--primary); }
.btn { background: var(--primary); color: white; border: none; padding: 1rem 2rem; border-radius: 12px; font-weight: 600; font-size: 1.1rem; cursor: pointer; transition: transform 0.1s, background 0.3s; text-decoration:none; display:inline-block; text-align:center; }
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: scale(0.95); }
.result-box { margin-top:2rem; padding:1.5rem; background:var(--bg-light); border:2px dashed var(--primary); border-radius:12px; font-size:1.2rem; font-weight:bold; }
.result-box a { color: var(--primary-hover); text-decoration:none; }
/* Admin styles */
.admin-wrap { max-width:1000px; margin:3rem auto; width:100%; padding:0 1rem; }
.stat-card { background:#fff; padding:1.5rem; border-radius:16px; border-left:5px solid var(--primary); box-shadow:0 4px 6px rgba(0,0,0,0.05); }
table { width:100%; border-collapse: collapse; margin-top:2rem; background:#fff; box-shadow:0 4px 6px rgba(0,0,0,0.05); border-radius:12px; overflow:hidden; }
th, td { padding: 1rem; text-align:left; border-bottom:1px solid #f1f5f9; }
th { background:#f8fafc; font-weight:600; color:#475569; }
.clicks-badge { background:#1e293b; color:white; padding:4px 12px; border-radius:20px; font-size:0.85rem; font-weight:bold; }

/* ========================================= */
/* 📱 Mobile Responsiveness (Auto-Generated) */
/* ========================================= */
@media (max-width: 768px) {
    /* Global Containers */
    .container, .main-container, .board-container, .admin-container, .admin-wrap { padding: 1rem !important; }
    
    /* Hero & Headers */
    .hero { padding: 3rem 1rem !important; margin-bottom: -20px !important; border-radius: 0 0 20px 20px !important; }
    .hero h1, .hero-title, .event-title, .form-card h1, .contact-card h1 { font-size: 2rem !important; }
    
    /* Layouts & Grids */
    .admin-dashboard, .admin-layout, div[style*='grid-template-columns'] { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; gap: 1.5rem !important; }
    .product-grid { grid-template-columns: 1fr !important; }
    
    /* Cards & Boxes */
    .booking-card, .ticket-card, .form-card, .contact-card, .admin-login, .shortener-box, .suggest-box, .req-item, .admin-panel, .card { width: 100% !important; max-width: 100% !important; padding: 1.5rem !important; flex-direction: column !important; align-items: stretch !important; box-sizing: border-box !important; }
    
    /* Sidebar */
    .sidebar { width: 100% !important; height: auto !important; padding: 1.5rem !important; }
    
    /* Tables */
    .data-table, .roster-table, table { display: block !important; width: 100% !important; overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch; }
    
    /* Navigations */
    .navbar, .header, .admin-header, .admin-nav { flex-direction: column !important; text-align: center !important; gap: 1rem !important; padding: 1rem !important; }
    
    /* Form Elements & Buttons */
    .btn, button, input, select, textarea { width: 100% !important; font-size: 1rem !important; box-sizing: border-box !important; }
    .input-group, .suggest-box { flex-direction: column !important; gap: 1rem !important; }
    
    /* Specific Fixes */
    .vote-box { width: 100% !important; padding: 0.5rem !important; flex-direction: row !important; justify-content: center !important; gap: 0.5rem !important; }
    .vote-count { margin-top: 0 !important; }
}