/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

    --nav-height: 90px;
    --sidebar-width: 280px;
    --master-sidebar-width: 260px;
    --footer-height: 48px;
    --container-width: 1400px;

    --panel-padding: 20px;
    --panel-gap: 20px;
    --widget-spacing: 20px;

    --color-bg-deep: #0b0f1a;
    --color-bg-soft: #121829;
    --color-bg-panel: #101827;
    --color-bg-hover: #162033;

    --color-blue: #2f80ff;
    --color-blue-soft: #5ca0ff;

    --color-purple: #7b4dff;
    --color-purple-soft: #9b7bff;

    --color-gold: #d4af37;
    --color-gold-soft: #f1d36b;

    --color-green: #22c55e;
    --color-red: #ef4444;
    --color-orange: #f59e0b;

    --color-text-primary: #f2f4f8;
    --color-text-secondary: #c7cfdb;
    --color-text-muted: #9aa3b2;

    --border-primary: rgba(212, 175, 55, 0.35);
    --border-accent: rgba(47, 128, 255, 0.35);

    --gradient-primary: linear-gradient(
        135deg,
        var(--color-blue),
        var(--color-purple),
        var(--color-gold)
    );

    --gradient-panel: linear-gradient(
        180deg,
        rgba(0, 12, 34, 0.96),
        rgba(0, 20, 48, 0.92)
    );

    --gradient-button: linear-gradient(
        135deg,
        rgba(47, 128, 255, 0.18),
        rgba(123, 77, 255, 0.18)
    );

    --glass-bg: rgba(18, 24, 41, 0.78);
    --glass-border: rgba(255, 255, 255, 0.06);

    --panel-bg: linear-gradient(
        180deg,
        rgba(0, 12, 34, 0.92),
        rgba(0, 20, 48, 0.88)
    );

    --box-shadow-primary:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 10px 30px rgba(0, 0, 0, 0.35);

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    --z-navbar: 1000;
    --z-sidebar: 900;
    --z-master-sidebar: 950;
    --z-modal: 9999;

}

/* =====================================================
   GLOBAL RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    background: var(--color-bg-deep);
    color: var(--color-text-primary);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

#banner_image{
margin-bottom:10px;
}

/* =====================================================
   BODY BACKGROUND
===================================================== */

body {
    background:
        radial-gradient(
            circle at top left,
            rgba(47, 128, 255, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(123, 77, 255, 0.08),
            transparent 30%
        ),
        var(--color-bg-deep);
}

/* =====================================================
   GLOBAL TABLES
===================================================== */

.table-container {
    width:100%;
    overflow-x:auto;
}

.data-table {
    width:100%;
    border-collapse:collapse;
    min-width:900px;
}

.data-table th,
.data-table td {
    padding:12px 15px;
    text-align:left;
    border-bottom:1px solid var(--border-primary);
    vertical-align:top;
}

.data-table th {
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
}

.data-table td {
    font-size:14px;
    line-height:1.5;
}

.data-table tbody tr:hover {
    background:rgba(255,255,255,0.03);
}

@media (max-width:1200px){
.table-container,
.data-table-wrap{
overflow:visible;
}
.data-table{
min-width:0;
border-collapse:separate;
border-spacing:0 14px;
}
.data-table thead{
display:none;
}
.data-table,
.data-table tbody,
.data-table tr,
.data-table td{
display:block;
width:100%;
}
.data-table tr{
padding:14px;
border:1px solid var(--border-primary);
background:rgba(255,255,255,0.02);
}
.data-table td{
display:grid;
grid-template-columns:110px 1fr;
gap:12px;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,0.06);
font-size:14px;
}
.data-table td:last-child{
border-bottom:0;
}
.data-table td::before{
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:var(--text-muted);
}
.data-table td:nth-child(1)::before{
content:"Status";
}
.data-table td:nth-child(2)::before{
content:"Title";
}
.data-table td:nth-child(3)::before{
content:"Type";
}
.data-table td:nth-child(4)::before{
content:"Message";
}
.data-table td:nth-child(5)::before{
content:"Source";
}
.data-table td:nth-child(6)::before{
content:"Date";
}
.data-table td:nth-child(7)::before{
content:"Actions";
}
.data-table .widget-actions{
justify-content:flex-start;
}
}

/* =====================================================
   LEADERBOARDS
===================================================== */

