/* ───── CSS Variables — Wine Dark Theme ───── */
:root {
    --color-bg: #171415;
    --color-surface: #241b1f;
    --color-surface-hover: #2e2226;
    --color-primary: #d51c72;
    --color-primary-light: #e84a90;
    --color-primary-dark: #b31d61;
    --color-secondary: #2e2226;
    --color-accent: #d51c72;
    --color-wine: #4a1028;
    --color-wine-glow: #76304a;
    --color-text: #edeaec;
    --color-text-light: #b3adb0;
    --color-text-muted: #6e6568;
    --color-border: #3a2830;
    --color-success: #5cb85c;
    --color-warning: #e8a838;
    --color-danger: #d94452;
    --color-free: #5cb85c;
    --color-mine: #e8a838;
    --color-occupied: #d94452;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 2px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
    --font-body: 'Montserrat', sans-serif;
    --font-display: 'Playfair Display', serif;
    --max-width: 1100px;
    --transition: 0.25s ease;
    --glow-primary: 0 0 24px rgba(213,28,114,0.25);
    --glow-wine: 0 0 40px rgba(118,48,74,0.3);
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--color-primary-light); }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; color: var(--color-text); }

/* ───── Navbar ───── */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}
.navbar-brand { cursor: pointer; }
.logo-text {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.5px;
}
.navbar-menu {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.navbar-menu a, .navbar-menu button {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition);
    border: none;
    background: none;
    color: var(--color-text-light);
}
.navbar-menu a:hover, .navbar-menu button:hover {
    background: var(--color-secondary);
    color: var(--color-text);
    text-decoration: none;
}
.navbar-menu .nav-active {
    background: var(--color-primary);
    color: var(--color-bg);
}

/* ───── Main Content ───── */
#main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 1.5rem;
    min-height: calc(100vh - 64px);
}

/* ───── Homepage ───── */
.hero {
    text-align: center;
    padding: 4rem 0 2.5rem;
}
.hero h1 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}
.hero h1 span, .hero-accent { color: var(--color-primary); }
.hero p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin-bottom: 2.5rem;
}
.hero-cta {
    display: inline-block;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-bg);
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    transition: all var(--transition);
    box-shadow: var(--glow-primary);
}
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(213,28,114,0.4);
    color: var(--color-bg);
    text-decoration: none;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 2.5rem 0 1.5rem;
    color: var(--color-text);
}

/* ───── Master Cards ───── */
.masters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}
.master-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid var(--color-border);
}
.master-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(213,28,114,0.25);
}
.master-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    color: var(--color-primary);
    overflow: hidden;
    border: 2px solid var(--color-border);
}
.master-avatar img { width: 100%; height: 100%; object-fit: cover; }
.master-card h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.master-card .tg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--color-primary);
}

/* ───── Buttons ───── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    transition: all var(--transition);
}
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-bg);
}
.btn-primary:hover { box-shadow: var(--glow-primary); transform: translateY(-1px); }
.btn-secondary { background: var(--color-secondary); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-surface-hover); }
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-light);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover { background: #d32f2f; }
.btn-sm { padding: 0.4rem 1rem; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ───── Cards / Panels ───── */
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.card-header h3 { font-size: 1.1rem; font-weight: 600; }

/* ───── Forms ───── */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--color-text-light);
}
.form-control {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color var(--transition);
    background: var(--color-bg);
    color: var(--color-text);
}
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(213,28,114,0.15);
}
.form-control::placeholder { color: var(--color-text-muted); }
select.form-control { appearance: auto; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ───── Wizard ───── */
.wizard { max-width: 640px; margin: 0 auto; }
.wizard-steps { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.wizard-step .step-num {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    background: var(--color-border);
    color: var(--color-text-muted);
    font-weight: 600;
}
.wizard-step.active .step-num { background: var(--color-primary); color: var(--color-bg); }
.wizard-step.active { color: var(--color-primary); }
.wizard-step.completed .step-num { background: var(--color-success); color: white; }
.wizard-step-connector { width: 24px; height: 2px; background: var(--color-border); align-self: center; }
.wizard-body { min-height: 300px; }
.wizard-footer { display: flex; justify-content: space-between; margin-top: 2rem; gap: 1rem; }

/* ───── Service List ───── */
.category-group { margin-bottom: 1.5rem; }
.category-group h3 {
    font-size: 1rem; font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.75rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.service-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; border-radius: var(--radius-sm);
    cursor: pointer; transition: background var(--transition);
    border: 1.5px solid transparent;
}
.service-option:hover { background: var(--color-surface-hover); }
.service-option.selected {
    border-color: var(--color-primary);
    background: rgba(213,28,114,0.1);
}
.service-option .service-name { font-weight: 500; }
.service-option .service-price { color: var(--color-primary); font-weight: 600; white-space: nowrap; }

/* ───── Master Select ───── */
.master-option {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem; border-radius: var(--radius);
    cursor: pointer; transition: background var(--transition);
    border: 1.5px solid transparent; margin-bottom: 0.75rem;
}
.master-option:hover { background: var(--color-surface-hover); }
.master-option.selected {
    border-color: var(--color-primary);
    background: rgba(213,28,114,0.1);
}
.master-option .mini-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--color-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--color-primary); flex-shrink: 0;
}
.master-option .master-info { flex: 1; }
.master-option .master-info h4 { font-size: 1rem; margin-bottom: 0.15rem; }
.master-option .master-price {
    color: var(--color-primary); font-weight: 600; font-size: 1.1rem; white-space: nowrap;
}

