:root {
    --gold: #D4A017;
    --gold2: #f0c040;
    --dark: #0a0a0f;
    --dark2: #111118;
    --dark3: #1a1a24;
    --white: #f0f0f0;
    --silver: #aaa;
    --green: #2ecc71;
    --red: #e74c3c;
    --blue: #3498db;
  }

 { margin: 0; padding: 0; box-sizing: border-box; }

body {
font-family: ‘Inter’, sans-serif;
background: var(–dark);
color: var(–white);
min-height: 100vh;
}

/* LOGIN */
#login-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center, #1a1a2e 0%, var(–dark) 70%);
}

.login-box {
background: var(–dark2);
border: 1px solid rgba(212,160,23,0.3);
border-radius: 12px;
padding: 48px 40px;
width: 360px;
text-align: center;
}

.login-box h1 {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 2.5rem;
color: var(–gold);
letter-spacing: 3px;
margin-bottom: 8px;
}

.login-box p { color: var(–silver); font-size: 0.85rem; margin-bottom: 32px; }

.login-box input {
width: 100%;
padding: 14px 16px;
background: var(–dark3);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: var(–white);
font-size: 1rem;
margin-bottom: 16px;
outline: none;
transition: border 0.2s;
}

.login-box input:focus { border-color: var(–gold); }

.login-box button {
width: 100%;
padding: 14px;
background: var(–gold);
color: #000;
border: none;
border-radius: 8px;
font-family: ‘Rajdhani’, sans-serif;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 2px;
cursor: pointer;
transition: background 0.2s;
}

.login-box button:hover { background: var(–gold2); }
.login-error { color: var(–red); font-size: 0.85rem; margin-top: 12px; display: none; }

/* DASHBOARD */
#dashboard { display: none; }

.topbar {
background: var(–dark2);
border-bottom: 1px solid rgba(212,160,23,0.2);
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}

.topbar-logo {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.6rem;
color: var(–gold);
letter-spacing: 3px;
}

.topbar-logo span { color: var(–silver); font-size: 0.75rem; font-family: ‘Inter’, sans-serif; letter-spacing: 1px; display: block; }

.topbar-right { display: flex; gap: 12px; align-items: center; }

.btn {
padding: 8px 18px;
border-radius: 6px;
border: none;
font-family: ‘Rajdhani’, sans-serif;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s;
}