.leaderboard-section {
    margin-top:20px;
}
.leaderboard-showcase-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    width:100%;
    max-width:100%;
}
.leaderboard-preview-card {
    background:var(--panel-bg);
    border:1px solid rgba(212,175,55,.35);
    padding:20px;
    min-width:0;
    max-width:100%;
    overflow:hidden;
}
.leaderboard-preview-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding-bottom:12px;
    margin-bottom:12px;
}
.leaderboard-preview-title {
    font-size:20px;
    font-weight:700;
    letter-spacing:.04em;
}
.leaderboard-preview-subtitle {
    margin-top:4px;
    color:var(--color-text-muted);
    font-size:14px;
}
.leaderboard-preview-description {
    color:var(--color-text-muted);
    margin:0 0 15px;
}
.leaderboard-preview-card .leaderboard-table {
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    margin-top:10px;
}
.leaderboard-preview-card .leaderboard-table th,
.leaderboard-preview-card .leaderboard-table td {
    opacity:1!important;
    visibility:visible!important;
    color:#f2f4f8!important;
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.leaderboard-preview-card .leaderboard-table th:nth-child(1),
.leaderboard-preview-card .leaderboard-table td:nth-child(1) {
    width:55px!important;
    text-align:center!important;
}
.leaderboard-preview-card .leaderboard-table th:nth-child(2),
.leaderboard-preview-card .leaderboard-table td:nth-child(2) {
    width:auto!important;
    text-align:left!important;
}
.leaderboard-preview-card .leaderboard-table th:nth-child(3),
.leaderboard-preview-card .leaderboard-table td:nth-child(3) {
    width:150px!important;
    text-align:right!important;
    color:#f2f4f8!important;
    font-weight:900!important;
}
.leaderboard-preview-card .leaderboard-table th:nth-child(3) {
    color:#9aa3b2!important;
    letter-spacing:.08em;
}
.leaderboard-preview-card .leaderboard-table a {
    color:var(--color-blue)!important;
    font-weight:900!important;
}
.leaderboard-view-button {
    display:block;
    margin-top:15px;
    text-align:center;
}
.leaderboard-empty {
    color:var(--color-text-muted);
    margin:0;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:900px) {
    .leaderboard-showcase-grid {
        grid-template-columns:1fr;
    }
    .leaderboard-preview-title {
        font-size:18px;
    }
    .leaderboard-preview-card .leaderboard-table th:nth-child(3),
    .leaderboard-preview-card .leaderboard-table td:nth-child(3) {
        width:110px!important;
    }
}

/* =====================================================
   DOWNLOAD CHANGELOG
===================================================== */

.changelog-container {
    margin-top:20px;
}

.changelog-item {
    border-top:1px solid rgba(255,255,255,0.08);
    padding:20px 0;
}

.changelog-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.changelog-version {
    font-size:24px;
    font-weight:700;
}

.changelog-date {
    opacity:.8;
    margin-top:5px;
}

.changelog-details {
    display:none;
    margin-top:20px;
}

.changelog-details.active {
    display:block;
}

.changelog-details h3 {
    margin:15px 0 10px;
}

.changelog-details ul {
    margin:0;
    padding-left:20px;
}

.changelog-details li {
    margin-bottom:6px;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px) {

    .changelog-row {
        flex-direction:column;
        align-items:flex-start;
    }

    .changelog-toggle {
        width:100%;
    }

    .changelog-version {
        font-size:20px;
    }

}

/* =====================================================
   SIDEBAR SUBMENU DROPDOWN
===================================================== */

.sidebar-submenu{
display:none;
}

.sidebar-submenu-open{
display:block;
}

.sidebar-submenu-header{
display:flex;
align-items:stretch;
gap:0;
}

.sidebar-submenu-header .sidebar-link{
flex:1;
}

.sidebar-submenu-toggle{
background:var(--gradient-button);
border:none;
cursor:pointer;
color:#ffffff;
font-size:32px;
font-weight:bold;
width:58px;
min-width:58px;
display:flex;
align-items:center;
justify-content:center;
transition:all .2s ease;
}

.sidebar-submenu-toggle-open{
transform:rotate(180deg);
}

.sidebar-submenu-toggle:hover{
background:rgba(255,255,255,.25);
}

.sidebar-submenu-link{
padding-left:40px;
}

/* =====================================================
   GLOBAL FILE + BUTTONS INPUT STYLING
===================================================== */

/* =====================================================
   GLOBAL FORM BUTTONS
===================================================== */

.form-button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    background: var(--gradient-button);
    border: 1px solid var(--border-primary);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
	margin-bottom: 20px;
}

.form-button:hover,
input[type="submit"]:hover {
    border-color: var(--border-accent);
    background: rgba(47, 128, 255, 0.18);
    color: var(--color-gold-soft);
}

input[type="file"] {
    width: 100%;
    padding: 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
}

input[type="file"]:hover {
    border-color: rgba(255,215,120,0.45);
    background: rgba(255,255,255,0.04);
}

input[type="file"]::file-selector-button {
    padding: 12px 18px;
    margin-right: 16px;
    border: 1px solid rgba(255,215,120,0.25);
    background: rgba(50,60,140,0.45);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
    background: rgba(70,90,200,0.55);
    border-color: rgba(255,215,120,0.45);
}

.form-helper-text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* =====================================================
   EVENT BANNER PREVIEW
===================================================== */

.event-banner-preview {
    margin-top: 20px;
    border: 1px solid var(--border-primary);
    overflow: hidden;
    background: var(--color-bg-deep);
    max-width: 600px;
}

.event-banner-preview-image {
    display: block;
    width: 100%;
    height: auto;
}

/* =====================================================
   EVENT BANNER
===================================================== */

.event-banner-wrapper {
    display: flex;
    justify-content: center;
}

.event-banner {
    display: flex;
    width: 100%;
    max-width: auto;
    height: auto;
    border: 1px solid var(--border-primary);
    background: var(--color-bg-deep);
}

/* =====================================================
   GLOBAL LINKS
===================================================== */

a {
    color: var(--color-blue-soft);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--color-gold-soft);
}

/* =====================================================
   GLOBAL IMAGES
===================================================== */

img {
    display: block;
    max-width: 100%;
}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-soft);
}

::-webkit-scrollbar-thumb {
    background: rgba(47, 128, 255, 0.45);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(47, 128, 255, 0.7);
}

/* =====================================================
   PROFILE IMAGE SYSTEM
===================================================== */

.profile-image-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.profile-image-container {
    position: relative;
}

