/* hexed.systems — Forgejo theme. Every page. Same palette as landing.
 *
 * !important: Forgejo’s built-in CSS has high specificity; we use !important to override
 * without editing Forgejo source. Test upgrades in staging—class names may change.
 *
 * Custom classes (defined by our templates, not Forgejo core):
 *   .memorial-content, .memorial-header, .memorial-body, .memorial-empty, .memorial-loading
 *   .hexed-badges, .hexed-badge
 * Keep templates (footer.tmpl, header.tmpl, dashboard) and this CSS in sync.
 *
 * Fonts: Google Fonts (Share Tech Mono, Orbitron). For self-hosted, add @font-face
 * rules and serve from e.g. /assets/fonts/; then remove or comment out the @import below.
 */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;600;700;900&display=swap');

:root {
    --color-primary: #00d9ff !important;
    --color-primary-dark-1: #00b8cc !important;
    --color-primary-dark-2: #0099b3 !important;
    --color-primary-light-1: #33e0ff !important;
    --color-accent: #ff006e !important;
    --color-secondary: #a855f7 !important;
    --color-mint-1: #0d3b2e !important;
    --color-mint-2: #10b981 !important;
    --color-mint-3: #34d399 !important;
    --color-mint-4: #6ee7b7 !important;
    --color-mint-5: #a7f3d0 !important;
    /* Heatmap (contribution graph) — cyan/teal scale; used in #user-heatmap */
    --heatmap-bg: #0a1f2e !important;
    --heatmap-low: #0d3d4d !important;
    --heatmap-mid: #00b8cc !important;
    --heatmap-high: #00d9ff !important;
    --heatmap-fill: #0b1024 !important;
}

/* Dark canvas — all pages */
body,
.ui.container,
#git-graph,
.main .content,
.page-content,
.repository .repository-menu,
.ui.segment {
    background: #04050e !important;
    color: rgba(255,255,255,0.9) !important;
    font-family: 'Share Tech Mono', monospace !important;
}

/* Login, sign up, install pages */
.user.signin .container,
.user.signup .container,
.ui.fluid.container {
    background: #04050e !important;
}
.user.signin .segment,
.user.signup .segment,
.ui.attached.segment {
    background: #070a18 !important;
    border-color: rgba(0,217,255,0.2) !important;
}

/* Links and primary actions */
a,
.ui.basic.primary.button,
.ui.primary.button,
.ui.menu .active.item {
    color: var(--color-primary) !important;
}
a:hover,
.ui.menu .active.item:hover {
    color: var(--color-primary-light-1) !important;
}

.ui.primary.button,
.ui.primary.buttons .button {
    background: var(--color-primary) !important;
    color: #04050e !important;
    border-color: var(--color-primary) !important;
}
.ui.primary.button:hover {
    background: var(--color-primary-light-1) !important;
    border-color: var(--color-primary-light-1) !important;
}

/* Headers / nav — base; navbar layout below replaces Forgejo .ui.menu */
.ui.menu,
.navbar,
.header,
.ui.top.fixed.menu,
.ui.inverted.menu,
#navbar {
    background: rgba(7,10,24,0.95) !important;
    border-color: rgba(0,217,255,0.2) !important;
}
.ui.menu .item,
.navbar .item,
.ui.inverted.menu .item {
    color: rgba(255,255,255,0.92) !important;
}
.ui.menu .item:hover,
.navbar .item:hover,
.ui.inverted.menu .item:hover {
    color: var(--color-primary) !important;
}

