:root {
    --blue: #1768e5 !important;
    --blue-dark: #0b3474 !important;
    --ink: #182133 !important;
    --muted: #687386 !important;
    --line: #dfe6ef !important;
    --soft: #edf5ff !important;
    --page: #f5f7fa !important;
    --white: #fff !important;
    --danger: #b42318 !important;
}

html { color-scheme: light; }
body { min-width: 280px; line-height: 1.45; }
button, input, textarea, select { letter-spacing: 0; }
button, .btn, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

.header {
    backdrop-filter: blur(14px);
    box-shadow: 0 5px 20px rgba(20, 35, 60, .05);
}

.logo, .brand-mark {
    background: linear-gradient(145deg, #2378ed, #0f54bd) !important;
    box-shadow: 0 7px 16px rgba(23, 104, 229, .22);
}

.logo.has-image,
.brand-mark.has-image {
    overflow: hidden;
    padding: 0 !important;
    color: transparent !important;
    background: #fff !important;
    border: 1px solid var(--line);
}

.logo.has-image img,
.brand-mark.has-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.panel, .hero-card, .table-card {
    box-shadow: 0 10px 30px rgba(22, 35, 58, .045);
}

.btn, .nav-link, .nav-links > a {
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

.btn:hover, .nav-link:hover, .nav-links > a:hover {
    transform: translateY(-1px);
    border-color: #a9c7f3;
}

.btn-primary:hover, .primary:hover {
    color: #fff;
    background: var(--blue-dark) !important;
}

.btn-danger:hover {
    color: #fff !important;
    border-color: var(--danger) !important;
    background: var(--danger) !important;
}

input, textarea, select {
    min-width: 0;
    max-width: 100%;
}

textarea {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.details-box, .card-details, .gallery-body p {
    scrollbar-width: thin;
    scrollbar-color: #a9bdd8 transparent;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    place-items: center;
    background: rgba(247, 249, 252, .78);
    backdrop-filter: blur(3px);
}

.loading-overlay.is-visible { display: grid; }
.loading-indicator {
    display: grid;
    justify-items: center;
    gap: 11px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--blue-dark);
    background: #fff;
    box-shadow: 0 16px 44px rgba(20, 35, 60, .13);
    font-weight: 900;
}

.loading-spinner {
    width: 34px;
    height: 34px;
    border: 4px solid #dce9fb;
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: admin-spin .7s linear infinite;
}

@keyframes admin-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .header .nav { position: relative; }
    .nav-links, .menu {
        overscroll-behavior: contain;
    }
    .nav-links .logout-form,
    .menu .logout-form,
    .nav-actions .logout-form {
        display: block;
        width: 100%;
    }
    .nav-links .logout-form button,
    .menu .logout-form button,
    .nav-actions .logout-form button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
    }
    .btn { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
.logout-form { display: inline-flex; margin: 0; }
.logout-form button {
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid #f4c7c3;
    border-radius: 8px;
    color: #fff;
    background: #d92d20;
    box-shadow: 0 10px 22px rgba(217, 45, 32, .16);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}
.logout-form button:hover {
    border-color: #b42318;
    background: #b42318;
}