.profile-image-preview {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

.profile-image-edit-button {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    border: none;
    cursor: pointer;
    background: rgba(0,0,0,0.85);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s ease;
}

.profile-image-edit-button:hover {
    background: rgba(10,35,80,0.95);
}

.profile-image-upload-panel {
    width: 100%;
    max-width: 320px;
}

.profile-image {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

.profile-image-small {
    width: 32px;
    height: 32px;
}

.profile-image-medium {
    width: 48px;
    height: 48px;
}

.profile-image-large {
    width: 96px;
    height: 96px;
}

.profile-image-profile-page {
    width: 120px;
    height: 120px;
}

.profile-image-upload-panel .button-primary {
    margin-top: 15px;
}

.settings-description + .button-primary {
    margin-top: 15px;
}

.profile-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.profile-overview-image {
    width: 160px;
    height: 160px;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-image-preview {
    max-width: 260px;
    margin-top: 20px;
}
.profile-image-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.topbar-profile-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.topbar-profile-image:hover {
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(0,255,170,0.35);
}

/* ===========================
   NOTIFICATION TOGGLES (SEXY MODE)
=========================== */

.notif-section-title {
    font-weight: 600;
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 5px;
    margin-top: 10px;
}

.notif-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 12px 0;
}

.notif-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.notif-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* SWITCH CONTAINER */
.switch {
    position: relative;
    display: inline-block;
    width: 70px;   /* was 56px */
    height: 30px;
}

/* HIDE INPUT */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* TRACK */
.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;

    border-radius: 999px !important;

    background: linear-gradient(145deg, #2a2a2a, #1f1f1f) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;

    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.7),
        0 0 0 rgba(0,0,0,0) !important;

    transition: all 0.25s ease;
}

.slider,
.slider:before {
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch:active .slider:before {
    transform: scale(0.95) translateY(-50%);
}

/* INNER GLOSS LAYER */
.slider::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );
}

/* KNOB */
.slider:before {
    content: "";
    position: absolute;

    height: 24px;
    width: 24px;

    left: 3px;
    top: 50%;
    transform: translateY(-50%); /* 💥 PERFECT VERTICAL CENTER */

    border-radius: 50%;

    background: linear-gradient(145deg, #ffffff, #dcdcdc);

    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 2px rgba(255,255,255,0.8);

    transition: all 0.25s ease;
}

/* ON STATE */
.switch input:checked + .slider {
    background: linear-gradient(145deg, #4caf50, #2e7d32) !important;
    border-radius: 999px !important;

    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.6),
        0 0 10px rgba(76,175,80,0.5) !important;
}

/* KNOB MOVE */
.switch input:checked + .slider:before {
    transform: translateX(40px) translateY(-50%);
}

/* HOVER (SUBTLE LIFE) */
.switch:hover .slider {
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.6),
        0 0 6px rgba(255,255,255,0.1);
}

/* DISABLED */
.switch input:disabled + .slider {
    opacity: 0.35;
    filter: grayscale(40%);
    cursor: not-allowed;
}

/* ===========================
   COLOR VARIANTS (HIGH CONTRAST)
=========================== */