/* Navbar — single replacement layout (loaded last so this wins) */
nav#navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-height: 2.75rem !important;
}
nav#navbar .navbar-left.ui.secondary.menu,
nav#navbar .navbar-right.ui.secondary.menu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
nav#navbar .navbar-left.ui.secondary.menu .item,
nav#navbar .navbar-right.ui.secondary.menu .item {
    margin: 0 0.25rem !important;
    padding: 0.5rem 1rem !important;
    color: rgba(255,255,255,0.95) !important;
    border-radius: 6px !important;
}
nav#navbar .navbar-left.ui.secondary.menu .item:hover,
nav#navbar .navbar-right.ui.secondary.menu .item:hover {
    color: #00d9ff !important;
    background: rgba(0,217,255,0.08) !important;
}
nav#navbar .navbar-left.ui.secondary.menu .item.active,
nav#navbar .navbar-right.ui.secondary.menu .item.active {
    color: #00d9ff !important;
    background: rgba(0,217,255,0.12) !important;
}
nav#navbar .navbar-right.ui.secondary.menu {
    gap: 0.25rem !important;
}
nav#navbar .navbar-right.ui.secondary.menu .item + .item {
    margin-left: 0 !important;
}
nav#navbar .navbar-right .ui.dropdown .menu .dropdown .icon,
nav#navbar .navbar-right .octicon-triangle-right,
nav#navbar .navbar-right .octicon-play,
nav#navbar .navbar-right .svg.octicon.octicon-chevron-right {
    display: none !important;
}
nav#navbar .navbar-right .ui.dropdown > .dropdown.icon {
    opacity: 1 !important;
    margin-left: 0.25rem !important;
}
nav#navbar .navbar-right .ui.dropdown .image,
nav#navbar .navbar-right .ui.dropdown img.avatar,
nav#navbar .navbar-right .ui.dropdown .avatar {
    margin-right: 0.35rem !important;
}
nav#navbar .navbar-right .ui.dropdown > .text {
    margin-right: 0.15rem !important;
}
nav#navbar .navbar-right .ui.label,
nav#navbar .navbar-right .count {
    min-width: 1.25rem !important;
    padding: 0.2rem 0.4rem !important;
    font-size: 0.7rem !important;
    background: #00d9ff !important;
    color: #04050e !important;
    border-radius: 10px !important;
}
nav#navbar .navbar-right .item .svg.octicon {
    margin-right: 0.35rem !important;
    vertical-align: text-bottom !important;
}

/* Cards / repo list / explore — boxed repo cards (profile + explore) */
.ui.card,
.repository.list .item,
.ui.segment,
.list .item,
.issue.list .item {
    background: #070a18 !important;
    border-color: rgba(0,217,255,0.12) !important;
    color: rgba(255,255,255,0.9) !important;
}
.ui.card:hover,
.repository.list .item:hover,
.list .item:hover {
    border-color: rgba(0,217,255,0.25) !important;
}

/* Repo list: card/box style instead of line-separated rows */
.repository.list,
.page-content.user .repository.list,
.explore .repository.list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.repository.list .item,
.page-content .repository.list .item,
.explore .repository.list .item {
    background: #0b1024 !important;
    border: 1px solid rgba(0,217,255,0.18) !important;
    border-radius: 10px !important;
    padding: 18px 22px !important;
    margin: 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,217,255,0.06) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.repository.list .item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(0,217,255,0.5) 15%, rgba(0,217,255,0.5) 85%, transparent 100%) !important;
    pointer-events: none !important;
}
.repository.list .item:hover {
    border-color: rgba(0,217,255,0.35) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,217,255,0.12) !important;
}
/* Remove line separators when list is divided (Semantic UI) */
.repository.list.ui.divided.list .item,
.page-content.user .ui.divided.list .item {
    border-bottom: none !important;
}

/* Inputs — login, forms, search */
.ui.form input,
.ui.form textarea,
.ui.input input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"] {
    background: #0b1024 !important;
    border-color: rgba(0,217,255,0.2) !important;
    color: rgba(255,255,255,0.9) !important;
}
.ui.form input:focus,
.ui.input input:focus,
input:focus {
    border-color: var(--color-primary) !important;
}

/* Dropdowns, modals, popups */
.ui.dropdown .menu,
.ui.modal,
.ui.popup {
    background: #070a18 !important;
    border-color: rgba(0,217,255,0.2) !important;
    color: rgba(255,255,255,0.9) !important;
}
.ui.dropdown .menu > .item {
    color: rgba(255,255,255,0.9) !important;
}

/* Footer — hidden */
.ui.footer,
.footer.ui.segment,
#footer,
.page-bottom {
    display: none !important;
}

/* Tables */
.ui.table,
.ui.table thead th {
    background: #070a18 !important;
    border-color: rgba(0,217,255,0.12) !important;
    color: rgba(255,255,255,0.9) !important;
}
.ui.table tbody tr:hover {
    background: rgba(0,217,255,0.06) !important;
}

