@import url('https://fonts.googleapis.com/css?family=Archivo');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Style+Script');

/

/* Shared Styles (use variables) */
.trumbowyg-font-family { color: var(--normaltext); }

input:read-only {
  background-color: var(--altbg);
  color: #666;
  border: 1px dashed var(--normalline);
  cursor: not-allowed;
}

/* Top Alerts */
.top-alert {
  border-radius: 0;
  margin-bottom: 0;
}

/* Tables */
.normal_table { font-size:14px; }
.normal_table td { color: var(--normaltext); }
.normal_table th { background-color: transparent !important; color: var(--normaltext); margin:5px 0 !important; font-weight: bold; font-size:13px; }


.table-style {
 border-color: var(--normalline);
 color: var(--table-normaltext);
}

.table-style th,
.table-style td,
.table-style thead th {
  border-color: var(--table-border-color);
  color: var(--table-normaltext);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: var(--table-striped-odd-color) !important;
  --bs-table-striped-color: inherit; /* optional, lets text color stay normal */
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: var(--table-striped-even-color) !important;
}


img {
        max-width: 100%;
        height: auto;
    }

/* Buttons */
.btn-outline-green { 
	border:1px solid var(--accent);
	color: var(--accent);
}
.btn-outline-green:hover { 
	border:1px solid var(--linkhover);
}

/* Editor */
#threadContent, #replyContent { min-height: 300px; }
#threadContent .trumbowyg-box, #replyContent .trumbowyg-box { height: 100%; } 
/* Alertify */
.alertify .success { color:black !important; }
.alertify .ajs-header { color: var(--alertify-header); }
.alertify .ajs-body { background-color: var(--alertify-body-bg); color: var(--alertify-header); }
.alertify .ajs-dialog { background-color: var(--alertify-dialog-bg); color: var(--alertify-header); border: 1px solid var(--alertify-dialog-border); }
.alertify .ajs-button.ajs-ok { background: var(--alertify-btn-ok-bg); border-color: var(--alertify-btn-ok-border); color: var(--alertify-btn-ok-color); }
.alertify .ajs-button.ajs-cancel { background: var(--alertify-btn-cancel-bg); border-color: var(--alertify-btn-ok-border); color: var(--alertify-btn-ok-color); }
.alertify .ajs-button.ajs-ok:hover { background: var(--alertify-btn-ok-hover-bg); }
.alertify .ajs-button.ajs-cancel:hover { background: var(--alertify-btn-cancel-hover-bg); }
.alertify-notifier .ajs-message.ajs-default { background-color: var(--alertify-notifier-default-bg); color: var(--alertify-notifier-default-color); border: var(--alertify-notifier-default-border); box-shadow: none; padding: 15px; display: flex; align-items: center; }
.alertify-notifier .ajs-message.ajs-success { background-color: var(--alertify-notifier-success-bg) !important; color: var(--alertify-notifier-success-color) !important; }

/* Input Fields */
.form-control { background: var(--normalbg); border: 1px solid var(--normalline); color: var(--table-normaltext); }
.form-control::placeholder { color: var(--placeholder); opacity: 1; }
.form-control:focus { background: var(--normalbg); color: var(--table-normaltext); box-shadow: none; }
.form-select { background: var(--normalbg); border: 1px solid var(--normalline); color: var(--table-normaltext); background-image: linear-gradient(45deg, transparent 50%, var(--table-normaltext) 50%), linear-gradient(135deg, var(--table-normaltext) 50%, transparent 50%), linear-gradient(to right, transparent, transparent); background-position: calc(100% - 20px) calc(0.575em + 8px), calc(100% - 15px) calc(0.575em + 8px), 100% 0; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; }

/* Custom Audio Player */
.custom-audio-player { background: var(--audio-player-bg); border: 1px solid var(--audio-player-border); border-radius: 8px; padding: 15px; transition: all 0.3s ease; }
.custom-audio-player:hover { box-shadow: var(--audio-player-hover-shadow); }
.player-bg-image { border-radius: 8px; object-fit: cover; border: 1px solid var(--audio-player-img-border); }
.custom-audio-message { color: var(--audio-message-color); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.5px; }
.aplayer-dj { color: var(--audio-dj-color); font-weight: 600; }
.aplayer-songtitle { color: var(--audio-songtitle-color); font-style: italic; }
.aplayer-songartist { color: var(--audio-songartist-color); }
.custom-audio-controls { background: var(--audio-controls-bg); border-radius: 6px; padding: 10px; }
.play-pause, .mute { background: var(--audio-btn-bg) !important; border-radius: 50%; width: 32px !important; height: 32px !important; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }
.play-pause:hover, .mute:hover { background: var(--audio-btn-hover-bg); }
.material-icons { color: var(--audio-icon-color); font-size: 20px; }
.seek-bar, .volume-bar { -webkit-appearance: none; appearance: none; background: var(--audio-bar-bg); height: 6px; border-radius: 3px; outline: none; width: 100%; max-width: 200px; }
.seek-bar::-webkit-slider-thumb, .volume-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--audio-thumb-bg) !important; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.seek-bar::-moz-range-thumb, .volume-bar::-moz-range-thumb { width: 14px; height: 14px; background: var(--audio-thumb-bg) !important; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.live-stream-indicator { color: var(--audio-live-indicator-color); font-size: 0.85rem; font-weight: 500; background: var(--audio-live-indicator-bg); padding: 4px 8px; border-radius: 4px; }
#visualizer { background: var(--audio-visualizer-bg); border-radius: 8px; margin-bottom: 20px; }

/* Voice Recorder */
#vr-record-div, #vr-recording-div, #vr-player-div, #vr-share-div, #vr-header-div { background: var(--vr-bg); border: 1px solid var(--vr-border); border-radius: 8px; }
.vr-circle-icon { display: inline-flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; color: var(--vr-circle-color); font-size: 24px; opacity: 0.8; }
.vr-circle-icon:hover { opacity: 1; cursor: pointer; }
.vr-circle-icon-b { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--vr-circle-color); font-size: 20px; opacity: 0.8; }
.vr-circle-icon-b:hover { opacity: 1; cursor: pointer; }
.vr-button-a { background: var(--vr-btn-a-bg); }
.vr-button-b { margin-left: 10px; background: var(--vr-btn-b-bg); }
input[type="range"] { -webkit-appearance: none; height: 2px; border-radius: 5px; background: var(--vr-range-bg); outline: none; opacity: 0.9; transition: opacity .2s; }
.vr-player-timers { position: absolute; font-size: 13px; }
.vr-player-timeleft { left: 10px; top: 30px; }
.vr-player-timeright { right: 0; padding-top: 5px; }
#vr-logo { position: absolute; left: 10px; top: -52px; font-family: 'Style Script'; font-size: 45px; }
#vr-share-url { background: var(--vr-share-url-bg); border: 1px solid var(--vr-share-url-border); color: var(--vr-share-url-color); }