/* GLOBAL (bright mint green) */
.switch input[data-type="global"]:checked + .slider {
    background: linear-gradient(145deg, #7CFF9B, #3EDC6B) !important;
    border: 1px solid rgba(124,255,155,0.5) !important;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* CHILD (slightly softer mint) */
.switch input[data-type="child"]:checked + .slider {
    background: linear-gradient(145deg, #A8FFBF, #5BE58A) !important;
    border: 1px solid rgba(168,255,191,0.4) !important;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* OFF STATE (LIGHT GREY, NOT DARK) */
.switch input:not(:checked) + .slider {
    background: linear-gradient(145deg, #dcdcdc, #bfbfbf) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.15),
        0 0 0 rgba(0,0,0,0) !important;
}

/* OPTIONAL: make knob darker when OFF for contrast */
.switch input:not(:checked) + .slider:before {
    background: linear-gradient(145deg, #777, #555);
}

/* =====================================================
   FLASH MESSAGES
===================================================== */

.flash {
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid;
    font-size: 17px;
}

.flash.success {
    background: rgba(0, 255, 140, 0.08);
    border-color: rgba(0, 255, 140, 0.35);
    color: #7dffbf;
}

.flash.error {
    background: rgba(255, 70, 70, 0.08);
    border-color: rgba(255, 70, 70, 0.35);
    color: #ff9d9d;
}

.flash.warning {
    background: rgba(255, 180, 0, 0.08);
    border-color: rgba(255, 180, 0, 0.35);
    color: #ffd27d;
}

.flash.info {
    background: rgba(80, 140, 255, 0.08);
    border-color: rgba(80, 140, 255, 0.35);
    color: #9dc3ff;
}

/* =====================================================
   GLOBAL PAGE TWEAKS
===================================================== */

.widget p {
    color: #9bb1c9;
    line-height: 1.5;
    font-size: 19px;
    margin-bottom: 22px;
}

.policy-list {
    margin-top: 16px;
    padding-left: 18px;
}

.policy-list li {
    color: #9bb1c9;
    line-height: 1.5;
    margin-bottom: 10px;
    font-size: 18px;
}

.widget-title {
    color: #ffffff;
    font-size: 24px;
}

.widget-subtitle {
    color: #7f95ad;
    font-size: 16px;
}

/* =====================================================
   NEWS SEARCH
===================================================== */

.events-news-search {
    display:flex;
    gap:10px;
    align-items:center;
}

.events-news-search-input {
    flex:1;
}

.events-news-search-button {
    flex-shrink:0;
}

/* =====================================================
   NEWS FILTERS
===================================================== */

.events-news-filters {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.events-news-filter {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    text-decoration:none;
    background:var(--panel-bg);
    border:1px solid var(--border-color);
    color:var(--text-color);
    transition:0.2s ease;
}

.events-news-filter:hover {
    border-color:var(--primary-color);
}

.events-news-filter.active {
    border-color:var(--primary-color);
    font-weight:600;
}

/* =====================================================
   NEWS GRID
===================================================== */

.events-news-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
    gap:20px;
}

.events-news-card-link {
    text-decoration:none;
    color:inherit;
}

.events-news-card {
    display:flex;
    flex-direction:column;
    height:100%;
    background:var(--panel-bg);
    border:1px solid var(--border-color);
    overflow:hidden;
    transition:0.2s ease;
}

.events-news-card:hover {
    transform:translateY(-2px);
    border-color:var(--primary-color);
}

.events-news-card-image {
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.events-news-card-content {
    display:flex;
    flex-direction:column;
    flex:1;
    padding:15px;
}

.events-news-card-meta {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    font-size:12px;
    text-transform:capitalize;
}

.events-news-card-type {
    font-weight:600;
}

.events-news-card-date {
    opacity:0.8;
    white-space:nowrap;
}

.events-news-card-author {
    margin-bottom:10px;
    font-size:13px;
    opacity:0.85;
}

.events-news-card-title {
    margin:0 0 10px;
    font-size:20px;
    line-height:1.4;
}

.events-news-card-summary {
    margin-bottom:15px;
    flex:1;
    line-height:1.6;
}

.events-news-card-read-more {
    font-weight:600;
    color:var(--primary-color);
}

/* =====================================================
   GLOBAL PAGINATION
===================================================== */

.pagination {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:20px;
}

.pagination-status {
    color:var(--color-text-muted);
    font-weight:700;
}

.page-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 14px;
    background:var(--panel-bg);
    border:1px solid #2d3748;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:0.2s ease;
}

.page-btn:hover {
    background:#1f2937;
    border-color:#4b5563;
}

.page-btn.active {
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
    pointer-events:none;
}

@media (max-width:768px) {

    .pagination {
        gap:6px;
    }

    .page-btn {
        min-width:36px;
        height:36px;
        padding:0 12px;
        font-size:13px;
    }

}

/* =====================================================
   PAGINATION
===================================================== */

.events-news-pagination {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:25px;
}

.events-news-pagination a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 12px;
    text-decoration:none;
    background:var(--panel-bg);
    border:1px solid var(--border-color);
    color:var(--text-color);
}

.events-news-pagination a:hover {
    border-color:var(--primary-color);
}

.events-news-pagination a.active {
    border-color:var(--primary-color);
    font-weight:600;
}

/* =====================================================
   NEWS VIEW HEADER
===================================================== */

.news-view-summary {
    margin-top:20px;
    line-height:1.8;
    font-size:16px;
}

/* =====================================================
   NEWS CONTENT BLOCKS
===================================================== */

.news-view-image-wrapper {
    margin-bottom:20px;
}

.news-view-image {
    display:block;
    width:100%;
    height:auto;
}

.news-view-content {
    line-height:1.8;
    font-size:16px;
}

.news-view-content h1,
.news-view-content h2,
.news-view-content h3,
.news-view-content h4,
.news-view-content h5,
.news-view-content h6 {
    margin:0 0 15px;
}

.news-view-content p {
    margin:0 0 15px;
}

.news-view-content p:last-child {
    margin-bottom:0;
}

.news-view-content ul,
.news-view-content ol {
    margin:0 0 15px 20px;
}

.news-view-content li {
    margin-bottom:6px;
}

.news-view-content img {
    max-width:100%;
    height:auto;
}

.news-view-content a {
    word-break:break-word;
}

.news-view-content blockquote {
    margin:20px 0;
    padding-left:15px;
    border-left:3px solid var(--primary-color);
}

.news-view-content table {
    width:100%;
    border-collapse:collapse;
    overflow-x:auto;
    display:block;
}

.news-view-content th,
.news-view-content td {
    padding:10px;
    border:1px solid var(--border-color);
}

.news-view-content code {
    padding:2px 5px;
    background:var(--panel-bg);
}

.news-view-content pre {
    overflow-x:auto;
    padding:15px;
    background:var(--panel-bg);
    border:1px solid var(--border-color);
}

/* =====================================================
   ARTICLE FOOTER
===================================================== */

.news-view-footer{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:15px;
}

.news-view-footer a {
    text-decoration:none;
}

/* =====================================================
   ARTICLE META
===================================================== */

.news-view-meta {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:15px;
}

.news-view-type {
    font-weight:600;
    text-transform:capitalize;
}

.news-view-date {
    opacity:0.8;
}

.news-view-author {
    margin-top:10px;
    opacity:0.9;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px) {

    .news-view-summary {
        font-size:15px;
    }

    .news-view-content {
        font-size:15px;
    }

    .news-view-content table {
        font-size:14px;
    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .events-news-search {
        flex-direction:column;
    }

    .events-news-search-input,
    .events-news-search-button {
        width:100%;
    }

    .events-news-grid {
        grid-template-columns:1fr;
    }

    .events-news-card-image {
        height:200px;
    }

    .events-news-card-meta {
        flex-direction:column;
        gap:4px;
    }

    .events-news-pagination {
        gap:8px;
    }

    .events-news-pagination a {
        min-width:36px;
        height:36px;
    }

}

/* ===============================
   LOGIN + OAUTH
================================ */

/* OAuth container */

.oauth-container{
display:flex;
flex-direction:column;
gap:14px;
margin-bottom:20px;
}

.oauth-btn{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
width:100%;
padding:14px 16px;
font-weight:600;
font-size:16px;
text-decoration:none !important;
cursor:pointer;
transition:all .2s ease;
}

.oauth-btn span{
color:inherit;
}

/* ICON */

.oauth-icon{
width:22px;
height:22px;
flex-shrink:0;
}

/* DISCORD */

.discord-btn{
background:#5865F2;
color:#fff !important;
border:none;
}

.discord-btn:hover{
background:#4752C4;
}

/* GOOGLE */

.google-btn{
background:#ffffff;
border:1px solid #dadce0;
color:#3c4043 !important;
box-shadow:0 1px 2px rgba(0,0,0,0.15);
}

.google-btn:hover{
background:#cbd1d6 !important;
}

.oauth-btn.google-btn{
background:#ffffff;
border:1px solid #dadce0;
color:#3c4043 !important;
box-shadow:0 1px 2px rgba(0,0,0,0.15);
}

/* TWITCH */

.twitch-btn{
background:#9146ff;
color:#fff !important;
border:none;
}

.twitch-btn:hover{
background:#772ce8;
}

.oauth-btn.twitch-btn{
background:#9146ff;
color:#fff !important;
border:none;
}

.oauth-btn.twitch-btn:hover{
background:#772ce8;
}

/* divider */

.oauth-divider{
display:flex;
align-items:center;
margin:24px 0;
color:#aaa;
font-size:13px;
}

.oauth-divider::before,
.oauth-divider::after{
content:"";
flex:1;
height:1px;
background:#333;
}

.oauth-divider span{
padding:0 12px;
}

/* =====================================================
   GLOBAL NOTIFICATION SYSTEM
===================================================== */

.notification-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 360px;
    max-width: calc(100vw - 40px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: none;

}

.notification {
    position: relative;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        linear-gradient(
            135deg,
            rgba(3,12,32,0.96),
            rgba(5,18,48,0.98)
        );
    backdrop-filter: blur(10px);
    box-shadow:
        0 0 30px rgba(0,0,0,0.45),
        inset 0 0 25px rgba(255,255,255,0.03);
    opacity: 0;
    transform:
        translateX(40px)
        scale(0.96);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
    pointer-events: auto;
    overflow: hidden;
}

.notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #4b7cff;
}

.notification.notification-visible {
    opacity: 1;
    transform:
        translateX(0)
        scale(1);
}

.notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.notification-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.notification-content {
    color: rgba(255,255,255,0.92);
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
}

.notification-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.notification-close:hover {
    color: #ffffff;
}

.notification-event::before {
    background: #00c2ff;
}

.notification-registration::before {
    background: #00ff9d;
}

.notification-approval::before {
    background: #9d6bff;
}

.notification-reminder::before {
    background: #ffc107;
}

.notification-system::before {
    background: #4b7cff;
}

.notification-warning::before {
    background: #ff4d6d;
}

@media (max-width: 768px) {

    .notification-container {
        top: 80px;
        right: 14px;
        left: 14px;
        width: auto;
        max-width: none;
    }

    .notification {
        padding: 18px;
    }

}

/* =====================================================
   AVATAR VERIFICATION SYSTEM
===================================================== */

.verification-token {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid rgba(255,193,7,0.35);
    background:
        linear-gradient(
            135deg,
            rgba(255,193,7,0.08),
            rgba(255,193,7,0.02)
        );
    color: #ffc107;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    word-break: break-word;
}

.verification-steps {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.verification-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: #ffffff;
    line-height: 1.6;
}

.verification-step-number {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background:
        linear-gradient(
            135deg,
            rgba(75,124,255,0.22),
            rgba(157,107,255,0.12)
        );
    border: 1px solid rgba(75,124,255,0.4);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

/* =====================================================
   MASTER SIDEBAR ACTIVE
===================================================== */

.master-sidebar-active .main-workspace {
    margin-right: var(--master-sidebar-width);
}

/* =====================================================
   MAIN DASHBOARD LAYOUT
===================================================== */

.app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

/* =====================================================
   TOP NAVBAR
===================================================== */

.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(5, 10, 18, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-primary);
    z-index: var(--z-navbar);
}

.top-navbar-inner {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* =====================================================
   NAV DROPDOWNS
===================================================== */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--panel-bg);
    border: 1px solid var(--border-primary);
    box-shadow: var(--box-shadow-primary);
    display: none;
    flex-direction: column;
    z-index: 5000;
}

.nav-dropdown.dropdown-active .nav-dropdown-menu {
    display: flex;
}

.nav-dropdown-link {
    padding: 12px 16px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-primary);
    transition: var(--transition-fast);
}

.nav-dropdown-link:last-child {
    border-bottom: none;
}

.nav-dropdown-link:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* =====================================================
   PLATFORM LOGO
===================================================== */

.platform-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.platform-logo span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.platform-logo-image {
    display: block;
    height: 78px;
    width: auto;
}

/* =====================================================
   NAVIGATION BUTTONS
===================================================== */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    background: var(--gradient-button);
    border: 1px solid var(--border-primary);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.nav-button:hover {
    border-color: var(--border-accent);
    background: rgba(47, 128, 255, 0.18);
    color: var(--color-gold-soft);
}

/* =====================================================
   MAIN CONTENT WRAPPER
===================================================== */

.main-layout {
    display: flex;
    width: 100%;
    flex: 1;
    padding-top: var(--nav-height);
    padding-bottom: var(--footer-height);
}

/* =====================================================
   LEFT SIDEBAR
===================================================== */

.left-sidebar {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--nav-height) - var(--footer-height));
    background: rgba(8, 14, 24, 0.94);
    border-right: 1px solid var(--border-primary);
    overflow-y: auto;
    z-index: var(--z-sidebar);
}

.sidebar-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

.sidebar-link:hover {
    background: rgba(47, 128, 255, 0.12);
    border-color: var(--border-accent);
    color: var(--color-text-primary);
}

/* =====================================================
   MASTER SIDEBAR
===================================================== */

.master-sidebar {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    width: var(--master-sidebar-width);
    height: calc(100vh - var(--nav-height) - var(--footer-height));
    background: rgba(15, 9, 25, 0.96);
    border-left: 1px solid rgba(123, 77, 255, 0.18);
    overflow-y: auto;
    z-index: var(--z-master-sidebar);
}

.master-sidebar .sidebar-link:hover {
    background: rgba(123, 77, 255, 0.12);
}

/* =====================================================
   MAIN WORKSPACE
===================================================== */

.main-workspace {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: var(--widget-spacing);
}

.has-master-sidebar .main-workspace {
    margin-right: var(--master-sidebar-width);
}

/* =====================================================
   WIDGET SYSTEM
===================================================== */

.widget-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--widget-spacing);
}