.btn-gold { background: var(–gold); color: #000; }
.btn-gold:hover { background: var(–gold2); }
.btn-outline { background: transparent; color: var(–silver); border: 1px solid rgba(255,255,255,0.15); }
.btn-outline:hover { border-color: var(–gold); color: var(–gold); }
.btn-green { background: var(–green); color: #000; }
.btn-red { background: var(–red); color: #fff; }
.btn-blue { background: var(–blue); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 0.8rem; }

.main { padding: 32px; max-width: 1400px; margin: 0 auto; }

/* STATS */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}

.stat-card {
background: var(–dark2);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: 20px 24px;
}

.stat-card .label { color: var(–silver); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.stat-card .value { font-family: ‘Bebas Neue’, sans-serif; font-size: 2.2rem; color: var(–gold); letter-spacing: 1px; }

/* TABS */
.tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }

.tab {
padding: 10px 24px;
background: transparent;
border: none;
color: var(–silver);
font-family: ‘Rajdhani’, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
margin-bottom: -1px;
}

.tab.active { color: var(–gold); border-bottom-color: var(–gold); }
.tab:hover { color: var(–white); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* BOOKINGS */
.booking-filters {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}

.filter-btn {
padding: 6px 16px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.12);
background: transparent;
color: var(–silver);
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
}

.filter-btn.active { background: var(–gold); color: #000; border-color: var(–gold); font-weight: 600; }

.bookings-list { display: flex; flex-direction: column; gap: 12px; }

.booking-card {
background: var(–dark2);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: 20px 24px;
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
align-items: center;
gap: 16px;
transition: border 0.2s;
}

.booking-card:hover { border-color: rgba(212,160,23,0.3); }
.booking-card.pending { border-left: 3px solid var(–gold); }
.booking-card.confirmed { border-left: 3px solid var(–green); }
.booking-card.denied { border-left: 3px solid var(–red); opacity: 0.6; }

.booking-name { font-family: ‘Rajdhani’, sans-serif; font-size: 1.1rem; font-weight: 700; }
.booking-detail { color: var(–silver); font-size: 0.82rem; margin-top: 2px; }
.booking-service { color: var(–gold); font-size: 0.85rem; font-weight: 500; }
.booking-time { font-size: 0.82rem; color: var(–silver); }

.status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}

.status-pending { background: rgba(212,160,23,0.15); color: var(–gold); }
.status-confirmed { background: rgba(46,204,113,0.15); color: var(–green); }
.status-denied { background: rgba(231,76,60,0.15); color: var(–red); }

.booking-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* TIMESLOTS */
.slots-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
margin-top: 20px;
}

.slot-card {
background: var(–dark2);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}

.slot-card.available { border-left: 3px solid var(–green); }
.slot-card.unavailable { border-left: 3px solid var(–red); opacity: 0.5; }

.slot-time { font-family: ‘Rajdhani’, sans-serif; font-size: 1rem; font-weight: 600; }
.slot-date { color: var(–silver); font-size: 0.78rem; margin-top: 2px; }

.add-slot-form {
background: var(–dark2);
border: 1px solid rgba(212,160,23,0.2);
border-radius: 10px;
padding: 24px;
margin-bottom: 24px;
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
align-items: end;
}

.form-group label {
display: block;
color: var(–silver);
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
}

.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 10px 14px;
background: var(–dark3);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 7px;
color: var(–white);
font-size: 0.9rem;
outline: none;
transition: border 0.2s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(–gold);
}

/* MODAL */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
z-index: 1000;
align-items: center;
justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal {
background: var(–dark2);
border: 1px solid rgba(212,160,23,0.3);
border-radius: 12px;
padding: 32px;
width: 500px;
max-width: 95vw;
}

.modal h3 {
font-family: ‘Rajdhani’, sans-serif;
font-size: 1.4rem;
color: var(–gold);
margin-bottom: 20px;
}

.modal textarea {
width: 100%;
padding: 12px 14px;
background: var(–dark3);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 7px;
color: var(–white);
font-size: 0.9rem;
outline: none;
resize: vertical;
min-height: 120px;
margin-bottom: 16px;
}

.modal textarea:focus { border-color: var(–gold); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.empty-state {
text-align: center;
padding: 60px 20px;
color: var(–silver);
}

.empty-state .icon { font-size: 3rem; margin-bottom: 12px; }

/* AVAILABILITY TOGGLE */
.availability-banner {
background: var(–dark2);
border: 1px solid rgba(212,160,23,0.2);
border-radius: 10px;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}

.availability-banner .info h4 {
font-family: ‘Rajdhani’, sans-serif;
font-size: 1.1rem;
font-weight: 700;
}

.availability-banner .info p { color: var(–silver); font-size: 0.82rem; margin-top: 4px; }

.toggle-switch {
position: relative;
width: 56px;
height: 28px;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
position: absolute;
inset: 0;
background: var(–red);
border-radius: 28px;
cursor: pointer;
transition: background 0.3s;
}

.toggle-slider:before {
content: ‘’;
position: absolute;
width: 20px;
height: 20px;
left: 4px;
top: 4px;
background: white;
border-radius: 50%;
transition: transform 0.3s;
}

.toggle-switch input:checked + .toggle-slider { background: var(–green); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(28px); }

@media (max-width: 768px) {
.stats-row { grid-template-columns: repeat(2, 1fr); }
.booking-card { grid-template-columns: 1fr; }
.add-slot-form { grid-template-columns: 1fr; }
.main { padding: 16px; }
}