/* Global */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { font-family: 'Roboto', sans-serif; color: var(--normaltext); background: var(--body-bg); min-height: 100vh; display: flex; flex-direction: column; }
#page-container { flex: 1 0 auto; }
.card-body { background: var(--cardbody); padding: 10px; }
.btn-clearwhite { color: var(--normaltext); }
.icon::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; }
h1 { font-size: 35px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
hr { border-top: 1px solid #666; }
.green { color: var(--color-green); }
.red { color: var(--color-red); }
.orange { color: var(--color-orange); }
a { color: var(--alink); text-decoration: none; }
a:hover { color: var(--alink-hover); text-decoration: none; }
.altheader h1:before, .addfaicon:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f188"; margin-right: 5px; }

/* Global Classes */
.nodisplay { display: none; }
.flex-auto { -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; }
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.card-img-right { height: 100%; border-radius: 0 3px 3px 0; }
.rmheight { max-height: 300px; position: relative; overflow: hidden; transition: max-height 0.5s ease; }
.rmheight.expanded { max-height: 2000px; }
.rmheight .view-allcode { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; margin: 0; padding: 30px 0; font-size: 13px; color: grey; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #000 100%); }
.rmheight.expanded .view-allcode { background: none; }
html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-color); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; border: 2px solid var(--scrollbar-track-border); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.codesyntax { max-height: 400px; }
.postscode .codesyntax { max-height: 100px !important; }
.blog-content, .media-body { min-width: 0 !important; }
.blog-main pre, .blog-main pre code, .blog-main textarea.codesyntax { display: block; width: 100% !important; max-width: 100% !important; overflow-x: auto; white-space: pre; box-sizing: border-box; }
.blog-main pre code, .blog-main textarea.codesyntax { white-space: pre-wrap; word-break: break-word; }
.post-content pre code, .post-content .codesyntax { white-space: pre-wrap; word-break: break-word; }
.post-content pre, .post-content pre code, .post-content textarea.codesyntax { display: block; width: 100% !important; max-width: 100% !important; overflow-x: auto; white-space: pre; box-sizing: border-box; }
.post-content pre code, .post-content .codesyntax { white-space: pre-wrap; word-break: break-word; }

/* Buttons */
.btn-group-xs > .btn, .btn-xs { padding: .3rem .5rem; font-size: .775rem; line-height: .9; border-radius: .2rem; }

/* Dim */
#dimer { display: none; position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity = 50); }
#dim { background: rgba(0,0,0,.8); width: 250px; height: 80px; position: fixed; top: 50%; right: 50%; z-index: 99999; margin-top: -40px; margin-right: -125px; }
#dimicon { font-size: 50px; color: white; line-height: 80px; }
.highlighttext { color: var(--alink); font-weight: bold; }

/* Navbar */
.navbar-mainmenu { background: rgba(0, 0, 0, .5) !important; }
.navitemicon { position: relative; }
.navbar-mainmenu .nav-item .nav-link .badge-counter { font-size: 10px !important; padding: 3px 5px; }
.nav-scroller { position: relative; z-index: 2; height: 2.75rem; overflow-y: hidden; }
.nav-scroller .nav { display: flex; flex-wrap: nowrap; padding-bottom: 1rem; margin-top: -1px; overflow-x: auto; text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.nav-scroller .nav-link { font-size: .875rem; padding-top: .75rem; padding-bottom: .75rem; }
.navbar-mainmenu .dropdown-menu { background-color: #161819 !important; color: #CCC; }
.navbar-mainmenu .dropdown-menu a { color: #CCC; }
.navbar-mainmenu .dropdown-menu a:hover { color: #FFF; background: transparent; }
.dropdown.no-arrow .dropdown-toggle:after { display: none; }
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus { outline: none; box-shadow: none; }
@media only screen and (max-width: 991px) {
    .searchbaricon { position: absolute; top: 10px; left: 20px; }
    .themeicon { position: absolute; top: 10px; left: 50px; }
    .offcanvas { background: transparent !important; }
    .navbar-mainmenu .offcanvas-body { background: rgba(22, 24, 25, .9); }
    .navbar-mainmenu .offcanvas-header { background: #161819; color: white; margin: 0px; }
}
.closebutton { color: white; }

/* Notification Dropdown */
.dropdown-notification .dropdown-header { color: white; }
.dropdown-notification .icon-circle { font-size: 13px; height: 2rem; width: 2rem; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.dropdown-notification-item { border-bottom: 1px solid #CCC; font-size: 17px; margin: 3px 0; font-size: 17px; }
.dropdown-notification-time { color: #ccc; }
.dropdown-notification-message { color: #666; }
a.dropdown-notification-viewall { color: #666; }
.alertsdropdown { overflow-wrap: break-word !important; word-wrap: break-word !important; hyphens: auto; min-width: 400px; width: 50%; max-width: 700px; }
.alertsdropdown a { white-space: normal !important; }

/* Search Bar */
.searchbar { background: rgba(0, 0, 0, .5); padding: 0 0 5px 0; }
.searchinput, .searchinput:focus { color: #666; }
.searchbar .search_sel_text { background: var(--search-box-sel-text-bg); color: var(--normaltext); border: 0px !important; }
.searchbar .btn-success { background: var(--search-box-sel-text-bg); color: var(--normaltext); border: 0px !important; }


/* keep lists on one line at lg+ so we can measure overflow */
@media (min-width: 992px){
  .navbar-mainmenu .offcanvas-body{ flex-wrap: nowrap; }
  .navbar-mainmenu .offcanvas-body > .navbar-nav{ flex-wrap: nowrap; }

  /* let the LEFT list flex and take remaining space */
  .navbar-mainmenu .offcanvas-body > .navbar-nav:first-child{
    flex: 1 1 auto; min-width: 0; /* allows shrink */
  }
  /* keep the RIGHT list sized-to-content */
  .navbar-mainmenu .offcanvas-body > .navbar-nav.ms-lg-auto{
    flex: 0 0 auto;
  }
}

/* optional: style for “More” dropdown in dark theme */
.navbar-mainmenu #moreNavDropdown .dropdown-menu{
  min-width: 12rem;
}






/* Main Page Holder */
.page-holder { padding: 20px 20px 80px 20px; margin-top: 20px; background: var(--page-holder-bg); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important; border-radius: .25rem !important; height: 100%; }

/* Breadcrumbs */
.mainnavbreadcrumb { color: red !important; font-size: 0.8rem; background: transparent; padding: 0 10px; }
.mainnavbreadcrumb .active { color: #666 !important; }
.mainnavbreadcrumb a { color: var(--normaltext); text-decoration: none; }
.mainnavbreadcrumb a:hover { color: var(--normalhover); }
.mainnavbreadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #666; }

/* Jumbotron & Main Header with Logo */
.jumbotron-main { font-family: Archivo; padding: 20px 20px; background-color: transparent; }
.jumbotron-main p { font-family: 'Courier New'; font-size: 16px; }

/* Logo Header */
.altheader { font-family: Archivo; margin-bottom: 15px; padding: 10px 20px; }
.altheader hr { margin: 0 0 10px 0; }
.altheader h2 { font-size: 16px; color: var(--normaltext); font-family: 'Courier New'; }

/* CountDown */
.countdown { text-transform: uppercase; font-weight: bold; }
.countdown span { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); font-size: 2rem; margin-left: 0.9rem; }
.countdown span:first-of-type { margin-left: 0; }
.countdown-circles { text-transform: uppercase; font-weight: bold; }
.countdown-circles span { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); }
.countdown-circles span:first-of-type { margin-left: 0; }

/* Image Slider */
.image-slider-holder { margin-bottom: 40px !important; background: var(--blog-post-bg); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; border-radius: .25rem !important; }

/* Shoutbox */
.shout_deleteit { font-size: 12px; }
.shout_deleteit a { opacity: 0.5; }
.shout_deleteit a:hover { opacity: 1; }
.shout_banip { font-size: 12px; }
.shout_banip a { opacity: 0.5; }
.shout_banip a:hover { opacity: 1; }
.shout_entry { padding: 5px 10px; border-bottom: 1px solid var(--normalline); font-size: 13px; }
.shout_entry a { font-weight: bold; }
.shout_entry:nth-child(even) { background: var(--shout-alt-bg); }
.shout_user { font-weight: bold; color: #0080FF; }
.shout_guest { font-weight: bold; color: #289744; }
.shout_time, .shout_time a { font-size: 12px; color: var(--shout-time); font-weight: normal; }
.shout_msgbox, .shout_msgbox:focus, .shout_gbox, .shout_gbox:focus { background: var(--shout-msg-box) !important; border: 1px solid var(--shout-msg-box-border); color: var(--normaltext); font-size: 14px; opacity: 0.2; box-shadow: none; }
.shout_msgbox::placeholder { color: var(--normaltext) !important; opacity: 0.3; }
.shout_btn { color: #CCC; }
#message_box { height: 200px; overflow: auto; }

/* Emoji Holder */
#emojiholder { width: 250px; overflow-y: auto; height: 100px; overflow-x: hidden; max-width: 250px; position: absolute; top: -15px; right: 1px; background: #151718; border: 1px solid #292929; padding: 0 5px; opacity: 0.8; }
#emojibtn { background: var(--shout-msg-box); border: 1px solid var(--shout-msg-box-border); padding-top: 6px; }

/* Blog */
.avatar-mainpage { margin-right: 8px; height: 40px; width: 40px; }
.blog-post { margin-bottom: 40px !important; padding: 10px 20px; background: var(--blog-post-bg); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; border-radius: .25rem !important; }
.blog-post:last-child { }
.blog-post-idimg .img-thumbnail { border: 1px solid var(--normalline); box-shadow: none; background: #000; }
.blog-post-title { overflow: hidden; }
.blog-post-title a { color: var(--link); }
.blog-post-title a:hover { color: var(--linkhover); }
.blog-post-meta { color: var(--normaltext); font-size: .85rem; }
.blog-post-meta-date { color: var(--normaltext); }
.blog-post-meta a { color: var(--alink); font-weight: bold; }
.blog-post-meta a:hover { color: var(--alink-hover); }
.blog-post-meta-comments .badge { font-size: .7rem; white-space: nowrap; color: var(--normaltext) !important; font-weight: normal; }
.blog-post-meta #comnum_b, .file-single-holder #comnum_b { font-style: normal !important; }
.post-avatar .img-thumbnail { border: 0px solid var(--normalline); box-shadow: none; background: transparent; }
.blog-content a { color: var(--alink); }
.blog-content a:hover { color: var(--alink-hover); }

/* Main Post Holder */
.main-post { padding: 10px 20px; background: var(--blog-post-bg); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; border-radius: .25rem !important; }

/* Meta Grabber */
.metaoutput a { color: var(--normaltext); }
.metaoutput-box { background: var(--metaoutput-box-bg); display: flex; border: 1px solid var(--metaoutput-box-border) !important; }
.metaoutput-box:hover { background: var(--metaoutput-box-hover-bg); }
.metaoutput-image { height: 125px; width: 125px; display: inline-block; float: left; }
.metaoutput-box-text { flex: 1; }
.metaoutput-box-text p { font-size: 0.95rem; }

/* Attachments */
.post_attachment a { border: 1px solid var(--normalline); background: var(--post-attachment-bg); color: var(--post-attachment-color); display: inline-block; padding: 5px 10px; }
.post_attachment a:hover { border-color: var(--post-attachment-hover-border); background: var(--post-attachment-hover-bg); }
.post_attachment_icon { font-size: 27px; color: var(--post-attachment-icon-color); opacity: 0.9; float: left; }
.post_attachment_title { font-size: 14px; margin-left: 30px; }
.post_attachment_info { font-size: 13px; margin-left: 30px; }
.post_attachment_info span:first-of-type { margin-right: 10px; }

/* Code Line Number */
.hljs-ln-numbers { text-align: center; color: #ccc; border-right: 1px solid #CCC; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: top; padding-right: 5px !important; }
.hljs-ln-code { display: block; margin-left: 10px !important; }

/* Tickets */
.ticketreply_holder { color: var(--normaltext); font-size: 15px; margin-bottom: 10px; border: 1px solid var(--normalline); padding: 1px; }
.ticketreply_holder.odd { background: var(--ticketreply-holder-odd-bg); }
.ticketreply_author { padding: 5px 10px; }
.ticketreply_date { font-size: 13px; margin: 7px 10px 0 10px; }
.ticketreply_author_staff { background: var(--ticketreply-author-staff-bg); color: var(--ticketreply-author-staff-color); }
.ticketreply_author_user { background: var(--ticketreply-author-user-bg); color: var(--ticketreply-author-user-color); }
.ticketreply_body { padding: 10px; }

/* Modals */
.modal { color: var(--normaltext); }
.modal .btn-close.custom-btn { filter: invert(23%) sepia(97%) saturate(7471%) hue-rotate(356deg) brightness(103%) contrast(143%); }
.modal-content { background: var(--modal-content-bg); }
.modal-header { border-bottom: 1px solid var(--normalline) !important; }
.modal-footer { border-top: 1px solid var(--normalline) !important; }
.modal input, .modal textarea { background: var(--altbg); border: var(--normalline); }
.modal label { font-size: 14px; }

/* Image Popup */
#imagemodal button { color: red; opacity: 1; text-shadow: 0 1px 0 var(--normalline); }
#imagemodal .modal-content { background: var(--normalbg); }
#imagemodal .modal-header { border-bottom: 0px solid #2D2F2C !important; }
#imagesModal .modal-body { width: 100% !important; margin: 0px; padding: 0px; }
#imagesModal .Modalimg { height: 100%; width: 100%; padding: 0px 10px; }
#imagesModal #modalImage { max-height: 300px; max-width: 100%; margin: 0 auto; }
#imagesModal .modal-dialog { -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); top: 50%; margin: 0 auto; background: #1E1E20; border: 1px solid #2D2F2C; }
#imagesModal .modal-header { border-bottom: 0px solid #2D2F2C !important; }
#imagesModal .modal-content { width: 100%; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); background: #1E1E20; }
#imagesModal .modal-footer { border-top: 1px solid var(--normalline); }

.postgallery img { width: 150px; height: 150px; object-fit: cover; border-radius: var(--postgallery-img-border-radius); }
.postgallery .img-thumbnail { background-color: #020102 !important; box-shadow: 0 2px 12px 0 rgba(255,255,255,0.12); }
.gallery-numimages { color: #666; }

/* Gallery Albums */
.galleryalbums .gallery-card {  background: var(--normalbg);border: 1px solid var(--normalline);border-radius: var(--card-radius, 12px);overflow: hidden;transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;box-shadow: 0 2px 10px rgba(0,0,0,.06);}
.galleryalbums .gallery-card:hover { transform: translateY(-2px);border-color: color-mix(in oklab, var(--normalline) 60%, var(--accent) 40%);box-shadow: 0 12px 30px rgba(0,0,0,.18);}
.galleryalbums .thumb-link { display:block; position:relative; }
.galleryalbums .album-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover;display: block;background: #0e0f10; border-bottom: 1px solid var(--normalline);}
.galleryalbums .album-title { color:var(--normaltext);font-size: 1rem;line-height: 1.25;margin: 0;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
.galleryalbums .album-desc { font-size: .9rem;color: var(--normaltext); display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;  overflow: hidden;}
.galleryalbums .album-meta .btn { line-height: 1; padding: .4rem .6rem; border-radius: 8px; }
.galleryalbums img { height: auto !important; }


/* === Modern Gallery: balanced spacing between image and Details button === */
.modern-gallery .mg-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
          /* slight gap between image and button */
  margin-bottom: 0.75rem; /* keep consistent space between rows */
}

.modern-gallery .mg-card {
  background: var(--galleryalbums-bg);
  border: 1px solid var(--normalline);
  border-radius: 6px;
  box-shadow: var(--shadow-soft, 0 1px 4px rgba(0,0,0,.06));
  transition: transform .12s ease, box-shadow .25s ease, border-color .2s ease;
}

.modern-gallery .mg-card:hover {
  transform: scale(1.02);
  border-color: var(--normalline);
  box-shadow: var(--shadow-strong, 0 4px 16px rgba(0,0,0,.15));
}

.modern-gallery .mg-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--altbg);
  border-radius: 4px;
}

/* Likes overlay badge */
.modern-gallery .mg-likes {
  position: absolute;
  top: .35rem;
  left: .35rem;
  background: var(--gallerypics-likes-bg, rgba(0,0,0,.6));
  color: var(--gallerypics-likes-color, #fff);
  font-size: .7rem;
  padding: .15rem .4rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* Details button under the thumbnail */
.modern-gallery .mg-details-static {
  margin-top: 0;
}

.modern-gallery .mg-details-static a {

  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.modern-gallery .mg-details-static a:hover {

}

/* === Modern Gallery: tighter modal layout === */
#imagesModalb .modal-dialog {
  margin: 0 auto;               /* remove top/bottom margin */
  max-width: 900px;             /* keep nice large image area */
}

#imagesModalb .modal-content {
  background: var(--normalbg);
  border: 1px solid var(--normalline);
  border-radius: 8px;
  box-shadow: var(--shadow-strong, 0 6px 20px rgba(0,0,0,.25));
}

#imagesModalb .modal-header,
#imagesModalb .modal-footer {
  padding: 0.4rem 0.6rem;       /* reduce header/footer height */
}

#imagesModalb .modal-body {
  padding: 0.4rem 0.6rem;       /* smaller vertical padding */
}

#imagesModalb .modal-body img {
  margin-top: 0;                /* remove extra vertical margins */
  margin-bottom: 0;
  border-radius: 6px;
  max-height: 75vh;             /* prevent overflow vertically */
  object-fit: contain;
}

/* Buttons alignment / spacing */
#imagesModalb .modal-footer {
  border-top: 1px solid var(--normalline);
  justify-content: space-between;
}



/* Gallery Pictures */
.gallerypics { margin-bottom: 20px; position: relative; opacity: 0.8; }
.gallerypics:hover { opacity: 1; }
.gallerypics .img-thumbnail { border: 1px solid var(--normalline); box-shadow: none; background: #000; }
.gallerypics img { height: 150px; width: 100%; background: #1E1E20; }
.gallerypics .gallerypicslikes { font-size: 13px; color: var(--gallerypics-likes-color); background: var(--gallerypics-likes-bg); position: absolute; z-index: 99; bottom: 4px; left: 15px; padding: 3px 5px; }
.gallerypics .gallerypicsdetails { font-size: 13px; position: absolute; z-index: 99; bottom: 4px; right: 15px; }
.gallerypics .gallerypicsdetails a { color: var(--gallerypics-details-color); background: var(--gallerypics-details-bg); display: block; padding: 3px 5px; }
.gallerypics div a:hover { background: var(--gallerypics-details-hover-bg); }

/* Likes */
.likes_photo { border: 1px solid var(--normalline); margin-bottom: 10px; background: var(--altbg); }
.likes_photo a { font-size: 20px; font-family: Roboto; color: var(--normaltext); font-weight: bold; display: block; padding: 5px 10px; }
.likes_photo a:hover { color: #666; }

/* Single Picture Page */
.picture-single-holder-table { font-size: 14px; color: var(--normaltext); text-align: center; }
.picture-single-holder-table td { border-top: 1px solid var(--normalline); }

/* POLLs */
.pollsholder { height: 100%; font-size: 15px; }
.pollsholder .polls_question span { font-weight: bold; color: var(--normaltext); }
.pollsholder .polls_box { background: var(--pollsholder-box-bg); padding: 25px; margin: 5px; border-radius: 15px; }
.pollholder .pollquestion span { font-weight: bold; color: var(--normaltext); }
.pollholder .pollresults { padding: 7px 0px; }
.pollholder .pollanswers { padding: 5px 0px; }

/* Alerts Page */
.alert-holder { border-bottom: 1px solid var(--table-border-color); margin: 0 0 15px 0; }
.alert-holder a { color: var(--alink); }
.alert-holder a:hover { color: var(--alink-hover); }
.alert-holder .icon-circle { height: 2.5rem; width: 2.5rem; border-radius: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--alert-holder-icon-bg); color: var(--normaltext); }
.alert-global { color: var(--alert-global-color); }
.alert-time { color: var(--alert-time-color); font-size: 0.85rem; }
.alert-message { font-size: 1rem; }
.alert-delete a { opacity: 0.5; color: var(--alert-delete-color); font-size: 1.5rem; font-weight: bold; }
.alert-delete a:hover { color: var(--alert-delete-hover-color); opacity: 1; }
.alert-text-holder { margin-left: 50px; }

/* Profile */
.profile-side-info { margin: 10px 0; }
.profile-pic { max-width: 200px; }
.profile-info { margin: 4px 0; }
.profile-about-header { font-weight: bold; border: 1px dashed var(--normalline); background: #1E1E20; margin: 20px 0 20px 0; padding: 5px 10px; }

/* Links */
.link-card { background: var(--link-card-bg); color: var(--link-card-color); border: 1px solid var(--normalline); }
.link-card-bg { background-size: cover; background-repeat: no-repeat; background-position: center; height: 100px; }
.link-card-bg-holder { background: #000; border: 1px dashed var(--normalline); padding: 5px; margin: 5px 5px 0 5px; }
.link-card .card-body { font-size: 14px; padding: 5px 15px 10px 15px; position: relative; }
.link-card h4 { font-size: 18px; margin: 5px 0 3px 0px; padding: 0px; font-weight: bold; }

/* Files */
.file-single-ss-bg { border: 1px dashed var(--normalline); background-size: cover; background-repeat: no-repeat; height: 100px; width: 100%; background-position: center; }
.file-single-ss-holder { border: 1px solid var(--normalline); background: black; padding: 5px; display: block; }
.file-single-holder { background: var(--file-single-holder-bg); padding: 10px 20px; }
.file-single-holder h2 { margin: 0px 0 0 0px; }
.file-single-holder-ldesc { font-size: 15px; color: var(--normaltext); margin: 5px 0 0 0px; }
.file-single-holder-meta { color: var(--normaltext); font-size: .9rem; margin: 5px 0 0 0; line-height: 2; }
.file-single-holder-meta span { border-bottom: 1px dashed var(--normalline); margin-right: 20px; }
.file-single-holder-meta a { color: var(--normaltext); }
.file-single-holder-meta a:hover { color: var(--linkhover); }
.file-single-hr { margin: 3px 0 10px 0; }
.file-single-holder-table { font-size: 14px; color: var(--normaltext); text-align: center; }
.file-single-holder-table td { border-top: 1px solid var(--normalline); }
.file-single-holder-table tr:nth-of-type(odd) { background: #000 !important; }
.file-single-holder-table tr:nth-of-type(even) { background: transparent; }
#file-rating-star { display: block; width: 100%; }
.file-vote-img { display: inline-block; }
.file-voting-total-votes { color: var(--normaltext); font-size: 14px; margin: 5px 0 0 0; }
.file-single-description a { color: var(--alink); }
.file-single-description a:hover { color: var(--alink-hover); }

/* Files Side Bar */
.file-sidebarmenu-accordion { border-bottom: 1px dashed var(--normalline); display: block; position: relative; padding: 10px 0; }
#file-sidebarmenu h5 { font-size: 14px; margin: 0 0 0 0; }
#file-sidebarmenu a { color: var(--normaltext); }
#file-sidebarmenu a:hover { color: var(--linkhover); }
.file-sidebarmenu-fcount { color: var(--normaltext); font-size: 12px; }
.file-sidebarmenu-subcatlink { font-size: 12px; margin: 8px 0 2px 28px; }
.yellowfolder { color: #ECBC22 !important; }
.file-sidebarsubmenu { margin: 7px 0 7px 0px; padding: 0 0 7px 20px; list-style-type: none; border-bottom: 1px dashed var(--normalline); }
.file-sidebarmenu-sub-fcount { color: #ccc; font-size: 12px; }
.file-sidebarsubmenu li { display: block; position: relative; }
.file-sidebarsubmenu li a { font-size: 13px; display: block; position: relative; margin: 3px 0; }

/* Files */
.file-card { background: var(--file-card-bg); color: var(--normaltext); border: 1px solid var(--normalline); }
.file-card-bg { background-size: cover; background-repeat: no-repeat; background-position: center; height: 100px; }
.file-card-bg-holder { background: #000; border: 1px dashed var(--normalline); padding: 5px; margin: 5px 5px 0 5px; }
.file-related-files-card { background: var(--normalbg); color: var(--normaltext); border: 1px solid var(--normalline); }
.file-related-files-card .card-body { padding: 0 15px 10px 15px; }
.file-related-files-card h4 { font-size: 16px; margin: 0px; }
.file-card .card-body { font-size: 14px; padding: 5px 15px 10px 15px; }
.file-card .card-body a { bottom: 10px; right: 10px; }
.file-card h4 { font-size: 16px; margin: 0 0 3px 0px; padding: 0px; font-weight: bold; }
.file-card .card-title { }

/* File Category */
.file-cat-list { margin: 0 auto 20px auto; }
.file-cat-list-card { min-width: 18rem; max-width: 18rem; }
.file-cat-sortby .nav-pills { line-height: 1; }
.file-cat-sortby .nav-pills .nav-item { margin: 0 3px; }
.file-cat-sortby .nav-pills a { color: #343A40; }
.file-cat-sortby .nav-pills a.active, .file-cat-sortby .nav-link:hover { background-color: var(--file-cat-sortby-active-bg) !important; color: var(--normaltext) !important; }
.file-cats-sub { background: var(--file-cats-sub-bg); padding: 10px; }
.file-list-subcats a { color: var(--normaltext); }
.file-list-subcats a:hover { color: #ccc; }
.file-list-subcats .list-group-item { background: transparent; border-bottom: 1px dashed var(--normalline); }
.file-list-subcats .list-group-striped li:nth-of-type(odd) { background: transparent; }
.file-list-subcats .list-group-striped li:nth-of-type(even) { background: #F2F2F2; }

/* File Add */
.submitfile { visibility: hidden; position: absolute; }

/* Contact */
.contact-container { padding: 40px; background-color: var(--contactbg); border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.envelope-graphic { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--contact-envelope-color); }
.envelope-graphic i { font-size: 20rem; }
.contact-form .input-error { border-color: #d05a4e; }
.contact-form input, .contact-form textarea { background: var(--normalbg) !important; color: var(--normaltext) !important; border-color: var(--table-border-color) !important; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--placeholder) !important; opacity: 0.5 !important; }

/* Disqus */
#disqus_thread { background-color: #141414; color: var(--normaltext); }

/* Comments */
.comments_real_holder .img-thumbnail { border: 1px solid var(--normalline); box-shadow: none; background: #000; width: 60px; }
.comments_real_holder .media-body { margin-left: 15px; }
.comments_posting_as { display: inline; font-size: 12px; padding: 0 0 0 5px; color: var(--comments-posting-as-color); }
.comments_character_counter { float: right; color: #ccc; font-size: 12px; }
.comments_single_holder:nth-of-type(odd) { background: var(--normalbg); }
.comments_single_holder .media { padding: 10px 10px 10px 10px !important; }
.comments_single_holder .media-body h4 { font-size: 15px; font-weight: bold; }
.comments_single_holder .comments_posted_time { color: var(--comments-posted-time-color); padding-left: 5px; }
.comments_single_holder .media-body p { font-size: 14px; margin-bottom: 0px; }
.comments_single_holder .rounded-circle { width: 35px; margin-top: 5px; }
.comments_single_holder .media-body { margin-left: 15px; }
a.comments_delete { float: right; color: var(--comments-delete-color); font-weight: bold; margin: 0 6px 0 0; opacity: 0.5; font-size: 18px; }
a.comments_delete:hover { opacity: 1; }

/* Search Results */
.search-box .searchinput { background: #F9F9F9 !important; border: 0px; }
.search-box .search_sel_text, .search-box .btn-success { background: var(--search-box-sel-text-bg); color: var(--normaltext); border: 0px !important; }
.search-results-holder { border-bottom: 1px solid var(--normalline); margin-bottom: 15px; padding-bottom: 10px; }
.search-results-content { font-size: 14px; margin-top: 5px; }
.search-relevance-score { font-size: 14px; margin-top: 5px; }
.search-results-fulllink { margin-top: 10px; }
.search-results-fulllink a { font-weight: bold; font-size: 13px; color: #666 !important; }
.search-results-fulllink a:hover { color: #FFF !important; }
.search-results-title a { color: #CCC; font-weight: bold; text-decoration: none !important; }
.search-results-title a:hover { color: #FFF; text-decoration: none; }
.foundit { color: #93C763; }

/* Pagination */

/* Pagination */
.pagination li {
  border-top-color: var(--pagination-top-border);
  border-bottom-color: var(--pagination-bottom-border);
}
.pagination li:before,
.pagination .active:before,
.pagination .active ~ li:before {
  border-left-color: var(--pagination-top-border);
  border-right-color: var(--pagination-top-border);
}
.pagination a {
  color: var(--normaltext);
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
}
.pagination li.active {
  border-top-color: var(--altlink);
  border-bottom-color: var(--altlink);
  border-right-color: var(--altlink);
}
.pagination li.active:after,
.pagination li.active:before {
	border-right-color: var(--altlink);
	border-left-color: var(--altlink);	  
}

.pagination li:hover::before,
.pagination li:hover::before,
.pagination ~ li:hover::before {
  border-left-color: var(--altlink);
  border-right-color: var(--altlink);
}

.pagination li.active a { color: var(--pagination-active-color);font-size:13px;  }
.pagination li.disabled a,
.pagination li.disabled:hover a { color: var(--pagination-active-color); cursor: default;background:transparent;border:0px;line-height: 25px; }


.pagination li:hover {
  border-top-color: var(--altlink);
  border-bottom-color: var(--altlink);
  border-right-color: var(--altlink);
  border-left-color: var(--altlink);
}

.pagination li:hover a { 
	color: var(--pagination-active-color); 
}

/*
 * Basic style
 */
.pagination { text-align: center; }
.pagination ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.pagination li {
  border-right:10px solid transparent;
  border-bottom-width: 17px;
  border-top-width: 17px;
  border-style: solid; 
  transform:rotate(360deg);
  border-left: 0;
  height: 0;
  float: left;
  margin-right: 3px;
  position: relative;
}
.pagination li:before {
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  border-width: 17px 10px 17px 0;
  border-style: solid;
  position: absolute;
  content: '';
  left: -10px;
  height: 0px;
  top: -17px;
  width: 0px;
}
.pagination .active ~ li:before {
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-width: 17px 0 17px 10px;
  right: -10px;
  left: auto;
}
.pagination .active ~ li {
  border-left:10px solid transparent;
  border-right: 0;
}
.pagination .active  {
  border-right: 0;
  border-left: 0;
  
}

.pagination .active:after,
.pagination .active:before {
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-width: 17px 10px 17px 0;
  border-style: solid;
  position: absolute;
  content: '';
  height: 0px;
  width: 0px;
  top: -17px;
  left: -10px;
}
.pagination .active:after {
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-width: 17px 0 17px 10px;
  left: 100%;
}
.pagination a {
  line-height: 36px;
  margin-top: -17px;
  display: block;
  height: 34px;
  width: 30px;
}
.pagination .pprev {
  -webkit-border-radius: 20px 0 0 20px;
  -moz-border-radius: 20px 0 0 20px;
  border-radius: 20px 0 0 20px;
}
.pagination .pnext {
  -webkit-border-radius: 0 20px 20px 0;
  -moz-border-radius: 0 20px 20px 0;
  border-radius: 0 20px 20px 0;
  border-right: 0;
}
.pagination .pprev a,
.pagination .pnext a {
  text-indent: -4px;
  line-height: 31px;
  font-size: 18px;
}
.pagination .pprev a { text-indent: 4px; }
.pagination .pprev:before,
.pagination .pnext:before { content: none; }














/* Weather */
.weatherform { opacity: 0.5; }
.weatherform:hover { opacity: 1; }
.nite { color: white; }
.day { color: white; }

/* Last Updated */
.lastupdated { font-size: 15px; padding: 5px 0px; font-style: italic; }

/* Views */
.views { color: #666; font-size: 13px; text-align: right; padding: 5px 20px; }

/* Footer */
.blog-footer { color: var(--footer-color); padding: 25px 0 20px; font-size: 15px; line-height: 24px; background: rgba(0, 0, 0, .5); display: block; padding: 10px 5px; flex-shrink: 0; }
.blog-footer a { color: #999999; }
.blog-footer a:hover { text-decoration: none; color: var(--footer-a-hover-color); }
.blog-footer p:last-child { margin-bottom: 0; }
.blog-footer ul { list-style-type: none; margin: 0 0 0 2px; padding: 0; }
.blog-footer h6 { color: #ccc; font-size: 16px; text-transform: uppercase; margin-top: 5px; letter-spacing: 2px; }
.blog-footer .social-icons { text-align: right; }
.blog-footer .social-icons a { width: 30px; height: 30px; line-height: 30px; margin-left: 6px; margin-right: 0; border-radius: 100%; background-color: #33353d; }
.social-icons { padding-left: 0; margin-bottom: 0; list-style: none; }
.social-icons li { display: inline-block; margin-bottom: 4px; }
.social-icons li.title { margin-right: 15px; text-transform: uppercase; color: #96a2b2; font-weight: 700; font-size: 13px; }
.social-icons a { background-color: #eceeef; color: #818a91; font-size: 16px; display: inline-block; line-height: 44px; width: 44px; height: 44px; text-align: center; margin-right: 8px; border-radius: 100%; transition: all .2s linear; }
.social-icons a:active, .social-icons a:focus, .social-icons a:hover { color: #fff; background-color: #29aafe; }
.social-icons.size-sm a { line-height: 34px; height: 34px; width: 34px; font-size: 14px; }
.social-icons a.facebook:hover { background-color: #3b5998; }
.social-icons a.twitter:hover { background-color: #00aced; }
.social-icons a.linkedin:hover { background-color: #007bb6; }
.social-icons a.dribbble:hover { background-color: #ea4c89; }
.social-icons a.instagram:hover { background-color: #D35D33; }

/* Back to Top */
#backtotop { background-color: var(--backtotop-bg); text-align: center; border-radius: 4px; transition: background-color .3s; font-size: 20px; color: white; opacity: 0.8; display: none; width: 40px; height: 40px; position: fixed; bottom: 1px; right: 1px; margin: 0 20px 20px 0; z-index: 1000; line-height: 40px; }
#backtotop:hover { cursor: pointer; opacity: 1; }
#backtotop:active { background-color: #555; }

/* Login */
.logincard { border: 0px; background: transparent; }
.logincard-body input { background: #000; color: var(--normaltext); }
.logincard-body .input-group-text { background: #1E1E20; color: var(--normaltext); border: 0px !important; }

/* Cookie Alert */
.cookiealert { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0 !important; z-index: 999; opacity: 0; border-radius: 0; transform: translateY(100%); transition: all 500ms ease-out; color: var(--cookiealert-color); background: var(--cookiealert-bg); }
.cookiealert.show { opacity: 1; transform: translateY(0%); transition-delay: 1000ms; }
.cookiealert .acceptcookies { margin-left: 10px; vertical-align: baseline; }

/* Audio Player */
.eplayer-audio-player { display: flex; align-items: center; width: 100%; max-width: 600px; margin: 20px 0; padding: 10px 10px 15px 10px; background-color: #1f1f1f; border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); position: relative; transition: all 0.3s ease; }
.eplayer-audio-thumbnail { width: var(--thumbnail-size); height: var(--thumbnail-size); background-size: cover; background-position: center; margin-right: 15px; border-radius: var(--border-radius); }
.eplayer-audio-content { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }
.eplayer-audio-title { font-weight: bold; margin-bottom: 5px; font-size: 14px; color: var(--text-color); }
.eplayer-audio-controls-container { display: flex; align-items: center; }
.eplayer-audio-controls { cursor: pointer; font-size: 28px; color: var(--text-color); transition: color 0.3s ease; margin: 0 5px; position: relative; }
.eplayer-audio-controls:hover { color: var(--primary-color); }
.eplayer-audio-progress { flex-grow: 1; margin: 0 5px; width: 100%; max-width: calc(100% - 120px); -webkit-appearance: none; height: 6px; border-radius: 5px; background: #3b3b3b; outline: none; }
.eplayer-audio-progress::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--primary-color); border-radius: 50%; cursor: pointer; transition: background 0.3s ease; }
.eplayer-audio-progress::-webkit-slider-thumb:hover { background: #ffffff; }
.eplayer-audio-progress::-moz-range-thumb { width: 14px; height: 14px; background: #67D20F; border-radius: 50%; cursor: pointer; transition: background 0.3s ease; }
.eplayer-audio-progress::-moz-range-thumb:hover { background: #55AC0D; }
.eplayer-audio-time { min-width: 40px; text-align: center; font-weight: bold; font-size: 12px; color: var(--light-grey); }
.eplayer-volume-control { position: relative; display: flex; align-items: center; }
.eplayer-volume-slider { display: none; position: absolute; bottom: -70px; transform: rotate(-90deg); transform-origin: left bottom; background-color: #1f1f1f; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); padding: 5px; }
.eplayer-volume-slider input { -webkit-appearance: none; width: 100px; height: 6px; background: #67D20F; outline: none; border-radius: 5px; }
.eplayer-volume-slider input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: var(--primary-color); border-radius: 50%; cursor: pointer; transition: background 0.3s ease; }
.eplayer-volume-slider input::-webkit-slider-thumb:hover { background: #55AC0D; }
.eplayer-cms-label { position: absolute; bottom: 5px; right: 10px; font-size: 10px; color: var(--light-grey); padding-top: 3px; }
.eplayer-volume-control:hover .eplayer-volume-slider { display: block; }

/* MyPics */
#drop-area { border: 1px dashed var(--normalline); border-radius: 10px; padding: 20px; text-align: center; margin-top: 20px; color: var(--normaltext); }
.dragactive { border-color: #E14848; background-color: #F8D3D3; color: black !important; }
.dragfile-list-item .progress { margin-top: 0px; height: 10px; }
.dragurl-btn { margin-right: 20px; color: var(--normaltext); font-size: 13px; }
.dragdelete-btn { margin-right: 20px; color: red; cursor: pointer; font-size: 13px; }
.dragpreview-img { width: 50px; height: 50px; margin-right: 10px; border: 1px solid var(--table-border-color); }
.dragfile-list-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--normalline); }
.dragfile-details { flex-grow: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--normaltext); font-size: 13px; }

/* MyPics Gallery */
.mypics-gallery .card-body { padding: 0px !important; background: transparent; margin: 0px !important; }
.mypics-gallery .card { background: transparent; border: 0px; }
.mypics-gallery .card img { border: 2px solid var(--mypics-gallery-img-border); border-radius: 10px; }
.mypics-gallery .btn-group { margin: 8px 0 0 0; }
.mypics-gallery .btn-group .btn { margin: 0 2px; }
.mypics-gallery .gallery-card { width: 100%; max-width: 18rem; margin: auto; }
.mypics-gallery .card-img-top { height: 150px; max-height: 150px; object-fit: cover; }

/* FAQs */
.faq-list h4 { font-size: 17px; font-weight: bold; }
.faq-list li { padding: 0px 5px 8px 5px; border-bottom: 0px; }
.faq-list li a { font-size: 15px; font-weight: normal; }
.faq-list h4 { color: var(--normaltext); }
.faq-list .list-group-item { background: transparent; }
.faq-list-holder { background: var(--altbg); padding: 10px; border: 1px dashed var(--normalline); }

/* Snippets */
.snippet-desc { font-size: 14px; padding: 15px 0; }
.snippet-card { background: var(--snippet-card-bg); color: var(--normaltext); border: 1px solid var(--normalline); }
.snippet-card .blog-post-title { font-size: 20px; }
.snippet-updated-at { font-size: 11px; margin-top: 4px; }
.keywords-container { display: flex; flex-wrap: wrap; gap: 5px; }
.keywords-tag { font-size: 0.90rem; }
.keyword { display: inline-block; padding: 3px 10px; background: var(--keyword-bg); color: var(--keyword-color); font-size: 0.75rem; font-weight: 500; border-radius: 10px; letter-spacing: 0.02em; cursor: pointer; user-select: none; border: 1px solid var(--normalline); }
.keyword:hover, .keyword:hover a { background: var(--alink-hover); color: var(--darktext) !important; border-color: var(--normalline); }
.keyword a { color: var(--alink); }
.keyword a:hover { color: var(--darktext) !important; }

.warninglabel { padding: 8px 20px 0px 20px; min-height: 60px; }
.warninglabel i { font-size: 35px; float: left; margin-top: 6px; }
.warninglabel p { margin-left: 55px; padding-top: 10px; }
.warninglabel { color: var(--warninglabel-color); border: 1px dashed var(--normalline); background: var(--warninglabel-bg); }
.warninglabel i { font-size: 35px; color: var(--warninglabel-i-color); }
.warninglabel.green i { color: #49BF46 !important; }

/* Media Queries */
@media only screen and (max-width: 600px) { .blog-post-title { font-size: 20px; } .metaoutput-box { display: block; width: 100%; box-sizing: border-box; overflow: hidden; } .metaoutput-image { display: inline-block; margin: 0 auto; max-width: 100%; height: auto; } .alert-holder .icon-circle { height: 2.0rem; width: 2.0rem; } }
@media only screen and (min-width: 600px) { .blog-post-title { font-size: 20px; } .metaoutput-image { float: none !important; } }
@media only screen and (min-width: 768px) { .blog-post-title { font-size: 25px; } }
@media only screen and (min-width: 992px) { .blog-post-title { font-size: 25px; } }
@media only screen and (min-width: 1200px) { .blog-post-title { font-size: 25px; } }

/* Side Menu */
.side-menu { margin-bottom: 20px !important; padding: 10px 20px; background: var(--side-menu-bg); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; border-radius: .25rem !important; color: var(--side-menu-color); font-size: 0.9em; }
.side-menu ul { list-style-type: none; margin: 0; padding: 0; }
.side-menu ul li:after { content: ""; display: table; clear: both; }
.side-menu .badge { border: 1px solid var(--normalline); color: var(--side-menu-badge); margin-top: 2px !important; }
.side-menu ul li a { color: var(--link); display: inline-block; width: 100%; padding: 3px; border-bottom: 1px dashed var(--side-menu-list-border); }
.side-menu ul li a:hover { background: var(--side-menu-hover-bg); text-decoration: none; }
.side-menu .socialbuttons a { margin: 0 3px; }
.side-menu .list-group a { border-radius: 0px; background: transparent !important; border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; border-bottom: 1px dashed var(--normalline); color: var(--normaltext); }
.side-menu .list-group-item { background-color: transparent; color: var(--normaltext); border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; border-bottom: 1px dashed var(--normalline); transition: background-color 0.2s, color 0.2s; font-weight: 400; }
.side-menu .list-group-item:hover { background-color: var(--side-menu-hover-bg); color: var(--side-menu-hover-color); }
.side-menu .badge.bg-default { border: 1px solid var(--normalline); color: var(--side-menu-badge); font-size: 0.75rem; }
.side-menu .accordion-button { border: none !important; box-shadow: none !important; padding: 0.75rem 1rem; font-weight: 500; background-color: transparent !important; font-size: 0.45em; }
.side-menu .accordion-item { border: 1px solid var(--normalline); background-color: transparent !important; margin-top: 0.5rem; border-radius: 0 !important; }
.side-menu .accordion-body { background-color: var(--side-menu-accordion-body-bg); padding: 0.5rem 0; }
.side-menu .accordion-body .badge.bg-default { border: 1px solid var(--normalline); color: var(--side-menu-badge); font-size: 0.75rem; background: var(--normalbg); }
.side-menu .material-icons { background: linear-gradient(135deg, #f4c542, #f39c12); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;  }
.side-menu .accordion-button::after { display: none; }
.side-menu .icon-wrapper { margin-left: auto; display: flex; gap: 0.2rem; }
.side-menu .collapse-icon { display: none; }
.side-menu .accordion-button[aria-expanded="true"] .collapse-icon { display: inline; }
.side-menu .accordion-button[aria-expanded="false"] .expand-icon { display: inline; }
.side-menu .expand-icon { display:none; }
.side-menu .accordion-button, .side-menu .accordion-button.collapsed, .side-menu .accordion-button:focus, .side-menu .accordion-button:hover, .side-menu .accordion-button:active, .side-menu .accordion-button:not(.collapsed), .side-menu .accordion-button:not(.collapsed):focus, .side-menu .accordion-button:not(.collapsed):hover, .side-menu .accordion-button:not(.collapsed):active { background-color: var(--side-menu-accordion-body-bg) !important; color: var(--normaltext) !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }
.side-menu .accordion-button::after { filter: var(--invertaccordion) !important; }
.side-menu .text-muted { color: var(--text-muted) !important; opacity:1; }
.side-menu .normaltext { color: var(--normaltext); }
/* Board Theme */
.board-page { background-color: var(--board-page-bg); color: var(--board-page-color); }
.board-page .accordion-item, .board-page .accordion-body, .board-page .accordion-button, .board-page .list-group-item { background-color: var(--board-page-table-td-bg) !important; color: var(--board-page-color) !important; border: none !important; box-shadow: none !important; }
.board-page .accordion-button:not(.collapsed) { background-color: var(--board-page-accordion-bg) !important; color: var(--normaltext) !important; }
.board-page .accordion-button::after { filter: var(--invertaccordion); }
.board-page .forum-table { width: 100%; border-collapse: collapse; color: var(--board-page-color) !important; background-color: var(--board-page-table-td-bg); border-spacing: 0; }
.board-page .forum-table td { padding: 10px; vertical-align: middle; background-color: var(--board-page-table-td-bg); border-bottom: 1px solid var(--board-page-table-border); border-right: 0px solid var(--board-page-table-border); color: var(--board-page-color) !important; }
.board-page .forum-table td:last-child { border-right: none; }
.board-page .forum-table tr:last-child td { border-bottom: none; }
.board-page .forum-table .forum-icon { width: 40px; font-size: 1.5rem; color: var(--board-page-icon-color); }
.board-page .forum-table a.forum_title { font-weight: bold; }
.board-page .forum-table .forum_desc { font-size: 0.8rem; color: var(--board-page-desc-color); }
.board-page .forum-table .forum_desc a { font-weight: bold; color: var(--alink); }
.board-page .forum-table .forum_desc a:hover { color: var(--alink-hover); }
.board-page .forum-table tr:nth-child(even) td { background-color: var(--board-page-table-even-bg); }
.board-page .forum-table tr:nth-child(odd) td { background-color: var(--board-page-table-odd-bg); }
.board-page .forum-table .forum-cat-stats { width: 140px; text-align: center; color: var(--board-page-stats-color); background-color: var(--board-page-table-td-bg); font-size: 0.90rem; line-height: 1.2; }
.board-page .forum-table .forum-last-post { width: 260px; font-size: 0.80rem; color: var(--board-page-last-post-color); background-color: var(--board-page-table-td-bg); line-height: 1.2; }
.board-page .forum-table a { color: var(--board-page-a-color); text-decoration: none; }
.board-page .forum-table a:hover { color: var(--board-page-a-hover-color); text-decoration: none; }
.board-page .forum-table img.rounded-circle { border: 1px solid var(--board-page-img-border); background-color: var(--board-page-img-bg); }
.board-page .accordion.mt-4, .board-page .accordion.mt-4 .accordion-item, .board-page .accordion.mt-4 .accordion-body { background-color: var(--board-page-table-td-bg) !important; color: var(--board-page-color) !important; }
.board-page .board-stats { background-color: var(--board-page-stats-bg); padding: 10px 15px; border-radius: 6px; font-size: 0.85rem; color: var(--board-page-color); border: 1px solid var(--board-page-stats-border); }
.board-page .board-stats .stat-item { display: flex; align-items: center; gap: 4px; }
.board-page .board-stats .stat-item strong { color: var(--board-page-stats-strong-color); font-weight: 500; }
@media (max-width: 991px) { .board-page .forum-cat-stats, .board-page .forum-last-post { display: none !important; } }

/* Thread Page */
.thread-page { background-color: var(--thread-page-bg); color: var(--thread-page-color); }
.thread-page .posted-info { font-size: 0.85em; }
.thread-page .text-muted.post-stats { color: var(--thread-page-color) !important; font-size: 0.80em; }
.thread-page .post-info-right-border { border-left: 1px solid var(--normalline); }
.thread-page .topic-replies { background: var(--thread-page-topic-replies-bg); padding: 8px 20px; border-radius: 10px 10px 0 0; }
.thread-page .card { border: 0px; }
.thread-page .card.post-card { background-color: var(--thread-page-post-card-bg); border: 1px solid var(--thread-page-post-card-border); border-radius: 6px; margin-bottom: 20px; overflow: hidden; }
.thread-page .card-header { background-color: var(--thread-page-header-bg); color: var(--thread-page-header-color); font-weight: 500; padding: 10px 15px; border-bottom: 1px solid var(--thread-page-post-card-border); display: flex; justify-content: space-between; align-items: center; }
.thread-page .card-body { display: flex; padding: 15px; }
.thread-page .post-user { width: 160px; text-align: center; border-right: 1px solid var(--thread-page-post-user-border); padding-right: 15px; margin-right: 15px; }
.thread-page .post-user img { border-radius: 50%; width: 70px; height: 70px; border: 2px solid var(--thread-page-post-user-img-border); margin-bottom: 10px; }
.thread-page .post-user .username { font-weight: bold; color: var(--thread-page-post-user-username); }
.thread-page .post-user small { color: var(--thread-page-post-user-small-color); display: block; margin-top: 5px; font-size: 0.85rem; }
.thread-page .post-content { flex: 1; color: var(--thread-page-post-content-color); font-size: 0.95rem; }
.thread-page .post-content p { margin-bottom: 1rem; }
.thread-page .card-footer { background-color: var(--thread-page-footer-bg); border-top: 1px solid var(--thread-page-post-card-border); padding: 8px 15px; text-align: right; }
.thread-page .card-footer a { color: var(--thread-page-footer-a-color); margin-left: 15px; text-decoration: none; font-size: 0.9rem; }
.thread-page .card-footer a:hover { color: var(--thread-page-footer-a-hover-color); }
.thread-page .reply-box textarea { background-color: var(--thread-page-reply-textarea-bg); border: 1px solid var(--thread-page-reply-textarea-border); color: var(--thread-page-reply-textarea-color); border-radius: 4px; }
.thread-page .reply-box textarea:focus { background-color: #222; color: #fff; outline: none; box-shadow: var(--thread-page-reply-textarea-focus-shadow); }

/* Moderator Dropdown */
.moderator-dropdown .dropdown-menu { background: var(--moderator-dropdown-menu-bg); border: 1px solid var(--moderator-dropdown-menu-border); padding: 0; font-size: 0.875rem; }
.moderator-dropdown .dropdown-item { color: var(--moderator-dropdown-item-color); padding: 8px 12px; transition: background-color 0.2s ease; }
.moderator-dropdown .dropdown-item:hover, .moderator-dropdown .dropdown-item:focus { background-color: var(--moderator-dropdown-item-hover-bg); color: var(--moderator-dropdown-item-hover-color); }
.moderator-dropdown .btn-sm.btn-secondary { font-size: 0.85rem; padding: 4px 10px; background-color: var(--moderator-dropdown-btn-bg); border-color: var(--moderator-dropdown-btn-border); color: var(--moderator-dropdown-btn-color); }
.moderator-dropdown .btn-sm.btn-secondary:hover { background-color: var(--moderator-dropdown-btn-hover-bg); border-color: var(--moderator-dropdown-btn-hover-border); color: var(--moderator-dropdown-btn-hover-color); }

/* Forum Editor */
.forumeditor .codesyntax { display: block; width: 100%; padding: 1rem; background: var(--forumeditor-codesyntax-bg); border: 1px solid var(--forumeditor-codesyntax-border); border-radius: 8px; font-family: 'Fira Code', 'Consolas', 'Courier New', monospace; font-size: 0.95rem; line-height: 1.5; color: var(--forumeditor-codesyntax-color); overflow-x: auto; white-space: pre; box-shadow: var(--forumeditor-codesyntax-shadow); max-height: 300px; overflow-y: auto; }
.forumeditor .codesyntax::-webkit-scrollbar { height: 8px; }
.forumeditor .codesyntax::-webkit-scrollbar-thumb { background: var(--forumeditor-codesyntax-scrollbar-thumb); border-radius: 4px; }
.forumeditor .codesyntax::-webkit-scrollbar-thumb:hover { background: var(--forumeditor-codesyntax-scrollbar-thumb-hover); }

/* Blockquote */
.post-content blockquote, .trumbowyg-editor blockquote { background: var(--post-content-blockquote-bg); border-left: 4px solid var(--post-content-blockquote-border-left); padding: 1rem 1.2rem; margin: 1rem 0; font-style: italic; color: var(--post-content-blockquote-color); border-radius: 6px; box-shadow: var(--post-content-blockquote-shadow); }
.post-content blockquote strong, .trumbowyg-editor blockquote strong { color: var(--post-content-blockquote-strong-color); font-style: normal; }
.post-content blockquote p:last-child, .trumbowyg-editor blockquote p:last-child { margin-bottom: 0; }
@media (max-width: 576px) { .post-content blockquote, .trumbowyg-editor blockquote { padding: 0.8rem 1rem; font-size: 0.95rem; } }

/* Latest Posts */
.latest-posts { background: var(--latest-posts-bg); backdrop-filter: blur(6px); overflow: hidden; color: var(--normaltext); border-radius: 12px; border: 1px solid var(--latest-posts-border); }
.latest-posts .lp-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--latest-posts-header-border); }
.latest-posts .lp-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--latest-posts-header-color); }
.latest-posts .lp-header .lp-all { font-size: .9rem; text-decoration: none; color: var(--accent); padding: 6px 10px; border-radius: 8px; }
.latest-posts .lp-list { list-style: none; margin: 0; padding: 0; }
.latest-posts .lp-item { display: grid; grid-template-columns: 37px 1fr !important; gap: 10px !important; padding: 8px 12px !important; align-items: start; }
.latest-posts .lp-item + .lp-item { border-top: 1px solid var(--border); }
.latest-posts .avatar { width: 37px !important; height: 37px !important; border-radius: 50%; object-fit: cover; border: 2px solid rgba(34,211,238,.25); flex: 0 0 auto; }
.latest-posts .lp-body { min-width: 0; }
.latest-posts .title { margin: 0; font-size: clamp(.75rem, 2.2vw, .85rem); line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.latest-posts .title a { color: var(--latest-posts-title-color); text-decoration: none; }
.latest-posts .title a:hover { color: var(--latest-posts-title-hover-color); }
.latest-posts .latestforum_meta { display: block; margin-top: 2px; font-size: .75rem; color: var(--latest-posts-meta-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.latest-posts .latestforum_meta strong { color: var(--latest-posts-meta-strong-color); font-weight: 600; }
.latest-posts .latestforum_meta a { color: var(--alink); font-weight: bold; }
.latest-posts .latestforum_meta a:hover { color: var(--alink-hover); font-weight: bold; }
.latest-posts .pill { font-size: .70rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid rgba(148,163,184,.25); color: var(--latest-posts-pill-color); background: var(--latest-posts-pill-bg); flex-shrink: 0; }
.latest-posts .row-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.latest-posts.compact .lp-item:nth-child(even) { background-color: var(--latest-posts-even-bg); }
.latest-posts.compact .lp-item:nth-child(odd) { background-color: transparent; }

@media (max-width: 520px) { .latest-posts .lp-item { grid-template-columns: 40px 1fr; padding: 10px 12px; } .latest-posts .avatar { width: 40px; height: 40px; } .latest-posts .row-top { flex-direction: column; align-items: flex-start; gap: 4px; } .latest-posts .pill { margin-top: 2px; } .latest-posts .latestforum_meta { white-space: normal; font-size: .82rem; opacity: .95; } }
@media (min-width: 768px) { .latest-posts .lp-item { grid-template-columns: 48px 1fr; padding: 14px 16px; } .latest-posts .avatar { width: 48px; height: 48px; } .latest-posts .title { -webkit-line-clamp: 1; } }
.latest-posts .lp-empty { opacity: .85; }
.latest-posts .avatar-skeleton { width: 37px; height: 37px; border-radius: 50%; background: linear-gradient(90deg, #1f2937, #111827, #1f2937); animation: lp-shimmer 1.2s infinite; }
@keyframes lp-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .latest-posts * { transition: none !important; animation: none !important; } }
@supports(padding:max(0px)) { .latest-posts { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } }

/* Profile Page */
.profile-main-content .profile-header { position: relative; width: 100%; height: var(--profile-header-height); border-radius: 8px; overflow: visible; margin-bottom: 85px; }
.profile-main-content .profile-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.profile-main-content .profile-picture-wrapper { position: absolute; left: 20px; bottom: -55px; width: 150px; height: 150px; border-radius: 50%; border: 4px solid var(--profile-picture-border); overflow: hidden; box-shadow: var(--profile-picture-shadow); z-index: 2; }
.profile-main-content .profile-picture-img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .profile-main-content .profile-header { height: auto; margin-bottom: 30px; text-align: center; } .profile-main-content .profile-cover-img { display: none; } .profile-main-content .profile-picture-wrapper { position: relative; left: auto; bottom: auto; margin: 0 auto; width: 120px; height: 120px; } }
.role-strip { width: 100%; background: var(--normalbg); border: 1px solid var(--normalline); border-radius: 12px; padding: 12px 14px; }
.role-strip .di-icon i { font-size: 18px; line-height: 1; color: var(--accent); }
.details-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.ditem { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--normalline); background: var(--normalbg); border-radius: 12px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.ditem:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--normalline) 60%, var(--accent) 40%); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.di-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 70%), var(--normalbg); border: 1px solid var(--normalline); flex: 0 0 36px; }
.di-icon i { font-size: 18px; line-height: 1; color: var(--accent); }
.di-body { line-height: 1.15; }
.di-label { font-size: .75rem; opacity: .7; margin-bottom: .15rem; }
.di-value { font-size: .95rem; font-weight: 600; color: var(--normaltext); }
@media (min-width: 480px) { .details-grid { grid-template-columns: 1fr 1fr; } }
.profile-main-content .profile-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.profile-main-content .profile-name { font-size: 2rem; line-height: 1.1; margin: 0; }
.profile-main-content .username-hint { font-size: 1rem; line-height: 1.1; }
.profile-main-content .stat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-main-content .stat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: var(--profile-stat-chip-bg); font-size: .9rem; }
.profile-main-content .stat-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.profile-main-content .info-list { display: grid; grid-template-columns: 1fr; row-gap: .4rem; }
@media (min-width: 768px) { .profile-main-content .info-list { grid-template-columns: 1fr 1fr; column-gap: 1rem; } }
.profile-main-content .info-item b { display: inline-block; min-width: 110px; color: var(--normaltext); }
.profile-main-content .card { background: var(--profile-card-bg); color: var(--profile-card-text); }
.profile-main-content .card .text-body { color: var(--normaltext) !important; }
.profile-main-content .card-soft { border: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.profile-main-content .card-soft .card-header { background: transparent; border-bottom: 0; padding-bottom: 0; }
.profile-main-content .card-soft .card-title { margin-bottom: .25rem; }
.profile-main-content .profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.profile-main-content .profile-tabs { border-bottom: 2px solid var(--profile-tabs-border); display: flex; }
.profile-main-content .profile-tabs .nav-link { border: 1px solid var(--profile-tabs-border); border-bottom: 2px solid var(--profile-tabs-border); border-radius: 6px 6px 0 0; background: var(--profile-tabs-link-bg); color: var(--profile-tabs-link-color); padding: 0.35rem 0.75rem; font-size: 0.9rem; transition: background 0.2s, color 0.2s, z-index 0.2s; position: relative; margin-bottom: -2px; z-index: 1; }
.profile-main-content .profile-tabs .nav-link:not(.active) { margin-right: 1px; }
.profile-main-content .profile-tabs .nav-link:hover { background: var(--profile-tabs-link-hover-bg); color: var(--profile-tabs-link-hover-color); }
.profile-main-content .profile-tabs .nav-link.active { background: var(--profile-tabs-active-bg); color: var(--profile-tabs-active-color); font-weight: 500; border-color: var(--profile-tabs-active-border); z-index: 2; margin-right: 0; }
.profile-main-content .tab-content { border: 1px solid #333; border-top: none; background: var(--profile-tab-content-bg); border-radius: 0 8px 8px 8px; padding: 1rem; color: var(--normaltext); }
.profile-main-content .tab-content .text-muted { color: var(--normaltext) !important; opacity: 1; }

/* Posts Activity */
.posts-activity { color: var(--posts-activity-text); }
.posts-activity .pa-section-title { font-size: 0.95rem; font-weight: 600; color: var(--normaltext); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 .5rem 0; }
.posts-activity .pa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.posts-activity .pa-item { position: relative; border: 1px solid var(--posts-activity-border); background: var(--posts-activity-surface); padding: .9rem 1rem; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.posts-activity .pa-item:hover { border-color: color-mix(in oklab, var(--normalline) 60%, var(--accent) 40%); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.posts-activity .pa-item::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: 12px 0 0 12px; background: transparent; transition: background .12s ease; }
.posts-activity .pa-item:hover::before { background: var(--accent); }
.posts-activity .pa-title { display: inline-block; font-weight: 600; line-height: 1.25; color: var(--posts-activity-title-color); text-decoration: none; }
.posts-activity .pa-title:hover, .pa-title:focus { color: var(--posts-activity-title-hover-color); }
.posts-activity .pa-meta { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .35rem; color: var(--posts-activity-meta-color); font-size: .85rem; }
.posts-activity .pa-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: 999px; background: var(--posts-activity-chip-bg); border: 1px solid var(--posts-activity-chip-br); color: var(--posts-activity-text); line-height: 1; }
.posts-activity .pa-chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); opacity: .8; }
.posts-activity .pa-time { opacity: .9; color: var(--normaltext); font-size: .80rem; margin-top: 4px; }
.posts-activity .pa-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--posts-activity-dot-bg); opacity: .6; align-self: center; }
.posts-activity .pa-snippet { margin-top: .5rem; color: var(--posts-activity-snippet-color); opacity: .88; font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.posts-activity a { font-weight: inherit !important; }
.posts-activity a:hover { text-decoration: none !important; font-weight: inherit; }
@media (max-width: 576px) { .posts-activity .pa-item { padding: .8rem .85rem; border-radius: 10px; } .posts-activity .pa-snippet { -webkit-line-clamp: 4; } }

/* Chat Holder */
.chat-holder { height: var(--chat-height); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--chat-holder-bg); color: var(--chat-holder-text); border-radius: 12px; box-shadow: var(--chat-holder-shadow); padding: 1rem; }
.chat-holder > .row { flex: 1 1 auto; min-height: 0; }
.chat-holder [class*="col-"] { display: flex; flex-direction: column; min-height: 0; }
.chat-holder .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--chat-holder-card-bg); color: var(--chat-holder-text); border: 1px solid var(--chat-holder-normalline); }
.chat-holder .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-holder .chat-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; height: 100%; max-height: 100%; }
.chat-holder .chat-pane #chatLog { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; background: var(--chat-holder-card-bg); border: 1px solid var(--chat-holder-normalline); border-radius: 8px; padding: 1rem; scrollbar-width: thin; scrollbar-color: var(--chat-holder-scrollbar-color);min-height:320px; }
.chat-holder .chat-pane #chatLog::-webkit-scrollbar { width: 8px; }
.chat-holder .chat-pane #chatLog::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.chat-holder .chat-pane #chatLog .d-flex { background: var(--chat-holder-layer-bg); border-radius: 8px; padding: .6rem .8rem; transition: background .2s ease; }
.chat-holder .chat-pane #chatLog .d-flex:hover { background: var(--chat-holder-msg-hover-bg); }
.chat-holder .chat-pane #chatLog .username { color: var(--primary-color); font-weight: 600; }
.chat-holder .chat-pane #chatLog .text-muted { font-size: .8rem; color: var(--chat-holder-muted) !important; }
.chat-holder .chat-pane #chatForm { flex: 0 0 auto; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--chat-holder-normalline); }
.chat-holder .chat-pane #chatInput { border-radius: 8px; border: 1px solid var(--chat-holder-normalline) !important; background: var(--chat-holder-input-bg); color: var(--chat-holder-text); padding: .5rem .75rem; font-size: .95rem; }
.chat-holder .chat-pane #chatInput:focus { outline: none; border-color: var(--primary-color) !important; box-shadow: var(--chat-holder-input-focus-shadow); }
.chat-holder .chat-pane .btn.btn-primary { border-radius: 8px; background: var(--primary-color); border: none; }
.chat-holder .chat-pane .btn.btn-primary:hover { background: var(--chat-holder-primary-dark); }
.chat-holder .chat-pane .chat-meta { flex: 0 0 auto; height: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .35rem; color: var(--chat-holder-muted); font-size: .85rem; }
.chat-holder .chat-pane .chat-meta .typing { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-holder .chat-pane .chat-meta .send-hint { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 575.98px) { .chat-holder .chat-pane .chat-meta { justify-content: flex-start; } .chat-holder .chat-pane .chat-meta .send-hint { display: none; } }
.chat-holder .chat-pane { height: calc(var(--chat-height) - 60px); }
.chat-holder .nicklist-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; height: 100%; max-height: 100%; }
.chat-holder .nicklist-pane .card-title { flex: 0 0 auto; color: var(--normaltext); font-size: .9rem; }
.chat-holder .nicklist-pane #userList { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--chat-holder-layer-bg); border-radius: 8px; padding: .5rem; scrollbar-width: thin; scrollbar-color: var(--chat-holder-scrollbar-color); }
.chat-holder .nicklist-pane #userList::-webkit-scrollbar { width: 8px; }
.chat-holder .nicklist-pane #userList::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.chat-holder .nicklist-pane #userList .list-group-item { border: none; padding: .5rem; background: transparent; color: var(--chat-holder-text); }
.chat-holder .nicklist-pane #userList .list-group-item:hover { background: var(--chat-holder-nicklist-hover-bg); border-radius: 6px; }
.chat-holder #roomsColumn .card { height: 100%; background: var(--chat-holder-card-bg); border-color: var(--chat-holder-normalline); }
.chat-holder #roomsColumn #roomList .list-group-item.active { background: var(--chat-holder-room-active-bg); color: var(--chat-holder-text); border-color: transparent; }
@media (max-width: 991.98px) { .chat-holder { --chat-height: 60vh; } }
@media (prefers-reduced-motion: reduce) { .chat-holder .chat-pane #chatLog .d-flex, .chat-holder .chat-pane #chatInput, .chat-holder .nicklist-pane #userList .list-group-item { transition: none; } }
.chat-holder .msg-delete { opacity: .3; }
.chat-holder .msg-delete:hover { opacity: 1; }

/* User Context Menu */
.user-ctx-menu { position: absolute; z-index: 9999; display: none; font-size: 0.9rem; background: var(--user-ctx-menu-bg) !important; color: var(--user-ctx-menu-text); border: 1px solid var(--user-ctx-menu-border); border-radius: 0.5rem; min-width: 180px; box-shadow: var(--user-ctx-menu-shadow); }
.user-ctx-menu .dropdown-item { background: none; color: var(--user-ctx-menu-text); width: 100%; text-align: left; border: none; display: block; }
.user-ctx-menu .dropdown-item:hover { background: var(--user-ctx-menu-hover-bg); color: var(--user-ctx-menu-text); }
.user-ctx-menu .text-danger { color: var(--user-ctx-menu-danger) !important; }
.user-ctx-menu .dropdown-divider { border-color: var(--user-ctx-menu-divider); }

/* System Msg */
.system-msg { text-align: center; font-size: .7rem !important; margin: .4rem 0; color: var(--system-msg-color); opacity: 0.3; }
.system-msg .pill { display: inline-block; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--normalline); background: var(--system-msg-pill-bg); }
.system-msg.system-join { color: var(--system-msg-join-color); }
.system-msg.system-leave { color: var(--system-msg-leave-color); }
.system-msg i { margin-right: .35rem; opacity: .9; }

/* Activity */
.activity-card .text-muted { color: var(--normaltext) !important; opacity: 1; }
.activity-card a { color: var(--accent); font-weight: bold; }
.activity-card { border: 1px solid var(--normalline); border-radius: 1rem; box-shadow: var(--activity-card-shadow); transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .12s ease-out, border-color .12s ease-out; background: var(--normalbg); }
.activity-card:hover { transform: translateY(-1px); background-color: var(--activity-card-hover-bg); border-color: #323846; box-shadow: var(--activity-card-hover-shadow); }
.activity-avatar img, .activity-avatar .img-thumbnail { width: 56px; height: 56px; border-radius: .5rem; object-fit: cover; background: #0e1116; border: 1px solid #2a2f3a; }
.activity-line { font-size: .98rem; line-height: 1.5; color: #e7e9ee; }
.activity-time { font-size: .85rem; color: var(--activity-time-color); white-space: nowrap; }
.activity-divider { height: 1px; background: var(--activity-divider-bg); border: 0; opacity: 1; margin: .6rem 0 0 0; }
.activity-card i { color: var(--normaltext); }

/* Recent Activity List */
.ralist.list-group { background-color: var(--ralist-bg); border-radius: 8px; overflow: hidden; }
.ralist .list-group-item { background-color: var(--ralist-item-bg); color: var(--ralist-item-color); border-color: var(--ralist-item-border); padding: 12px 16px; transition: background-color 0.15s ease, color 0.15s ease; }
.ralist .list-group-item:hover { background-color: var(--ralist-item-hover-bg); }
.ralist .activity-line { font-size: 0.95rem; line-height: 1.4; color: var(--ralist-line-color); }
.ralist .activity-time { color: var(--ralist-time-color); }
.ralist .activity-time i { color: var(--ralist-time-i-color); margin-right: 4px; }
.ralist .list-group-item.text-muted { color: var(--ralist-empty-color); text-align: center; padding: 20px 16px; }

/* Messages */
.dm-wrap{ display:flex; gap:1rem; flex:1 1 auto; min-height:0; }
@media (max-width: 991.98px){ .dm-wrap{ flex-direction:column; } }

.dm-panel{
  background: var(--dm-card);
  border:1px solid var(--dm-border);
  border-radius: .75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  overflow:hidden;
}
.dm-panel .text-muted { opacity:1; color: var(--textmuted) !important; }

/* Left list */
.dm-left{ width: 380px; max-width:100%; display:flex; flex-direction:column; min-height:0; }
.dm-left .head{
  position:sticky; top:0; z-index:2;
  background: var(--dm-card);
  border-bottom:1px solid var(--dm-border);
  padding:.75rem .75rem;
}
.dm-search input{
  border-radius: 999px!important;
  background: var(--dm-bg);
  border:1px solid var(--dm-border);
  color: var(--textmuted) !important;
}
.dm-search input::placeholder{
  color: var(--textmuted);
  opacity:0.8;
}
/* make the list fill and scroll inside the left panel */
.dm-list{ flex:1 1 auto; min-height:0; overflow:auto; }

.dm-item{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .75rem; cursor:pointer; text-decoration:none;
  color:inherit; border-bottom:1px solid var(--dm-border);
}
.dm-item:hover{ background: var(--dm-hover); }
.dm-item.active{ background: var(--dm-accent-weak); }
.dm-avatar{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background: var(--dm-accent-weak); color: var(--dm-accent); font-weight:700;
  margin-right:10px;
}
.dm-meta{ flex:1 1 auto; min-width:0;}
.dm-meta .name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-meta .sub{ font-size:.8rem; color: var(--dm-muted); }
.dm-unread{ background: var(--dm-accent); color:#fff; font-size:.7rem; padding:.1rem .4rem; border-radius: 999px; }

/* Right chat */
.dm-right{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0; }
.dm-right .head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background: var(--dm-card);
  border-bottom:1px solid var(--dm-border);
  padding:.75rem .9rem;
}
.dm-right .head .title{ font-weight:700; }

/* Chat fills leftover space and scrolls internally */
.dm-chat{
  overflow-x:hidden;
  flex: 1 1 auto;
  min-height: 0;                 /* CRITICAL for overflow to work */
  overflow-y: auto !important;
  max-height:320px;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}

/* Day separators */
.dm-day{ text-align:center; margin: .5rem 0 1rem; }
.dm-day span{ background: var(--dm-card); border:1px solid var(--dm-border); padding:.2rem .6rem; border-radius:999px; font-size:.75rem; color: var(--dm-muted); }

/* ====== Compact bubbles + avatar top-left of first message in run ====== */
/* ====== Compact bubbles + avatar top-left of first message in run ====== */
.dm-row{ margin:.12rem 0; } /* tighter row spacing */
.dm-row.you,
.dm-row.me{ justify-content:flex-start; align-items:flex-start; }

/* base grid = [avatar 32px | bubble], only collapses when no avatar/continued */
.dm-bubble-wrap{
  display:grid;
  grid-template-columns: 32px 1fr;
  column-gap:.44rem;
  align-items:start;
  max-width:86%;
}

/* collapse reserved avatar space when no avatar or continued run */
.dm-bubble-wrap.no-avatar,
.dm-bubble-wrap.continued{
  grid-template-columns: 1fr !important;
  column-gap:0 !important;
}
.dm-bubble-wrap.no-avatar .dm-bubble,
.dm-bubble-wrap.continued .dm-bubble{
  grid-column: 1 / 2 !important;
  margin-top:.08rem;
}

/* avatar cell (top-left) */
.dm-avatar-col{
  grid-column:1 / 2; grid-row:1 / 2;
  width:32px; height:32px;
}
.dm-avatar-col img{ width:32px; height:32px; border-radius:50%; display:block;margin-left:5px; }

/* bubbles: tighter padding + line-height */
.dm-bubble{
  grid-column:2 / 3; grid-row:1 / 2;
  max-width:100%;
  padding:.48rem .98rem;
  margin:3px;
  line-height:1.22;
  border-radius:14px;
  box-shadow:0 1px 1px rgba(0,0,0,.05);
  word-wrap:break-word;
}

.dm-author-me { color: var(--dm-author-me); font-weight: bold;font-size:0.95rem; }
.dm-author-you { color: var(--dm-author-you);font-weight: bold;font-size:0.95rem; }
.dm-message { font-size: 0.85rem;margin-top:0.4rem; }
/* trim inner margins */
.dm-bubble p{ margin:0; }
.dm-bubble *:first-child{ margin-top:0; }
.dm-bubble *:last-child{ margin-bottom:0; }

/* colors + left-side subtle “tail” for both sides */
.dm-row.me .dm-bubble{ background: var(--dm-me-bg); color: var(--dm-me-fg); border-top-left-radius:6px; }
.dm-row.you .dm-bubble{ background: var(--dm-you-bg); color: var(--dm-you-fg); border-top-left-radius:6px; }

/* meta line smaller/tighter */
.dm-meta-line{ font-size:.66rem; opacity:.78; margin-top:.54rem; }
.dm-row.me .dm-meta-line{ color: var(--dm-muted); }
.dm-row.you .dm-meta-line{ color: var(--dm-muted); }

/* Group continuation: hide avatar on consecutive messages from same sender */
.dm-bubble-wrap.continued{ grid-template-columns: 0 1fr; }
.dm-bubble-wrap.continued .dm-avatar-col{ display:none; }
.dm-bubble-wrap.continued .dm-bubble{ margin-left:42px; }

/* Composer */
.dm-compose{
  position:sticky; bottom:0; z-index:2; background: var(--dm-card);
  border-top:1px solid var(--dm-border); padding:.5rem .75rem;
}
.dm-input{
  width:100%; resize:none; overflow:hidden;
  border-radius: .75rem;
  border:1px solid var(--dm-border);
  background: var(--dm-bg);
  padding:.6rem .75rem;
  color: var(--textmuted);
}
.dm-input::placeholder { color: var(--textmuted); opacity:0.3; }
.dm-actions .btn{ border-radius: .7rem; }


.dm-msg-ops{
  margin-top: .2rem;
  display: flex;
  justify-content: flex-end;   /* push links to the right */
  flex-wrap: wrap;
  gap: .5rem .6rem;            /* row/column gaps */
  font-size: .78rem;
  color: var(--dm-muted);
}
.dm-msg-ops .dm-op{
  color: var(--dm-muted);
  text-decoration: none;
}
.dm-msg-ops .dm-op:hover{
  text-decoration: underline;
}

/* Skeletons */
.skel{ animation: skel 1.3s infinite linear; background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06)); background-size: 200% 100%; }
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-item{ height:64px; }



/* ===== Friends UI (compact) ===== */

.friends-page .text-muted { color: var(--textmuted) !important; opacity:1; }
.friends-page .card-title { color:var(--normaltext); font-size:.95rem; }
.friends-page .card { background:transparent; }
.friends-page .btn-icon.danger { background:var(--normalbg) !important; color: var(--btn-danger-color); border-color: var(--btn-danger-border); }

.friends-ui { --f-gap:.75rem; }

.fbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-bottom:.75rem;
}
.fbar .fsearch{
  display:flex; align-items:center; gap:.5rem; flex:1 1 auto;
  background: var(--normalbg); border:1px solid var(--normalline);
  border-radius: 10px; padding:.4rem .6rem;
}
.fbar .fsearch i{ opacity:.6; }
.fbar .fsearch input{
  background:transparent; border:0; outline:0; color:var(--normaltext);
  width:100%;
}
.fbar .factions .btn{
  border-radius:10px; padding:.35rem .6rem; line-height:1;
}

/* grid of friend tiles */
.f-grid{
  display:grid; gap: var(--f-gap);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.f-tile{
  display:grid; grid-template-columns: 48px 1fr auto; align-items:center;
  gap:.6rem; padding:.55rem .6rem;
  border:1px solid var(--normalline); border-radius:12px;
  background: var(--altbg);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.f-tile:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--normalline) 55%, var(--accent) 45%);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

/* avatar + online dot */
.f-ava{ position:relative; width:48px; height:48px; border-radius:12px; overflow:hidden; border:1px solid #2a2a2a; }
.f-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.f-ava .dot{
  position:absolute; right:4px; bottom:4px; width:10px; height:10px; border-radius:999px;
  background:#606469; border:2px solid #111;
}
.f-ava .dot.on{ background:#22c55e; }

/* name + meta */
.f-body{ min-width:0; }
.f-name{
  display:block; color:var(--normaltext); font-weight:700; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.f-meta{
  font-size:.78rem; color:var(--textmuted); opacity:.9; margin-top:.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* icon-only actions */
.f-ops{ display:flex; gap:.35rem; }
.btn-icon{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:9px;
  background: var(--normalbg); border:1px solid var(--normalline);
  color: var(--normaltext); transition: background .15s ease, border-color .15s ease, transform .06s;
}
.btn-icon:hover{ background:#1d1f1f; border-color:#3a3b3b; color:#fff; }
.btn-icon:active{ transform: scale(.98); }
.btn-icon.success{ background: rgba(25,135,84,.15); border-color:#198747; color:#9fe1b2; }
.btn-icon.danger{ background: rgba(220,38,38,.05); border-color:#5b1d1d; color:#ffb4b4; }

/* stacked rows for requests (denser than cards) */
.f-list{ display:grid; gap:.5rem; }
.f-row{
  display:grid; grid-template-columns: 44px 1fr auto; align-items:center;
  gap:.55rem; padding:.45rem .55rem;
  border:1px solid var(--normalline); border-radius:10px; background: var(--normalbg);
}
.f-row .f-ava{ width:44px; height:44px; border-radius:10px; }
.f-row .f-name{ font-size:.95rem; }
.f-empty{
  text-align:center; opacity:.9; color:var(--textmuted); padding:1rem 0;
}

/* small badges in tab titles (consistent) */
.nav-pills .badge{ background: rgba(148,163,184,.12); color:var(--normaltext); border:1px solid var(--normalline); }

/* tiny helper for subtle separators if you want */
.f-sep{ height:1px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); opacity:.8; }

/* Friends tabs – dark theme */
.friends-tabs.nav-tabs { border-bottom: 1px solid var(--profile-tabs-border); }

.friends-tabs .nav-link{
  color: var(--profile-tabs-link-color);
  background: var(--profile-tabs-link-bg);
  border: 1px solid var(--profile-tabs-border);
  border-bottom-color: transparent;    /* so it “connects” to content */
  margin-right: .15rem;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: .35rem .75rem;
  line-height: 1.2;
}

.friends-tabs .nav-link:hover{
  color: var(--profile-tabs-link-hover-color);
  background: var(--profile-tabs-link-hover-bg);
}

.friends-tabs .nav-link.active{
  color: var(--profile-tabs-active-color);
  background: var(--profile-tabs-active-bg);
  border-color: var(--profile-tabs-border);
  border-bottom-color: transparent;
  font-weight: 500;
  position: relative;
  z-index: 2; /* sit above tab-content border */
}

/* Content box that attaches to the tabs */
.tabs-bordered{
  border: 1px solid var(--profile-tabs-border);
  border-top: none;
  background: var(--profile-tab-content-bg);
  border-radius: 0 8px 8px 8px;
  padding: 1rem;
  color: var(--normaltext);
}

/* Keep your small pill counts consistent */
.friends-tabs .nav-link { line-height: 1.1; } /* optional */
.friends-tabs .badge{
  background: var(--altbg);
  color: var(--normaltext);
  border: 1px solid var(--normalline);
  font-size: .7rem;
  position: relative;
  top: -2px;              /* raise it a hair */
  margin-left: .35rem;    /* spacing from label */
  padding: .12rem .35rem; /* keep it readable at .5rem */
}
/* Wider friend tiles ONLY (no tab size changes) */
.friends-page .f-grid{
  /* bump the minimum card width so each tile gets more room */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* optionally scale a bit wider on large/ultra-wide screens */
@media (min-width: 1200px){
  .friends-page .f-grid{
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}
@media (min-width: 1600px){
  .friends-page .f-grid{
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}


#editor .trumbowyg-box {
  display: flex;
  flex-direction: column;
  height: 100%;           /* Make the box match your wrapper's height */
}

#editor .trumbowyg-editor-box {
  flex: 1 1 auto;         /* Take the remaining space under the toolbar */
  min-height: 0;          /* IMPORTANT: allow flex child to shrink/expand */
}

#editor .trumbowyg-editor {
  height: 100%;
  overflow: auto;         /* Scroll inside editor if content overflows */
}

.trumbowyg-font-family { color: var(--trumbowyg-font-family); }

.ad-slot .adsbygoogle{width:100%}
.adbox.placeholder{
  min-height:140px;
  background:repeating-linear-gradient(45deg,#f6f7f9,#f6f7f9 10px,#eceef1 10px,#eceef1 20px);
}

.ad-slot[data-slot="sidebar_banner"]{
  max-width: 336px;        /* 300–336px are common sidebar widths */
  margin-left: auto;
  margin-right: auto;      /* centers the whole slot */
}

.ad-slot[data-slot="sidebar_banner"] .adsbygoogle{
  display: block;
  width: 100%;             /* fills the constrained slot */
}

.steamprofile {
  color: var(--normaltext);
}
.steamprofile h6 { color: var(--normaltext); }
.steamprofile .steam-card.card {
  width: 100%; /* full width */
  border-radius: 1rem;
  background: var(--normalbg);
  border: 1px solid var(--normalline);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;
}

.steamprofile .steam-divider { border: 1px solid var(--altline) !important;   }

.steamprofile .avatar {
  width: 100px;
  height: 100px;
  border-radius: 1rem;
  object-fit: cover;
  border: 2px solid var(--normalline);
}

.steamprofile .muted { color: var(--text-muted) !important; opacity: 1 !important; }

.steamprofile .badge-chip {
  border-radius: 999px;
  padding: .35rem .75rem;
  border: 1px solid var(--normalline);

  color: var(--normaltext);
}
.steamprofile .badge-chipb {
  border-radius: 999px;
  padding: .35rem .75rem;



}



.steamprofile .tile {
  border: 1px solid var(--normalline);
  background: var(--normalbg);
  border-radius: .75rem;
  padding: 1rem;
  text-align: center;
  height: 100%;
  transition: transform .15s ease;
}
.steamprofile .tile:hover {  }
.steamprofile .tile .val { font-weight: 700; font-size: 1.3rem; color: var(--accent); }
.steamprofile .tile .lab { font-size: .85rem; color: var(--text-muted); }

.steamprofile .game {
  border: 1px solid var(--normalline);
  background: var(--normalbg);
  border-radius: .75rem;
  padding: .6rem;
  display: flex;
  gap: .8rem;
  align-items: center;
  transition: transform .15s ease;
}
.steamprofile .game:hover {  }
.steamprofile .game img {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: .5rem;
  border: 1px solid var(--normalline);
}



.steamprofile .game-icon {
  width: 32px; height: 32px; border-radius: .35rem;
  object-fit: cover; border: 1px solid var(--normalline);
  display:inline-block;
}
.steamprofile .game-icon--ph {
  display:flex; align-items:center; justify-content:center;
  background: var(--normalbg);
}

.steamprofile .nowplay {
  border: 1px solid var(--normalline);
  background: var(--normalbg);
  border-radius: .75rem;
  padding: .75rem;
}
.steamprofile .now-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: .5rem;
  border: 1px solid var(--normalline);
}
.steamprofile .game-icon{
  width:32px; height:32px; object-fit:cover;
  border-radius:.35rem; border:1px solid var(--normalline);
}
.steamprofile .game-icon--ph{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:.35rem; border:1px solid var(--normalline); background:var(--normalbg);
}
.steamprofile a.btn { color:white !important; }

/* make card a positioning context */
.steamprofile .steam-card.card { position: relative; }

/* add a little extra bottom padding so the chip never overlaps content */
.steamprofile .steam-card .card-body { padding-bottom: 2.25rem; }

/* bottom-right chip */
.steamprofile .last-updated {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  color: var(--normaltext);      /* matches .muted */
  font-size: .875rem;  /* small */
  opacity: .95;
}

  .cmplite-wrap {
    position: fixed;
    inset: 0 auto auto 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    display: none;
    animation: cmplite-fade 0.4s ease-in-out;
  }

  @keyframes cmplite-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .cmplite {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #0f0f0f;
    color: #f5f5f5;
    padding: 1rem 1.25rem;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.95rem;
  }

  @media (min-width: 768px) {
    .cmplite {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .cmplite p {
    margin: 0;
    flex: 1;
    line-height: 1.5;
    color: #e5e5e5;
  }

  .cmplite a {
    color: #93c5fd;
    text-decoration: none;
  }

  .cmplite-btns {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .cmplite .btn {
    border: 0;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }

  .cmplite .btn.primary {
    background: #2563eb;
    color: #fff;
  }
  .cmplite .btn.primary:hover {
    background: #1e40af;
  }

  .cmplite .btn.secondary {
    background: #1f2937;
    color: #f3f4f6;
    border: 1px solid #374151;
  }
  .cmplite .btn.secondary:hover {
    background: #374151;
  }
  
  @media (max-width: 767.98px) {
	.eplayer-audio-thumbnail {
		display: none;
	}
	.eplayer-audio-player { padding-bottom:20px; }
}