.widget {
    background: var(--panel-bg);
    border: 1px solid var(--border-primary);
    box-shadow: var(--box-shadow-primary);
    padding: var(--panel-padding);
    overflow: hidden;
}

.widget-full {
    grid-column: span 12;
}

.widget-half {
    grid-column: span 6;
}

.widget-third {
    grid-column: span 4;
}

.widget-quarter {
    grid-column: span 3;
}

/* =====================================================
   WIDGET HEADERS
===================================================== */

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.widget-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-primary);
}

.widget-subtitle {
    font-size: 15px;
    color: var(--color-text-muted);
}

/* =====================================================
   GLOBAL PANELS
===================================================== */

.panel {
    background: var(--panel-bg);
    border: 1px solid var(--border-primary);
    box-shadow: var(--box-shadow-primary);
    padding: var(--panel-padding);
}

/* =====================================================
   BUTTONS
===================================================== */

.button-primary,
.button-secondary,
.button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	margin-top: 15px;
}

.button-primary {
    background: rgba(47, 128, 255, 0.18);
    border-color: rgba(47, 128, 255, 0.25);
    color: var(--color-text-primary);
}

.button-primary:hover {
    background: rgba(47, 128, 255, 0.28);
    border-color: rgba(47, 128, 255, 0.45);
}

