/* Masihi.pk dynamic theme v1779729093 */
:root {
    --color-brand: #ef0015;
    --color-brand-dark: #b90010;
    --color-bg: #101010;
    --color-bg-soft: #181818;
    --color-card: #1f1f1f;
    --color-text: #ffffff;
    --color-muted: #b8b8b8;
    --color-border: rgba(255,255,255,0.08);
    --header-bg: #111111;
    --footer-bg: #1a1a1a;
    --admin-sidebar-bg: #111111;
    --admin-content-bg: #101010;
    --admin-topbar-bg: #181818;
    --admin-card-bg: #1f1f1f;
    --admin-active-menu-color: #ef0015;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef0015;
    --font-body: Inter, system-ui, sans-serif;
    --font-heading: Inter, system-ui, sans-serif;
    --base-font-size: 16px;
    --heading-weight: 800;
    --heading-letter-spacing: 0px;
    --button-radius: 4px;
    --card-radius: 6px;
    --section-spacing: 72px;
    --menu-animation-speed: 220ms;
    --footer-bar-bg: #111111;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--base-font-size);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-letter-spacing);
}

a {
    color: inherit;
}

.public-shell {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
}

.public-shell .bg-white,
.public-shell .bg-slate-50,
.public-shell .bg-slate-100,
.public-shell .bg-stone-50,
.public-shell section.bg-white,
.public-shell section.bg-stone-50,
.public-shell form.bg-white,
.public-shell article.bg-white,
.public-shell aside.bg-white,
.public-shell div.bg-white {
    background: var(--color-card) !important;
    color: var(--color-text) !important;
}

.public-shell .bg-slate-950 {
    background: var(--header-bg) !important;
    color: var(--color-text) !important;
}

.public-shell .text-white,
.public-shell .text-slate-950,
.public-shell .text-slate-900,
.public-shell .text-slate-800,
.public-shell .text-slate-700 {
    color: var(--color-text) !important;
}

.public-shell .text-slate-600,
.public-shell .text-slate-500,
.public-shell .text-slate-400,
.public-shell .text-slate-300,
.public-shell .text-slate-200 {
    color: var(--color-muted) !important;
}

.public-shell .text-amber-100,
.public-shell .text-amber-200,
.public-shell .text-amber-600,
.public-shell .text-amber-700,
.public-shell .text-amber-800,
.public-shell .group:hover .group-hover\:text-amber-700 {
    color: var(--color-brand) !important;
}

.public-shell .bg-amber-50,
.public-shell .bg-amber-100,
.public-shell .bg-amber-200,
.public-shell .bg-amber-300,
.public-shell .hover\:bg-amber-200:hover {
    background: var(--color-brand) !important;
    color: var(--color-text) !important;
}

.public-shell .border-slate-100,
.public-shell .border-slate-200,
.public-shell .border-slate-300,
.public-shell .border-amber-200,
.public-shell .hover\:border-amber-300:hover {
    border-color: var(--color-border) !important;
}

.public-shell .shadow-sm,
.public-shell .shadow-lg,
.public-shell .shadow-2xl {
    box-shadow: 0 16px 36px color-mix(in srgb, var(--color-bg) 32%, transparent) !important;
}

.public-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.public-shell textarea,
.public-shell select {
    border-color: var(--color-border) !important;
    background: var(--color-card) !important;
    color: var(--color-text) !important;
}

.public-shell input::placeholder,
.public-shell textarea::placeholder {
    color: color-mix(in srgb, var(--color-muted) 70%, transparent) !important;
}

.public-shell input:focus,
.public-shell textarea:focus,
.public-shell select:focus {
    border-color: var(--color-brand) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 24%, transparent) !important;
}

.public-shell .text-red-600,
.admin-shell .text-red-600,
.admin-shell .text-red-700 {
    color: var(--color-error) !important;
}

.public-shell .text-emerald-600,
.public-shell .text-emerald-700,
.admin-shell .text-emerald-600,
.admin-shell .text-emerald-700 {
    color: var(--color-success) !important;
}

.public-shell .bg-red-50,
.admin-shell .bg-red-50 {
    background: color-mix(in srgb, var(--color-error) 14%, var(--color-card)) !important;
}

.public-shell .bg-emerald-600,
.public-shell .hover\:bg-emerald-700:hover,
.admin-shell .bg-emerald-600,
.admin-shell .hover\:bg-emerald-700:hover {
    background: var(--color-success) !important;
    color: var(--color-text) !important;
}

.public-shell a.bg-slate-950,
.public-shell button.bg-slate-950,
.public-shell .hover\:bg-slate-800:hover,
.admin-shell a.bg-slate-950,
.admin-shell button.bg-slate-950,
.admin-shell .hover\:bg-slate-800:hover {
    background: var(--color-brand) !important;
    color: var(--color-text) !important;
}

