:root {
    --zh-primary: #007BFF;
    --zh-accent: #FF7A00;
    --zh-white: #FFFFFF;
    --zh-bg: #F4F7FB;
    --zh-border: #E5EAF1;
    --zh-text-muted: #6B7785;
    --zh-sidebar-width: 260px;
}

body {
    background-color: var(--zh-bg);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1F2937;
}

.guest-bg {
    background: linear-gradient(135deg, var(--zh-primary) 0%, #003f80 100%);
}

.guest-card {
    width: 100%;
    max-width: 440px;
    border-radius: 16px;
}

.brand-monogram {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--zh-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 28px;
}

.btn-primary {
    background-color: var(--zh-primary);
    border-color: var(--zh-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #0066d6;
    border-color: #0066d6;
}

.btn-accent {
    background-color: var(--zh-accent);
    border-color: var(--zh-accent);
    color: #fff;
}
.btn-accent:hover { background-color: #e06d00; border-color: #e06d00; color:#fff; }

.text-primary-brand { color: var(--zh-primary) !important; }
.text-accent-brand { color: var(--zh-accent) !important; }
.bg-primary-brand { background-color: var(--zh-primary) !important; }

a { color: var(--zh-primary); }

/* App shell */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--zh-sidebar-width);
    background: #0b1c2c;
    color: #cfd8e3;
    flex-shrink: 0;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    overflow-y: auto;
    z-index: 1030;
    transition: transform .25s ease;
}

.sidebar .brand {
    padding: 1.25rem 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar .brand img { height: 36px; }

.sidebar .nav-link {
    color: #cfd8e3;
    padding: .6rem 1.1rem;
    border-radius: 8px;
    margin: .15rem .6rem;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active { background: var(--zh-primary); color: #fff; }
.sidebar .nav-section-title {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6B7785;
    padding: 1rem 1.1rem .3rem;
}

.main-content {
    margin-left: var(--zh-sidebar-width);
    flex-grow: 1;
    min-width: 0;
    width: 100%;
}

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--zh-border);
    padding: .75rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.page-body { padding: 1.5rem; }

.card { border: 1px solid var(--zh-border); border-radius: 12px; }
.stat-card { border-radius: 14px; }

.table-responsive { border-radius: 8px; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
}

.avatar-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--zh-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .85rem;
}