html{position:relative;min-height:100%}body{margin-bottom:40px;font-size:1rem}.form-signin{width:100%;max-width:330px;padding:15px;margin:0 auto}.form-signin .form-control{position:relative;box-sizing:border-box;height:auto;padding:10px;font-size:16px}.form-signin .form-control:focus{z-index:2}.form-signin input.first{margin-bottom:-1px;border-bottom-right-radius:0;border-bottom-left-radius:0}.form-signin input.middle{margin-bottom:-1px;border-radius:0}.form-signin input.last{margin-bottom:.5rem;border-top-left-radius:0;border-top-right-radius:0}.user-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.footer{position:absolute;bottom:0;width:100%;height:40px;line-height:40px;text-align:right}@media (max-width:576px){.media-player{width:100%;margin-right:auto;margin-left:auto}.media-audio{margin-top:40vh}}@media (min-width:768px){.media-player{width:77%;margin-right:auto;margin-left:auto}.media-audio{margin-top:40vh}}.dropzone{min-height:300px;border:2px dashed rgba(0,0,0,.3);background:0 0;padding:20px 20px}.dropzone .dz-image{border-radius:.25rem!important}.system-tile{font-size:2.5rem}.pdf-viewer{width:100%;height:85vh}.grecaptcha-badge{top:5px!important}.text-maxlen{display:inline-block;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-maxlen:hover{overflow:auto;text-overflow:unset}.image-card{position:relative}.image-card:hover .overlay{opacity:1;transition:opacity .1s ease-in-out;-moz-transition:opacity .1s ease-in-out;-webkit-transition:opacity .1s ease-in-out}.overlay{position:absolute;width:100%;height:100%;opacity:0;transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-webkit-transition:opacity .5s ease-in-out}.overlay-rows{display:flex;flex-direction:column;align-items:stretch;height:100%}.overlay-rows-bottom,.overlay-rows-top{flex:0 1 auto}.overlay-rows-center{flex:1 1 auto;display:flex;align-items:center;justify-content:center}.overlay-rows-top{display:flex;width:100%}.overlay-rows-top>div{flex:0 1 100%}.content-image{background-size:cover;background-position:center;background-repeat:no-repeat;height:267px}.text-shadow-link{text-shadow:3px 3px 2px #000}.pt-2d5{padding-top:.8rem}.bg-light{border:0!important}.form-control-verysm{height:calc(1em + .2rem + 2px);font-size:.8rem}.tag-item{cursor:pointer;max-width:145px;text-overflow:ellipsis;overflow:hidden}.tag-add{overflow:hidden}.hljs-ln-numbers{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;color:#7d7d7d;border-right:1px solid #4b4b4b;vertical-align:top;padding-right:5px!important}.hljs-ln-code{padding-left:5px!important}.privacy-blur:not(:focus){color:transparent;text-shadow:0 0 5px rgba(0,0,0,.5)}



/* ============================================================
   HUMOUR THEME
   Applies across XBackBone without changing its Twig logic.
   ============================================================ */

:root {
    --humour-bg: #0f0b08;
    --humour-panel: rgba(18, 13, 10, 0.66);
    --humour-panel-strong: rgba(16, 11, 8, 0.82);
    --humour-panel-soft: rgba(28, 20, 15, 0.54);
    --humour-border: rgba(255, 225, 175, 0.22);
    --humour-border-strong: rgba(255, 225, 175, 0.52);
    --humour-text: #fff5e6;
    --humour-muted: rgba(255, 245, 230, 0.66);
    --humour-gold: #ffd89a;
    --humour-gold-strong: #ffe5bd;
    --humour-danger: #ffb5aa;
}

html {
    min-height: 100%;
    background: var(--humour-bg);
}

body,
body.bg-light {
    min-height: 100vh;
    margin-bottom: 40px;
    color: var(--humour-text) !important;
    background:
        linear-gradient(rgba(10, 7, 5, .46), rgba(10, 7, 5, .72)),
        url("/static/images/humour-background.jpg") center center / cover fixed no-repeat !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            transparent 26%,
            rgba(0,0,0,.18) 63%,
            rgba(0,0,0,.66) 100%
        );
}

a {
    color: var(--humour-gold);
}

a:hover,
a:focus {
    color: var(--humour-gold-strong);
    text-decoration: none;
}

/* -------------------- Navbar -------------------- */

.navbar,
.navbar.bg-primary,
.navbar-dark.bg-primary {
    background:
        linear-gradient(
            to bottom,
            rgba(10, 7, 5, .86),
            rgba(10, 7, 5, .56)
        ) !important;
    border-bottom: 1px solid var(--humour-border);
    box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar-brand {
    color: var(--humour-text) !important;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,245,230,.70) !important;
    transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--humour-gold-strong) !important;
    text-shadow: 0 0 12px rgba(255,190,110,.34);
    transform: translateY(-1px);
}