.site-header {
    background: var(--header-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.site-footer {
    background: var(--footer-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.footer-bottom-bar {
    background: var(--footer-bar-bg) !important;
    border-color: var(--color-border) !important;
}

.brand-mark__symbol,
.admin-nav-icon {
    background: var(--color-brand) !important;
    color: var(--color-text) !important;
}

.nav-link,
.footer-link {
    color: var(--color-muted) !important;
}

.nav-link:hover,
.nav-link--active,
.footer-link:hover {
    color: var(--color-text) !important;
}

.nav-link:hover,
.nav-link--active {
    background: color-mix(in srgb, var(--color-brand) 18%, transparent) !important;
}

.nav-pill,
.masihi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--button-radius);
    border: 1px solid var(--color-brand) !important;
    background: var(--color-brand) !important;
    color: var(--color-text) !important;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-pill:hover,
.masihi-btn:hover {
    background: var(--color-brand-dark) !important;
    border-color: var(--color-brand-dark) !important;
    color: var(--color-text) !important;
    transform: translateY(-1px);
}

a.nav-pill,
button.nav-pill,
.public-shell a.nav-pill,
.public-shell button.nav-pill {
    color: var(--color-text) !important;
    background: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
}

a.nav-pill:hover,
button.nav-pill:hover,
.public-shell a.nav-pill:hover,
.public-shell button.nav-pill:hover {
    color: var(--color-text) !important;
    background: var(--color-brand-dark) !important;
    border-color: var(--color-brand-dark) !important;
}

.masihi-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--button-radius);
    border: 1px solid var(--color-brand);
    background: transparent;
    color: var(--color-brand);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.masihi-btn-outline:hover {
    background: var(--color-brand);
    color: var(--color-text);
    transform: translateY(-1px);
}

.masihi-card,
.video-card {
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-card);
    color: var(--color-text);
}

.masihi-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand) 18%, transparent);
    color: var(--color-brand);
    font-weight: 700;
}

.video-category-badge {
    background: var(--color-brand) !important;
    color: var(--color-text) !important;
    border: none !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-brand) 40%, transparent) !important;
}

.video-category-badge:hover {
    background: var(--color-brand-dark) !important;
    color: var(--color-text) !important;
}

.favorite-btn {
    border: 1px solid var(--color-brand) !important;
    background: transparent !important;
    color: var(--color-text) !important;
}

.favorite-btn:hover {
    background: color-mix(in srgb, var(--color-brand) 18%, transparent) !important;
    color: var(--color-text) !important;
}

.masihi-alert {
    border: 1px solid var(--color-border);
    border-radius: var(--button-radius);
    background: var(--color-card);
    color: var(--color-text);
}

.masihi-alert--success {
    border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-card));
}

.masihi-alert--error {
    border-color: color-mix(in srgb, var(--color-error) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-error) 14%, var(--color-card));
}

.masihi-alert--warning {
    border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-card));
}

.video-card {
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.video-card:hover {
    border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
    box-shadow: 0 18px 45px color-mix(in srgb, var(--color-brand) 18%, transparent);
    transform: translateY(-3px);
}

.admin-shell {
    background: var(--admin-content-bg) !important;
    color: var(--color-text);
    min-height: 100vh;
    overflow-x: hidden;
}

.admin-layout {
    background: var(--admin-content-bg) !important;
    color: var(--color-text);
    min-height: 100vh;
    overflow-x: hidden;
}

@media (min-width: 1024px) {
    .admin-layout {
        height: 100vh !important;
        min-height: unset !important;
        overflow: hidden !important;
        background: linear-gradient(
            to right,
            var(--admin-sidebar-bg) 292px,
            var(--admin-content-bg) 292px
        ) !important;
    }

    .admin-sidebar {
        height: 100vh !important;
        overflow-y: auto !important;
        position: static !important;
    }

    .admin-content {
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

.admin-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.admin-content > main {
    flex: 1;
}

.admin-sidebar {
    background: var(--admin-sidebar-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    transition: transform 220ms ease, opacity 220ms ease;
}

.admin-topbar {
    background: var(--admin-topbar-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.admin-card,
.admin-panel {
    border-color: var(--color-border) !important;
    border-radius: var(--card-radius);
    background: var(--admin-card-bg) !important;
    color: var(--color-text);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-brand) 78%, transparent), 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

.admin-nav-link--active {
    box-shadow: inset 3px 0 0 var(--admin-active-menu-color) !important;
    background: color-mix(in srgb, var(--color-brand) 18%, transparent) !important;
}

.admin-shell section.rounded-lg,
.admin-shell form.rounded-lg,
.admin-shell aside.rounded-lg {
    border-color: var(--color-border) !important;
    background: var(--admin-card-bg) !important;
    color: var(--color-text);
}

.admin-shell h1,
.admin-shell h2,
.admin-shell h3,
.admin-shell .text-slate-950,
.admin-shell .text-slate-900,
.admin-shell .text-slate-800,
.admin-shell .text-slate-700 {
    color: var(--color-text) !important;
}

.admin-shell .text-slate-600,
.admin-shell .text-slate-500,
.admin-shell .text-slate-400 {
    color: var(--color-muted) !important;
}

.admin-shell .text-amber-600,
.admin-shell .text-amber-700,
.admin-shell .text-amber-800 {
    color: var(--color-brand) !important;
}

.admin-shell .bg-white,
.admin-shell .bg-slate-50,
.admin-shell .bg-slate-100 {
    background: var(--admin-card-bg) !important;
}

.admin-shell .border-slate-200,
.admin-shell .border-slate-300,
.admin-shell .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-border) !important;
}

.admin-shell label,
.admin-shell dt {
    color: var(--color-text) !important;
}

.admin-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.admin-shell textarea,
.admin-shell select {
    border-color: var(--color-border) !important;
    background: color-mix(in srgb, var(--color-bg) 82%, black) !important;
    color: var(--color-text) !important;
}

.admin-shell input::placeholder,
.admin-shell textarea::placeholder {
    color: color-mix(in srgb, var(--color-muted) 70%, transparent) !important;
}

.admin-shell input:focus,
.admin-shell textarea:focus,
.admin-shell select:focus {
    border-color: var(--color-brand) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 24%, transparent) !important;
}

.admin-shell table {
    color: var(--color-text);
}

.admin-shell main,
.admin-shell form,
.admin-shell section,
.admin-shell .grid,
.admin-shell input,
.admin-shell textarea,
.admin-shell select {
    min-width: 0;
    max-width: 100%;
}

.admin-shell thead {
    background: color-mix(in srgb, var(--color-brand) 10%, var(--admin-card-bg)) !important;
    color: var(--color-muted) !important;
}

.admin-shell tbody tr {
    border-color: var(--color-border) !important;
    background: color-mix(in srgb, var(--admin-card-bg) 92%, black) !important;
}

.admin-shell tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--admin-card-bg) 82%, black) !important;
}