/* ───── Calendar ───── */
.calendar { user-select: none; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.calendar-header h4 { font-size: 1rem; font-weight: 600; }
.calendar-nav {
    background: none; border: 1px solid var(--color-border);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--color-text);
    transition: all var(--transition);
}
.calendar-nav:hover { border-color: var(--color-primary); color: var(--color-primary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendar-grid .dow { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; padding: 0.3rem; }
.calendar-day {
    padding: 0.5rem; border-radius: var(--radius-sm); font-size: 0.9rem;
    cursor: default; transition: all var(--transition);
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.calendar-day.available {
    cursor: pointer; font-weight: 500; color: var(--color-primary);
    background: rgba(213,28,114,0.1);
}
.calendar-day.available:hover { background: var(--color-primary); color: var(--color-bg); }
.calendar-day.selected { background: var(--color-primary); color: var(--color-bg); font-weight: 600; }
.calendar-day.empty { visibility: hidden; }
.calendar-day.disabled { color: var(--color-text-muted); }
.calendar-day.today { font-weight: 700; box-shadow: inset 0 0 0 2px var(--color-primary); }

/* ───── Time Slots ───── */
.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; margin: 1rem 0; }
.time-slot {
    padding: 0.6rem; text-align: center;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    cursor: pointer; font-size: 0.9rem; font-weight: 500;
    transition: all var(--transition); color: var(--color-text-light);
}
.time-slot:hover { border-color: var(--color-primary); color: var(--color-primary); }
.time-slot.selected { background: var(--color-primary); color: var(--color-bg); border-color: var(--color-primary); }

/* ───── Workspace Map ───── */
.studio-map {
    position: relative; background: var(--color-surface);
    border-radius: var(--radius); box-shadow: var(--shadow);
    aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--color-border);
}
.ws-item {
    position: absolute; transform: translate(-50%, -50%);
    width: 90px; text-align: center; cursor: pointer;
    transition: transform var(--transition);
}
.ws-item:hover { transform: translate(-50%, -50%) scale(1.1); }
.ws-icon {
    width: 48px; height: 48px; border-radius: 50%;
    margin: 0 auto 0.3rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; border: 3px solid;
    background: var(--color-surface); transition: all var(--transition);
}
.ws-item.free .ws-icon { border-color: var(--color-free); color: var(--color-free); }
.ws-item.mine .ws-icon { border-color: var(--color-mine); color: var(--color-mine); }
.ws-item.occupied .ws-icon { border-color: var(--color-occupied); color: var(--color-occupied); }
.ws-item .ws-label { font-size: 0.7rem; font-weight: 600; line-height: 1.2; }
.ws-item .ws-status { font-size: 0.65rem; color: var(--color-text-muted); }
.ws-legend { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; font-size: 0.85rem; }
.ws-legend span { display: flex; align-items: center; gap: 0.4rem; }
.ws-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-free { background: var(--color-free); }
.dot-mine { background: var(--color-mine); }
.dot-occupied { background: var(--color-occupied); }
.ws-item.draggable { cursor: grab; }
.ws-item.draggable:active { cursor: grabbing; }

/* ───── Booking Success ───── */
.booking-success { text-align: center; padding: 2rem; }
.booking-success .check-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--color-success); color: white; font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.booking-success h2 { font-family: var(--font-display); margin-bottom: 0.5rem; }
.booking-success .details { color: var(--color-text-light); margin-bottom: 1.5rem; }