/* Code / markdown */
.code-diff,
pre,
code,
.ui.segment pre {
    background: #0b1024 !important;
    border-color: rgba(0,217,255,0.12) !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Tabs */
.ui.tabular.menu .item {
    color: rgba(255,255,255,0.92) !important;
}
.ui.tabular.menu .active.item {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ========== Dashboard / user home (activity feed, layout) ========== */
.page-content:not(.home) .ui.feed,
.page-content .ui.feed .event,
.dashboard .ui.feed .event,
.ui.activity.list .item {
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(0,217,255,0.08) !important;
}
.page-content .ui.feed .event:last-child,
.ui.activity.list .item:last-child {
    border-bottom: none !important;
}
.page-content .ui.feed .label .avatar,
.dashboard .ui.feed .label img {
    border-radius: 6px !important;
    border: 1px solid rgba(0,217,255,0.2) !important;
}
.page-content .ui.feed .content .summary,
.dashboard .ui.feed .content .summary {
    color: rgba(255,255,255,0.9) !important;
}
.page-content .ui.feed .content .extra a,
.dashboard .ui.feed .content a[href*="/commit/"],
.dashboard .ui.feed .content .commit-message {
    color: var(--color-primary) !important;
}
.dashboard .main.content,
.page-content.dashboard .ui.grid {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.dashboard .ui.segment,
.page-content .ui.segment {
    background: #070a18 !important;
    border-color: rgba(0,217,255,0.12) !important;
    border-radius: 8px !important;
}
.dashboard .ui.secondary.menu,
.dashboard .ui.tabular.menu {
    background: transparent !important;
    border-color: rgba(0,217,255,0.15) !important;
}
.dashboard .ui.menu .item,
.dashboard .ui.tabular.menu .item {
    color: rgba(255,255,255,0.92) !important;
}
.dashboard .ui.menu .active.item,
.dashboard .ui.tabular.menu .active.item {
    color: var(--color-primary) !important;
}
.dashboard .ui.input input,
.dashboard input[type="text"],
.dashboard input[type="search"] {
    background: #0b1024 !important;
    border-color: rgba(0,217,255,0.2) !important;
    color: rgba(255,255,255,0.9) !important;
    border-radius: 6px !important;
}
.dashboard .list .item,
.dashboard .ui.list .item {
    border-bottom: 1px solid rgba(0,217,255,0.06) !important;
    padding: 0.6rem 0 !important;
    color: rgba(255,255,255,0.85) !important;
}
.dashboard .list .item a,
.dashboard .ui.list .item a {
    color: var(--color-primary) !important;
}

/* ========== Heatmap — Cyan/teal to match hexed (uses :root heatmap vars) ========== */
#user-heatmap,
.contribution-activity-wrap {
    --color-primary-light-4: var(--heatmap-bg) !important;
    --color-primary-light-2: var(--heatmap-low) !important;
    --color-primary: var(--heatmap-mid) !important;
    --color-primary-dark-2: var(--heatmap-high) !important;
    --color-secondary-alpha-60: var(--heatmap-fill) !important;
}
#user-heatmap {
    background: #070a18 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    border: 1px solid rgba(0,217,255,0.12) !important;
}
#user-heatmap .vch__day__square {
    rx: 2px !important;
    ry: 2px !important;
}
#user-heatmap .vch__legend__wrapper rect {
    rx: 2px !important;
    ry: 2px !important;
}

/* ========== Repo pages — GitHub-like layout and styling ========== */