.navbar-toggler {
    border-color: var(--humour-border-strong) !important;
}

/* -------------------- Containers / cards -------------------- */

.card,
.jumbotron,
.modal-content,
.dropdown-menu,
.list-group-item,
.table,
.alert,
.form-signin,
.dropzone {
    border-color: var(--humour-border) !important;
}

.card,
.jumbotron,
.modal-content,
.dropdown-menu,
.list-group-item,
.form-signin,
.dropzone {
    background: var(--humour-panel) !important;
    color: var(--humour-text) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.card {
    border-radius: 14px;
    overflow: hidden;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
    background: rgba(14,10,8,.44) !important;
    border-color: var(--humour-border) !important;
    color: var(--humour-text) !important;
}

/* -------------------- Login -------------------- */

.form-signin {
    max-width: 390px;
    padding: 30px !important;
    border: 1px solid var(--humour-border);
    border-radius: 18px;
}

.form-signin h1 {
    color: var(--humour-text);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 500 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.form-signin::before {
    content: "HUMOUR";
    display: block;
    margin-bottom: 8px;
    color: var(--humour-gold-strong);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-align: center;
}

.form-signin .form-control {
    color: var(--humour-text);
    background: rgba(0,0,0,.30);
    border-color: var(--humour-border);
}

.form-signin .form-control::placeholder {
    color: rgba(255,245,230,.42);
}

.form-signin .form-control:focus {
    color: var(--humour-text);
    background: rgba(0,0,0,.36);
    border-color: rgba(255,210,150,.70);
    box-shadow: 0 0 0 .2rem rgba(255,190,110,.08);
}

.form-check-label {
    color: var(--humour-muted);
}

/* -------------------- Forms -------------------- */

.form-control,
.custom-select,
.input-group-text {
    color: var(--humour-text) !important;
    background: rgba(0,0,0,.28) !important;
    border-color: var(--humour-border) !important;
}

.form-control:focus,
.custom-select:focus {
    color: var(--humour-text) !important;
    background: rgba(0,0,0,.34) !important;
    border-color: rgba(255,210,150,.72) !important;
    box-shadow: 0 0 0 .2rem rgba(255,190,110,.08) !important;
}

.form-control::placeholder {
    color: rgba(255,245,230,.38) !important;
}

label,
legend,
.col-form-label {
    color: rgba(255,245,230,.78);
}

/* -------------------- Buttons -------------------- */

.btn-primary {
    color: #24170d !important;
    background: linear-gradient(180deg, #ffe1ad, #d9a65c) !important;
    border-color: #e8bd78 !important;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #1b1109 !important;
    background: linear-gradient(180deg, #fff0cd, #e5b66f) !important;
    border-color: #f1cf95 !important;
    transform: translateY(-1px);
}

.btn-secondary,
.btn-light,
.btn-outline-secondary {
    color: var(--humour-text) !important;
    background: rgba(255,255,255,.045) !important;
    border-color: var(--humour-border-strong) !important;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover {
    background: rgba(255,218,165,.10) !important;
    color: var(--humour-gold-strong) !important;
}

.btn-danger,
.btn-outline-danger:hover {
    box-shadow: 0 8px 20px rgba(100,20,15,.16);
}

/* -------------------- Tables -------------------- */

.table {
    color: var(--humour-text) !important;
    background: rgba(12,9,7,.44);
}

.table thead th {
    color: var(--humour-gold-strong);
    background: rgba(14,10,8,.70);
    border-color: var(--humour-border) !important;
}

.table td,
.table th {
    border-color: rgba(255,225,175,.12) !important;
}

.table-hover tbody tr:hover {
    color: var(--humour-text);
    background: rgba(255,218,165,.05);
}

/* -------------------- Dropdowns -------------------- */

.dropdown-menu {
    border: 1px solid var(--humour-border);
}

.dropdown-item {
    color: rgba(255,245,230,.80) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--humour-gold-strong) !important;
    background: rgba(255,218,165,.08) !important;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: rgba(255,245,230,.38) !important;
}

.dropdown-divider {
    border-top-color: var(--humour-border) !important;
}

/* -------------------- Upload / Dropzone -------------------- */

.dropzone {
    border: 2px dashed rgba(255,225,175,.44) !important;
    border-radius: 16px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.dropzone:hover,
.dropzone.dz-drag-hover {
    border-color: rgba(255,210,150,.82) !important;
    background: rgba(255,218,165,.06) !important;
    box-shadow: 0 0 28px rgba(255,190,110,.07);
}

.dropzone .dz-message,
.dropzone .dz-details {
    color: var(--humour-muted);
}

/* -------------------- Gallery -------------------- */

.image-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.26);
}

.image-card .overlay {
    background: linear-gradient(
        to bottom,
        rgba(8,6,5,.28),
        rgba(8,6,5,.72)
    );
}

.content-image {
    background-color: rgba(0,0,0,.28);
}

/* -------------------- Progress -------------------- */

.progress {
    background: rgba(0,0,0,.34) !important;
}

.progress-bar {
    color: #20140b;
    background: linear-gradient(90deg, #d8a355, #ffe0a3) !important;
}

/* -------------------- Alerts -------------------- */

.alert {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.alert-danger {
    color: #ffd7d1;
    background: rgba(100,20,15,.34) !important;
}

.alert-success {
    color: #e7ffd9;
    background: rgba(30,80,35,.30) !important;
}

.alert-warning {
    color: #ffe6b2;
    background: rgba(110,75,20,.30) !important;
}

/* -------------------- Pagination -------------------- */

.page-link {
    color: var(--humour-gold);
    background: rgba(15,11,9,.70);
    border-color: var(--humour-border);
}

.page-link:hover {
    color: var(--humour-gold-strong);
    background: rgba(255,218,165,.08);
    border-color: var(--humour-border-strong);
}

.page-item.active .page-link {
    color: #20140b;
    background: #e0af65;
    border-color: #e0af65;
}

/* -------------------- Text helpers -------------------- */

.text-muted {
    color: rgba(255,245,230,.48) !important;
}

.text-dark {
    color: var(--humour-text) !important;
}

.bg-white,
.bg-light {
    background-color: transparent !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--humour-border) !important;
}

/* -------------------- Footer -------------------- */

.footer {
    color: var(--humour-muted);
}

.footer a {
    color: var(--humour-gold);
}

/* -------------------- Modal -------------------- */

.modal-backdrop.show {
    opacity: .72;
}

.close {
    color: var(--humour-text);
    text-shadow: none;
}

.close:hover {
    color: var(--humour-gold-strong);
}

/* -------------------- Dark Reader -------------------- */

meta[name="darkreader-lock"] {
    display: none;
}

/* -------------------- Mobile -------------------- */

@media (max-width: 576px) {
    body,
    body.bg-light {
        background-position: center center !important;
    }

    .form-signin {
        max-width: calc(100vw - 30px);
        padding: 22px !important;
    }

    .navbar-brand {
        letter-spacing: .10em;
    }

    .card {
        border-radius: 12px;
    }
}

/* ============================================================
   HUMOUR BRANDING DETAILS
   ============================================================ */

.humour-navbar-brand {
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    padding-top: .35rem;
    padding-bottom: .35rem;
    margin-right: 1.4rem;
}

.humour-brand-main {
    color: #fff7e8;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .24em;
    margin-right: -.24em;
}

.humour-brand-sub {
    margin-top: .3rem;
    color: rgba(255,216,154,.72);
    font-size: .48rem;
    font-weight: 600;
    letter-spacing: .28em;
}

.humour-login-brand {
    text-align: center;
}

.humour-login-title {
    color: #fff7e8;
    font-size: 2.3rem;
    font-weight: 500;
    letter-spacing: .26em;
    margin-right: -.26em;
    text-shadow:
        0 2px 8px rgba(0,0,0,.50),
        0 0 28px rgba(255,185,110,.10);
}

.humour-login-subtitle {
    margin-top: .65rem;
    color: rgba(255,216,154,.78);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .30em;
}

.humour-login-home {
    margin-top: 1.35rem;
}

.humour-login-home a {
    color: rgba(255,245,230,.58);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .10em;
    transition: color .18s ease, text-shadow .18s ease;
}

.humour-login-home a:hover {
    color: #ffe5bd;
    text-shadow: 0 0 12px rgba(255,190,110,.28);
}

.humour-login-home i {
    margin-right: .35rem;
}

@media (max-width: 767.98px) {
    .humour-navbar-brand {
        margin-right: auto;
    }

    .humour-brand-main {
        font-size: .95rem;
    }

    .humour-login-title {
        font-size: 1.95rem;
    }
}

/* ============================================================
   NAVBAR / DROPDOWN LAYERING FIX
   Keep account menus above gallery cards, toolbars and overlays.
   ============================================================ */

.navbar,
.navbar.bg-primary,
.navbar-dark.bg-primary {
    position: relative !important;
    z-index: 3000 !important;
    overflow: visible !important;
}

.navbar .container,
.navbar-collapse,
.navbar-nav,
.nav-item.dropdown {
    position: relative;
    z-index: 3001;
    overflow: visible !important;
}

.dropdown-menu {
    z-index: 4000 !important;
}

.card,
.image-card,
.table-responsive,
.container-fluid:not(.footer) {
    position: relative;
    z-index: auto;
}

.overlay {
    z-index: 10;
}