/* ───── Tables ───── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    padding: 0.75rem 1rem; text-align: left;
    border-bottom: 1px solid var(--color-border); font-size: 0.9rem;
}
.data-table th {
    font-weight: 600; color: var(--color-text-muted);
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.data-table tr:hover { background: var(--color-surface-hover); }

/* ───── Status Badges ───── */
.badge {
    display: inline-block; padding: 0.2rem 0.6rem;
    border-radius: 20px; font-size: 0.75rem; font-weight: 600;
}
.badge-confirmed { background: rgba(92,184,92,0.15); color: #5cb85c; }
.badge-cancelled { background: rgba(217,68,82,0.15); color: #d94452; }
.badge-completed { background: rgba(213,28,114,0.12); color: var(--color-primary-light); }
.badge-active { background: rgba(92,184,92,0.15); color: #5cb85c; }
.badge-paused { background: rgba(232,168,56,0.15); color: #e8a838; }

/* ───── Stats Grid ───── */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 2rem;
}
.stat-card {
    background: var(--color-surface); border-radius: var(--radius);
    padding: 1.25rem; box-shadow: var(--shadow); text-align: center;
    border: 1px solid var(--color-border);
}
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.stat-card .stat-label { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; }

/* ───── Modal ───── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.hidden { display: none; }
.modal-content {
    background: var(--color-surface); border-radius: var(--radius);
    padding: 2rem; max-width: 500px; width: 100%;
    max-height: 90vh; overflow-y: auto; position: relative;
    box-shadow: var(--shadow-lg); border: 1px solid var(--color-border);
}
.modal-close {
    position: absolute; top: 0.75rem; right: 1rem;
    background: none; border: none; font-size: 1.5rem;
    color: var(--color-text-muted); cursor: pointer;
}
.modal-close:hover { color: var(--color-text); }

/* ───── Toast ───── */
#toast-container {
    position: fixed; top: 1rem; right: 1rem; z-index: 300;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.toast {
    padding: 0.75rem 1.25rem; border-radius: var(--radius-sm);
    font-size: 0.9rem; font-weight: 500; color: white;
    animation: toastIn 0.3s ease; box-shadow: var(--shadow-lg);
}
.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-danger); }
.toast-info { background: var(--color-primary); color: var(--color-bg); }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }

/* ───── Panel Sidebar ───── */
.panel-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; min-height: calc(100vh - 150px); }
.panel-sidebar {
    background: var(--color-surface); border-radius: var(--radius);
    padding: 1rem; box-shadow: var(--shadow); height: fit-content;
    position: sticky; top: 80px; border: 1px solid var(--color-border);
}
.panel-sidebar a {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1rem; border-radius: var(--radius-sm);
    font-size: 0.9rem; color: var(--color-text-light);
    transition: all var(--transition); font-weight: 500;
}
.panel-sidebar a:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
.panel-sidebar a.active { background: var(--color-primary); color: var(--color-bg); }
.panel-main { min-width: 0; }

/* ───── Loading ───── */
.loading { text-align: center; padding: 3rem; color: var(--color-text-muted); }
.spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───── Empty State ───── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 0.5rem; }

/* ───── Rental section ───── */
.rental-section {
    background: var(--color-surface); border-radius: var(--radius);
    padding: 2rem; box-shadow: var(--shadow); margin-top: 2rem;
    border: 1px solid var(--color-border);
}
.rental-section h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.75rem; }

/* ───── Portfolio Grid ───── */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.portfolio-item {
    position: relative; border-radius: var(--radius);
    overflow: hidden; cursor: pointer; aspect-ratio: 1;
    background: var(--color-secondary);
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid var(--color-border);
}
.portfolio-item:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
    border-color: rgba(213,28,114,0.3);
}
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: white; padding: 2rem 0.75rem 0.6rem;
    font-size: 0.8rem; font-weight: 500;
}

/* ───── Portfolio Management ───── */
.portfolio-manage-list { display: flex; flex-direction: column; gap: 0.75rem; }
.portfolio-manage-item { margin-bottom: 0; }

/* ───── Cookie Banner ───── */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 250;
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    padding: 1rem 1.5rem;
    animation: slideUp 0.4s ease;
}
.cookie-banner.hidden { display: none; }
.cookie-inner {
    max-width: var(--max-width); margin: 0 auto;
    display: flex; align-items: center; gap: 1.25rem;
    flex-wrap: wrap;
}
.cookie-inner p { flex: 1; font-size: 0.85rem; color: var(--color-text-light); min-width: 200px; margin: 0; }
.cookie-inner p a { color: var(--color-primary); }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }

/* ───── Footer ───── */
.site-footer {
    margin-top: 3rem; padding: 2rem 0; border-top: 1px solid var(--color-border);
    text-align: center; font-size: 0.8rem; color: var(--color-text-muted);
}
.site-footer a { color: var(--color-text-muted); margin: 0 0.5rem; }
.site-footer a:hover { color: var(--color-primary); text-decoration: none; }

/* ───── Legal Pages ───── */
.legal-page { max-width: 740px; margin: 0 auto; }
.legal-page h1 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 0.5rem; }
.legal-page .legal-date { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 2rem; }
.legal-page h2 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 0.75rem; color: var(--color-text); }
.legal-page p, .legal-page li { font-size: 0.92rem; color: var(--color-text-light); line-height: 1.75; margin-bottom: 0.75rem; }
.legal-page ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-page li { margin-bottom: 0.4rem; }

/* ───── Responsive ───── */
@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    .panel-layout { grid-template-columns: 1fr; }
    .panel-sidebar {
        position: static; display: flex; overflow-x: auto; gap: 0; padding: 0.5rem;
    }
    .panel-sidebar a { white-space: nowrap; padding: 0.5rem 0.75rem; font-size: 0.8rem; }
    .navbar { padding: 0.75rem 1rem; }
    .logo-text { font-size: 1.1rem; }
    .form-row { grid-template-columns: 1fr; }
    .masters-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .wizard-steps { flex-wrap: wrap; }
    .wizard-step-connector { display: none; }
    .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}