.button-secondary {
    background: rgba(123, 77, 255, 0.18);
    border-color: rgba(123, 77, 255, 0.25);
    color: var(--color-text-primary);
}

.button-secondary:hover {
    background: rgba(123, 77, 255, 0.28);
}

.button-danger {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fff;
}

.button-danger:hover {
    background: rgba(239, 68, 68, 0.28);
}

/* =====================================================
   FORM SYSTEM
===================================================== */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.form-label {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    background: rgba(8, 14, 24, 0.92);
    border: 1px solid var(--border-primary);
    color: var(--color-text-primary);
    transition: var(--transition-fast);
}

.form-textarea {
    min-height: 140px;
    padding: 14px;
    resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgba(47, 128, 255, 0.5);
    background: rgba(12, 20, 32, 1);
}

/* =====================================================
   STATUS BADGES
===================================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.status-live {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--color-green);
}

.status-warning {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--color-orange);
}

.status-offline {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--color-red);
}

/* =====================================================
   FOOTER BAR
===================================================== */

.footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    background: rgba(5, 10, 18, 0.96);
    border-top: 1px solid var(--border-primary);
    z-index: var(--z-navbar);
}

.footer-inner {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-inner .nav-actions {
    margin-left: auto;
}

/* =====================================================
   LOCKED ONBOARDING STATE
===================================================== */

.onboarding-lock-screen {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(
            circle at top,
            rgba(47, 128, 255, 0.12),
            transparent 40%
        ),
        rgba(4, 8, 16, 0.98);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.onboarding-panel {
    width: 100%;
    max-width: 700px;
    background: var(--panel-bg);
    border: 1px solid var(--border-accent);
    box-shadow: 0 0 40px rgba(47, 128, 255, 0.12);
    padding: 40px;
}

.onboarding-title {
    font-size: 30px;
    margin-bottom: 12px;
}

.onboarding-text {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* =====================================================
   MOBILE NAVIGATION
===================================================== */

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gradient-button);
    border: 1px solid var(--border-primary);
    color: var(--color-text-primary);
    font-size: 22px;
    cursor: pointer;
}

.mobile-navigation-panel {
    position: fixed;
    top: var(--nav-height);
    right: -100%;
    width: 340px;
    max-width: 90%;
    height: calc(100vh - var(--nav-height));
    background: rgba(5, 10, 18, 0.98);
    border-left: 1px solid var(--border-primary);
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 6000;
}

.mobile-navigation-panel.mobile-navigation-active {
    right: 0;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1400px) {

    .widget-quarter {
        grid-column: span 6;
    }

}

@media (max-width: 1200px) {

    .left-sidebar {
        width: 240px;
    }

	.main-workspace {
		padding: 12px;
		width: 100%;
	}

	.widget-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}

    .master-sidebar {
        width: 220px;
    }
	
	.widget-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.status-badge {
		width: 100%;
		justify-content: center;
	}	

}