.admin-shell td,
.admin-shell th {
    border-color: var(--color-border) !important;
}

.admin-shell button[type="submit"],
.admin-shell .admin-primary-action {
    border-radius: var(--button-radius) !important;
    border: 1px solid var(--color-brand) !important;
    background: var(--color-brand) !important;
    color: #fff !important;
    font-weight: 800;
}

.admin-shell button[type="submit"]:hover,
.admin-shell .admin-primary-action:hover {
    background: var(--color-brand-dark) !important;
    border-color: var(--color-brand-dark) !important;
    color: #fff !important;
}

.admin-shell button.admin-btn-danger,
.admin-shell button[type="submit"].admin-btn-danger {
    background: transparent !important;
    border: 1px solid rgba(248, 113, 113, 0.5) !important;
    color: #fca5a5 !important;
}

.admin-shell button.admin-btn-danger:hover,
.admin-shell button[type="submit"].admin-btn-danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.7) !important;
    color: #fca5a5 !important;
}

.admin-shell .bg-red-600,
.admin-shell a.bg-red-600,
.admin-shell button.bg-red-600 {
    background: var(--color-brand) !important;
    color: #fff !important;
}

.admin-shell .hover\:bg-red-500:hover,
.admin-shell a.hover\:bg-red-500:hover,
.admin-shell button.hover\:bg-red-500:hover {
    background: var(--color-brand-dark) !important;
    color: #fff !important;
}

.admin-shell .hover\:bg-red-600:hover {
    background: var(--color-brand) !important;
    color: #fff !important;
}

.admin-shell .rounded-full,
.admin-shell .masihi-badge {
    border: 1px solid color-mix(in srgb, var(--color-brand) 38%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand) 16%, transparent) !important;
    color: var(--color-text) !important;
}

.admin-footer {
    border-color: var(--color-border) !important;
    background: color-mix(in srgb, var(--admin-sidebar-bg) 88%, black) !important;
    color: var(--color-muted);
}

.admin-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--admin-content-bg) 92%, black);
    color: var(--color-text);
    opacity: 1;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.admin-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.admin-page-loader__mark {
    display: grid;
    height: 3rem;
    width: 3rem;
    place-items: center;
    border-radius: var(--button-radius);
    background: var(--color-brand);
    font-weight: 950;
    animation: masihi-admin-loader 620ms ease-in-out infinite alternate;
}

.admin-page-loader__text {
    margin-top: 0.85rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@keyframes masihi-admin-loader {
    from {
        transform: scale(0.94);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand) 24%, transparent);
    }
    to {
        transform: scale(1);
        box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-brand) 0%, transparent);
    }
}

@media (max-width: 1023px) {
    .admin-sidebar {
        display: block !important;
        transform: translateX(-105%) !important;
        opacity: 0;
    }

    .admin-sidebar.is-open {
        transform: translateX(0) !important;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar,
    .admin-page-loader,
    .admin-page-loader__mark {
        animation: none;
        transition: none;
    }
}