.repository .page-content,
.repository .repository-menu,
.repository .main.content,
.repo-home-filelist,
.repo-grid-filelist-sidebar,
.repo-grid-filelist-only {
    background: #04050e !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.repository .ui.tabular.menu {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,217,255,0.2) !important;
    border-radius: 0 !important;
}
.repository .ui.tabular.menu .item {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    padding: 0.75rem 1rem !important;
    color: rgba(255,255,255,0.92) !important;
}
.repository .ui.tabular.menu .item:hover {
    color: var(--color-primary) !important;
}
.repository .ui.tabular.menu .active.item {
    border-bottom-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

.repository .ui.table thead th {
    background: #070a18 !important;
    border-bottom: 1px solid rgba(0,217,255,0.25) !important;
    color: rgba(255,255,255,0.95) !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
}
.repository .ui.table tbody td {
    padding: 0.5rem 1rem !important;
    border-bottom: 1px solid rgba(0,217,255,0.08) !important;
    vertical-align: middle !important;
}
.repository .ui.table tbody tr:hover td {
    background: rgba(0,217,255,0.04) !important;
}
.repository .ui.table .octicon,
.repository .ui.table [class*="icon"] {
    color: var(--color-primary) !important;
    margin-right: 0.5rem !important;
}

.repository .file-view,
.repository .code-view,
.repository .blob-wrapper,
.repository .segment pre,
.repository .code-diff pre,
.repository .lines-num {
    background: #0b1024 !important;
    border: 1px solid rgba(0,217,255,0.15) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.repository .lines-num,
.repository .line-num {
    background: #070a18 !important;
    border-right: 1px solid rgba(0,217,255,0.12) !important;
    color: rgba(255,255,255,0.75) !important;
    user-select: none !important;
}
.repository .code-diff .add,
.repository .code-diff .addition {
    background: rgba(16,185,129,0.12) !important;
}
.repository .code-diff .del,
.repository .code-diff .deletion {
    background: rgba(255,0,110,0.08) !important;
}

.repository .markdown,
.repository .readme,
.repository .file-content.markdown {
    background: #070a18 !important;
    border: 1px solid rgba(0,217,255,0.12) !important;
    border-radius: 6px !important;
    padding: 1rem 1.5rem !important;
}
.repository .markdown h1,
.repository .markdown h2 {
    border-bottom: 1px solid rgba(0,217,255,0.2) !important;
    padding-bottom: 0.5rem !important;
    color: var(--color-primary) !important;
}

.repository .repo-header,
.repository .ui.header:first-of-type {
    color: rgba(255,255,255,0.95) !important;
}

/* Repo header buttons: readable text + pink/green accents (not just blue/purple) */
.repository .ui.basic.button,
.repository .ui.buttons .ui.basic.button,
.repository .repo-header .ui.button:not(.primary):not(.green):not(.positive) {
    color: var(--color-accent) !important;
    border-color: rgba(255,0,110,0.5) !important;
}
.repository .ui.basic.button:hover,
.repository .ui.buttons .ui.basic.button:hover {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background: rgba(255,0,110,0.1) !important;
}
.repository .ui.green.button,
.repository .ui.positive.button,
.repository .ui.buttons .ui.green.button,
.repository .ui.buttons .ui.positive.button {
    color: var(--color-mint-4) !important;
    border-color: rgba(16,185,129,0.5) !important;
}
.repository .ui.green.button:hover,
.repository .ui.positive.button:hover,
.repository .ui.buttons .ui.green.button:hover {
    color: var(--color-mint-3) !important;
    border-color: var(--color-mint-3) !important;
    background: rgba(16,185,129,0.12) !important;
}
.repository .repo-header .ui.primary.button,
.repository .ui.buttons .ui.primary.button {
    color: #04050e !important;
}

.repository .clone-url,
.repository input[readonly] {
    background: #0b1024 !important;
    border: 1px solid rgba(0,217,255,0.2) !important;
    border-radius: 4px !important;
    color: var(--color-primary) !important;
    font-family: 'Share Tech Mono', monospace !important;
}

.repository .commit-list .item,
.repository .commits-list li {
    border-bottom: 1px solid rgba(0,217,255,0.08) !important;
    padding: 0.5rem 0 !important;
}
.repository .commit-list .item:hover,
.repository .commits-list li:hover {
    background: rgba(0,217,255,0.04) !important;
}
.repository .commit-message,
.repository .commit-summary {
    color: var(--color-primary) !important;
}
.repository .commit-sha {
    color: rgba(255,255,255,0.9) !important;
    font-family: 'Share Tech Mono', monospace !important;
}

/* Repo home: cap latest-commit message box so it doesn't cover the file list */
#repo-files-table .markup,
#repo-files-table .commit-message,
#repo-files-table .message-wrapper,
.repository #repo-files-table .markup,
.repository #repo-files-table .commit-message,
.repository #repo-files-table .message-wrapper {
    max-height: 7em !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
    display: block !important;
}
/* Repo home: cap the big commit message segment above the file list (the "little box") */
.repository .main.content > .ui.segment .markup,
.repository .main.content > .ui.segment .commit-message,
.repository .main.content > .ui.segment .commit-summary,
.repository .file-list .ui.segment .markup,
.repository .repo-info .markup,
.repository .latest-commit .markup,
.repository [class*="commit-message"] .markup {
    max-height: 8em !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
}
.repository .main.content > .ui.segment:has(.markup) {
    max-height: 12em !important;
    overflow: hidden !important;
}
.repository .main.content > .ui.segment:has(.markup) .markup {
    max-height: 9em !important;
    overflow-y: auto !important;
}
/* Repo home: cap .latest-commit row and .commit-body (Forgejo actual DOM) */
.repository .latest-commit {
    max-height: 10em !important;
    overflow: hidden !important;
}
.repository .latest-commit .commit-body,
.repository .latest-commit pre.commit-body {
    max-height: 7em !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    white-space: pre-wrap !important;
    -webkit-overflow-scrolling: touch !important;
}
.repository .latest-commit .file-view.markup {
    max-height: 7em !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* Profile page: two-column layout (sidebar left, content right); fluid on wide screens */
@media (min-width: 768px) {
    .page-content.user.profile .ui.stackable.grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .page-content.user.profile .ui.stackable.grid > .ui.four.wide.column {
        width: 296px !important;
        max-width: 296px !important;
        flex: 0 0 296px !important;
        position: sticky !important;
        top: 1rem !important;
    }
    .page-content.user.profile .ui.stackable.grid > .ui.twelve.wide.column {
        width: calc(100% - 296px) !important;
        max-width: 1280px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* ========== Profile avatar — large hexagonal display (matches GitHub layout) ========== */
#profile-avatar {
    padding: 1.5rem 2rem 0.5rem !important;
    justify-content: center !important;
    display: flex !important;
}
#profile-avatar .image {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}
/* Hexagon clip-path; border-radius is fallback for browsers that ignore clip-path (e.g. IE) */
#profile-avatar img.ui.avatar {
    width: 260px !important;
    height: 260px !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
}


/* ========== Memorial tab ========== */
.memorial-content {
    background: #070a18 !important;
    border: 1px solid rgba(167,139,250,0.2) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin-top: 1rem !important;
    overflow: hidden !important;
}
.memorial-header {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    background: rgba(167,139,250,0.08) !important;
    border-bottom: 1px solid rgba(167,139,250,0.15) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #a78bfa !important;
    letter-spacing: 0.5px !important;
}
.memorial-body {
    padding: 24px !important;
}
.memorial-body h1,
.memorial-body h2,
.memorial-body h3 {
    color: #a78bfa !important;
    border-bottom-color: rgba(167,139,250,0.2) !important;
}
.memorial-body img {
    max-width: 100% !important;
    border-radius: 6px !important;
}
.memorial-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4rem 2rem !important;
    text-align: center !important;
    color: rgba(255,255,255,0.9) !important;
    font-family: 'Share Tech Mono', monospace !important;
}
.memorial-loading {
    padding: 3rem !important;
    text-align: center !important;
    color: rgba(255,255,255,0.9) !important;
}

/* ========== Profile trophy badges (image-only, click for modal) ========== */
.hexed-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 10px 0 !important;
    padding: 4px 0 !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
    justify-content: flex-start !important;
    align-items: center !important;
}
.hexed-badges .hexed-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    background: rgba(11,16,36,0.6) !important;
    border: 1px solid rgba(0,217,255,0.15) !important;
    border-radius: 6px !important;
    padding: 3px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    position: relative !important;
    margin: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