@media (max-width: 992px) {
	
    .mobile-menu-toggle {
        display: flex;
        margin-left: auto;
    }	

	.top-navbar .nav-actions {
		display: none;
	}

	.left-sidebar,
	.master-sidebar {
		display: none;
	}
	
    .footer-bar {
        position: relative;
        height: auto;
        min-height: var(--footer-height);
        /* Excellent mobile-safe padding rule: protects against notches, safe areas and viewport edge clipping */
		padding: 10px max(15px, env(safe-area-inset-left)) 
				 10px max(15px, env(safe-area-inset-right)); 
    }

	.footer-inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		height: auto;
		padding: 10px 0;
	}

	.footer-inner > div:first-child {
		text-align: center;
	}

	.footer-inner .nav-actions {
		margin-left: 0;
		flex-wrap: wrap;
		justify-content: center;
	}

	.main-layout {
		display: block;
	}

	.main-workspace {
		width: 100%;
		max-width: 100%;
		margin: 0 !important;
	}

    .widget-half,
    .widget-third,
    .widget-quarter {
        grid-column: span 12;
    }

}

@media (max-width: 768px) {

    .main-workspace {
        padding: 16px;
    }

    .widget,
    .panel {
        padding: 16px;
    }

    .onboarding-panel {
        padding: 24px;
    }

}

@media (max-width: 540px) {

    .platform-logo {
        font-size: 16px;
    }

    .nav-button {
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
    }

    .onboarding-title {
        font-size: 24px;
    }

}

/* =====================================================
   USER CONTROL PANEL
===================================================== */

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-primary);
}

.panel-title {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    color: var(--text-primary);
}

.panel-subtitle {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 16px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid rgba(0,255,140,0.35);
    background: rgba(0,255,140,0.12);
    color: #00ff8c;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-primary);
    padding: 20px;
	margin-bottom: 20px;
}

.dashboard-card-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-card-header h2 {
    margin: 0;
    font-size: 24px;
    color: var(--text-primary);
}