.hexed-badges .hexed-badge:hover {
    transform: scale(1.15) !important;
    border-color: rgba(0,217,255,0.4) !important;
    box-shadow: 0 0 8px rgba(0,217,255,0.25) !important;
}
.hexed-badges .hexed-badge img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    display: block !important;
    object-fit: contain !important;
}

/* ========== Badge modal overlay (JS in header.tmpl) ========== */
.hexed-badge-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: rgba(4,5,14,0.75) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    justify-content: center !important;
    align-items: center !important;
}
.hexed-badge-overlay.visible {
    display: flex !important;
}
.hexed-badge-modal {
    background: #0b1024 !important;
    border: 1px solid rgba(0,217,255,0.25) !important;
    border-radius: 12px !important;
    padding: 28px 32px !important;
    text-align: center !important;
    max-width: 400px !important;
    width: 92% !important;
    box-shadow: 0 0 40px rgba(0,217,255,0.1), 0 0 80px rgba(0,0,0,0.5) !important;
    animation: hexed-modal-in 0.15s ease !important;
}
@keyframes hexed-modal-in {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.hexed-badge-modal-img {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 16px !important;
    display: block !important;
    border-radius: 8px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    object-fit: contain !important;
}
.hexed-badge-modal-name {
    font-family: 'Orbitron', 'Share Tech Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #00d9ff !important;
    -webkit-text-fill-color: #00d9ff !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
}
.hexed-badge-modal-desc {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.55) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
    line-height: 1.55 !important;
    letter-spacing: 0.3px !important;
    text-align: left !important;
}
.hexed-badge-modal-date {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.3) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.3) !important;
    letter-spacing: 0.5px !important;
    border-top: 1px solid rgba(0,217,255,0.1) !important;
    padding-top: 10px !important;
    margin-top: 4px !important;
}