.dashboard-card-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.info-label {
    color: var(--text-secondary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.verification-success {
    padding: 14px;
    border: 1px solid rgba(0,255,140,0.25);
    background: rgba(0,255,140,0.08);
    color: #00ff8c;
    font-weight: 600;
}

.verification-warning {
    padding: 14px;
    border: 1px solid rgba(255,180,0,0.25);
    background: rgba(255,180,0,0.08);
    color: #ffb400;
    font-weight: 600;
}

.dashboard-action-card {
    display: block;
    padding: 22px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.dashboard-action-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,215,120,0.45);
}

.dashboard-action-card h3 {
    margin: 0 0 10px;
    font-size: 24px;
    color: var(--text-primary);
}

.dashboard-action-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 992px) {

    .panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-title {
        font-size: 32px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .info-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-value {
        text-align: left;
    }

}

/* =====================================================
   COOKIE NOTICE
===================================================== */

.cookie-notice {
    position:fixed;
    right:20px;
    bottom:20px;
    width:500px;
    max-width:calc(100vw - 40px);
    z-index:99999;
    background:var(--panel-bg);
    border:1px solid var(--border-primary);
    padding:20px;
    box-shadow:0 0 20px rgba(0,0,0,0.4);
}

.cookie-notice-inner {
    display:flex;
    flex-direction:column;
    gap:20px;
}

.cookie-text {
    font-size:14px;
    line-height:1.6;
}

.cookie-notice-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

@media (max-width:768px) {

    .cookie-notice {
        left:10px;
        right:10px;
        bottom:10px;
        width:auto;
        padding:15px;
    }

    .cookie-notice-actions {
        width:100%;
        display:flex;
        gap:10px;
    }

    .cookie-notice-actions .button-primary,
    .cookie-notice-actions .button-secondary {
        flex:1;
    }

}

/* =====================================================
   MANAGE NEWS TABLE
===================================================== */

.news-management-table-wrap {
    width:100%;
    overflow-x:auto;
}

.news-management-table {
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
}

.news-management-table th,
.news-management-table td {
    padding:15px;
    text-align:left;
    vertical-align:middle;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.news-management-table th {
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
}

.news-management-table td {
    font-size:14px;
}

.news-management-table td:nth-child(2) {
    min-width:220px;
}

.news-management-table td:nth-child(3) {
    min-width:220px;
    word-break:break-word;
}

.news-management-table td:last-child {
    min-width:280px;
}

.news-management-empty {
    padding:30px;
    text-align:center;
    opacity:0.8;
}

.news-management-table .widget-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.news-management-table .widget-actions form {
    margin:0;
}

.news-management-table .button-primary,
.news-management-table .button-secondary {
    min-width:90px;
    padding:10px 14px;
    margin:0;
}

.news-management-table .widget-actions {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .news-management-table {
        display:block;
    }

    .news-management-table thead {
        display:none;
    }

    .news-management-table tbody {
        display:block;
    }

    .news-management-table tr {
        display:block;
        margin-bottom:20px;
        padding:15px;
        border:1px solid rgba(255,255,255,0.08);
        background:var(--panel-bg);
    }

    .news-management-table td {
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:15px;
        padding:10px 0;
        border-bottom:1px solid rgba(255,255,255,0.08);
        min-width:0 !important;
    }

    .news-management-table td:last-child {
        border-bottom:none;
    }

    .news-management-table td:nth-child(1)::before {
        content:"ID";
        font-weight:700;
    }

    .news-management-table td:nth-child(2)::before {
        content:"Title";
        font-weight:700;
    }

    .news-management-table td:nth-child(3)::before {
        content:"Slug";
        font-weight:700;
    }

    .news-management-table td:nth-child(4)::before {
        content:"Type";
        font-weight:700;
    }

    .news-management-table td:nth-child(5)::before {
        content:"Status";
        font-weight:700;
    }

    .news-management-table td:nth-child(6)::before {
        content:"Views";
        font-weight:700;
    }

    .news-management-table td:nth-child(7)::before {
        content:"Created";
        font-weight:700;
    }

    .news-management-table td:nth-child(8)::before {
        content:"Actions";
        font-weight:700;
    }

    .news-management-table .widget-actions {
        width:100%;
        justify-content:flex-end;
    }

    .news-management-table .button-primary,
    .news-management-table .button-secondary {
        min-width:80px;
        padding:8px 12px;
    }

}

/* =====================================================
   DOWNLOAD PAGE CLIENT SCREENSHOTS
===================================================== */

.client-screenshot-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(260px,420px));
    gap:24px;
    justify-content:center;
    margin-top:28px;
}
.client-screenshot-thumb {
    display:block;
    width:100%;
    padding:0;
    background:rgba(3,18,38,.85);
    border:1px solid var(--color-border);
    color:var(--color-text-primary);
    cursor:pointer;
    overflow:hidden;
    text-align:left;
}
.client-screenshot-thumb img {
    display:block;
    width:100%;
    height:230px;
    object-fit:cover;
    border-bottom:1px solid var(--color-border);
}
.client-screenshot-thumb span {
    display:block;
    padding:14px 16px;
    color:var(--color-gold);
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}
.client-screenshot-thumb:hover {
    border-color:var(--color-blue);
    background:rgba(8,35,70,.95);
}
.client-image-viewer {
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(0,0,0,.82);
    z-index:9999;
}
.client-image-viewer.active {
    display:flex;
}
.client-image-viewer-panel {
    position:relative;
    width:min(1200px,96vw);
    max-height:92vh;
    padding:20px;
    background:var(--panel-bg);
    border:1px solid var(--color-border);
    box-shadow:0 0 40px rgba(0,0,0,.6);
}
.client-image-viewer-title {
    margin:0 48px 16px 0;
    color:var(--color-gold);
    font-size:1.1rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.client-image-viewer-panel img {
    display:block;
    width:100%;
    max-height:78vh;
    object-fit:contain;
    border:1px solid var(--color-border);
}
.client-image-viewer-close {
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    background:rgba(255,70,70,.12);
    border:1px solid rgba(255,70,70,.7);
    color:#ff7070;
    font-size:1.6rem;
    font-weight:900;
    line-height:1;
    cursor:pointer;
}
.client-image-viewer-close:hover {
    background:rgba(255,70,70,.22);
}
@media (max-width:800px) {
    .client-screenshot-grid {
        grid-template-columns:1fr;
    }
    .client-screenshot-thumb img {
        height:auto;
    }
    .client-image-viewer {
        padding:14px;
    }
    .client-image-viewer-panel {
        padding:14px;
    }
}

/* =====================================================
   NEWS TICKER
===================================================== */

.index-news-ticker{
display:grid;
grid-template-columns:260px 1fr;
gap:20px;
align-items:center;
}
.index-news-ticker-label{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
color:#ffe45c;
}
.ticker-live-dot{
width:10px;
height:10px;
background:#00ff9d;
display:inline-block;
box-shadow:0 0 10px rgba(0,255,157,.9),0 0 22px rgba(0,255,157,.45);
animation:tickerPulse 1.4s ease-in-out infinite;
}
@keyframes tickerPulse{
0%{
transform:scale(1);
opacity:.75;
box-shadow:0 0 6px rgba(0,255,157,.75),0 0 14px rgba(0,255,157,.35);
}
50%{
transform:scale(1.35);
opacity:1;
box-shadow:0 0 14px rgba(0,255,157,1),0 0 34px rgba(0,255,157,.75);
}
100%{
transform:scale(1);
opacity:.75;
box-shadow:0 0 6px rgba(0,255,157,.75),0 0 14px rgba(0,255,157,.35);
}
}
.index-news-ticker-track{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 30px;
}
.index-news-ticker-item{
font-size:16px;
line-height:1.4;
}
.index-news-ticker-date,
.index-event-link-date{
color:var(--color-text-muted);
font-weight:700;
}
.index-news-ticker-link,
.index-event-link{
color:#9dccff;
text-decoration:none;
font-weight:700;
}
.index-news-ticker-link:hover,
.index-event-link:hover{
color:#ffffff;
}
.index-event-link-list{
display:grid;
gap:10px;
}
.index-event-link-row{
font-size:16px;
line-height:1.4;
}
.index-event-link-empty{
color:var(--color-text-muted);
}
@media (max-width:900px){
.index-news-ticker{
grid-template-columns:1fr;
}
.index-news-ticker-track{
grid-template-columns:1fr;
}
}

.index-sync-warning{
margin-top:25px;
padding:18px 20px;
border:1px solid rgba(0,255,157,.45);
background:rgba(0,255,157,.08);
box-shadow:0 0 18px rgba(0,255,157,.12);
}
.index-sync-warning-title{
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
color:#00ff9d;
margin-bottom:8px;
}
.index-sync-warning p{
margin:0;
}