/* vim:set tabstop=8 softtabstop=8 shiftwidth=8 noexpandtab: */

/**
 *
 * LICENSE: GNU Affero General Public License, version 3 (AGPL-3.0-or-later)
 * Copyright Ampache.org, 2001-2024
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

/* --------------------------
   General style rules
   -------------------------- */

:root {
    color-scheme: dark;
    accent-color: #00ff88;
}

body {
    color: #fff;
    background-color: #0a141e;
    height: 90%;
}

.error {
    color: #c33;
}

a {
    color: #00ff88;
}

a:hover {
    color: #00d4ff;
}

hr {
    border-top-color: #eee;
}

input[type=password],
input[type=text],
input[type=checkbox],
input[type=radio],
input[type=url],
input[type=year],
select,
textarea {
    background-color: hsl(0, 0%, 10%);
    background-image: linear-gradient(to top, hsl(0, 0%, 12%), hsl(0, 0%, 8%));
    border-color: hsl(0, 0%, 30%);
}

button,
input[type=button],
input[type=submit],
.editdialogstyle.ui-dialog .ui-dialog-buttonset button {
    background-image: linear-gradient(to top, #00ff88, #00b368);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #fff;
}

button:hover,
button:focus,
input[type=button]:hover,
input[type=button]:focus,
input[type=submit]:hover,
input[type=submit]:focus,
.editdialogstyle.ui-dialog .ui-dialog-buttonset button:hover {
    background-color: #00b368;
}

button:focus:active,
input[type=button]:focus:active,
input[type=submit]:focus:active {
    box-shadow: inset 0 0 3px #05080d, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.edit_dialog_content input[type=text],
.edit_dialog_content select {
    color: #fff;
}

.edit_dialog_content input:focus,
.edit_dialog_content select:focus {
    color: #555;
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #00ff88;
}

.playlistdialogstyle.ui-dialog .ui-dialog-content,
.sharedialogstyle.ui-dialog .ui-dialog-content,
.playlistdialogstyle.ui-widget-content a,
.editdialogstyle.ui-dialog.ui-widget-content a,
.broadcastsdialogstyle.ui-widget-content a,
.sharedialogstyle.ui-widget-content a {
    background-color: #0a141e;
    color: #999;
}

.editdialogstyle.ui-dialog.ui-widget-content a,
.editdialogstyle.ui-dialog.ui-widget-content a:hover {
    background-color: unset;
}

.editdialogstyle.ui-dialog .ui-dialog-titlebar,
.editdialogstyle.ui-dialog.ui-widget-content a:hover,
.playlistdialogstyle.ui-widget-content a:hover,
.broadcastsdialogstyle.ui-widget-content a:hover,
.sharedialogstyle.ui-widget-content a:hover {
    color: #fff;
}

.ui-icon-close {
    background-color: #f0f0f0;
}

/* --------------------------
   Main
   -------------------------- */
#ajax-loading {
    color: #00ff88;
    background-image: url('../images/ajax-loader.gif');
}

/* --------------------------
   Header
   -------------------------- */
#header {
    background-color: #05080d;
    border-bottom: 2px solid #0c3a28;
    box-shadow: 0 18px 18px rgba(30, 30, 30, 0.7);
}

#sb_Subsearch input[type=text]:focus {
    border-color: #00ff88;
}

/* --------------------------
   Login
   -------------------------- */
#loginPage {
    background-color: #05080d;
}

#loginPage #maincontainer { /* , #registerPage #maincontainer */
    background-color: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
}

#loginPage #loginbox {
    color: #999;
}

#loginPage #loginbox div,
#registerPage #registerbox div {
    text-shadow: 0 1px 0 #05080d;
    color: #999;
}

#loginPage #loginbox #usernamefield input:focus,
#loginPage #loginbox #emailfield input:focus,
#loginPage #loginbox #passwordfield input:focus {
    border-color: #00ff88;
    box-shadow: 0 0 10px #9ecaed;
}

#loginPage #loginbox #remembermefield {
    color: #eee;
}

.formValidation input {
    color: #fff;
}

#loginPage span.error {
    background: #f99;
    border-color: #c33;
    color: #900;
}

#loginPage #footer {
    color: #888;
}

#loginPage #footer a {
    color: #555;
}

#loginPage #footer #donate {
    color: #00ff88;
}

/* --------------------------
   Sidebar
   -------------------------- */
#sidebar {
    color: #999;
}

#sidebar-header {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #999;
}

#sidebar-header:hover {
    color: #00d4ff;
}

#sidebar_home,
#sidebar_localplay,
#sidebar_preferences,
#sidebar_admin,
#sidebar_logout {
    color: #fff;
}

#sidebar_home:hover,
#sidebar_localplay:hover,
#sidebar_preferences:hover,
#sidebar_admin:hover,
#sidebar_logout:hover {
    color: #00d4ff;
}

#sidebar-content,
#sidebar-content-light,
#sidebar-light {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    background-color: #0a141e;
}

#sidebar-light-default {
    border-color: hsl(0, 0%, 30%);
    background: #0a141e;
}
/* Tabs content */
#sidebar-page {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
}

#sidebar-tabs .active > a {
    color: #00ff88;
}

#sidebar-tabs .sb2 li h4 {
    color: #fff;
    background-color: #122130;
    border-bottom-color: #05080d;
    box-shadow: 0 1px 0 #122130, inset 0 1px 1px #05080d;
}

#sidebar-tabs .sb2 li ul li a {
    color: #999;
}

#sidebar-tabs .sb2 li ul li a:hover {
    color: #fff;
}

#sidebar-tabs .sb2 #browse_filters #multi_alpha_filter {
    border-color: #bbb;
}

.topmenu_item span {
    color: #00ff88;
}

.topmenu_item:hover {
    border: 2px solid #00ff88;
}

.image-topmenu-album,
.image-topmenu-artist,
.image-topmenu-favorite,
.image-topmenu-home,
.image-topmenu-logout,
.image-topmenu-playlist,
.image-topmenu-radio,
.image-topmenu-smartlist,
.image-topmenu-tagcloud,
.image-topmenu-upload {
  fill: #00ff88;
}

.image-topmenu-album:hover,
.image-topmenu-artist:hover,
.image-topmenu-favorite:hover,
.image-topmenu-home:hover,
.image-topmenu-logout:hover,
.image-topmenu-playlist:hover,
.image-topmenu-radio:hover,
.image-topmenu-smartlist:hover,
.image-topmenu-tagcloud:hover,
.image-topmenu-upload:hover {
  fill: #00d4ff;
}

/* Localplay */
.active_instance {
    border-color: #fff;
}

/* --------------------------
   Rightbar
   -------------------------- */
#rightbar {
    background-color: #0a141e;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #fff;
}

#rightbar #rb_action {
    color: #00ff88;
}

#rightbar #rb_current_playlist li {
    color: #fff;
}

#rightbar #rb_current_playlist li a {
    color: #eee;
}

#rightbar #rb_current_playlist li a:hover,
#rightbar #rb_current_playlist li a:focus {
    color: #fff;
    background-color: #00a85f;
    background-image: linear-gradient(to top, #00b368, #008f52);
}

#rightbar .submenu {
    background-color: #0a141e;
    border-color: silver;
}

#rightbar .submenu a {
    border-bottom-color: #ddd;
    color: #eee;
}

#rightbar .submenu a:hover {
    color: #00ff88;
}

/* --------------------------
   Content
   -------------------------- */
#content {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #fff;
}

.list-header,
.list-header a {
    color: #999;
}

.list-header a:hover,
.list-header a:focus {
    color: #fff;
}

span.page-nb {
    color: #00ff88;
}

table.tabledata {
    color: #eee;
}

span.page-text,
table.tabledata a {
    color: #eee;
}

#catalog_type_fields table.tabledata a {
    color: #00ff88;
}

table.tabledata a:hover,
table.tabledata a:focus {
    color: #00d4ff;
}

table.tabledata thead .th-top,
table.tabledata tfoot .th-bottom {
    background-color: #122130;
    box-shadow: 0 1px 0 #122130, inset 0 1px 1px #05080d;
}

table.tabledata thead .th-top {
    border-bottom-color: #05080d;
}

table.tabledata tfoot .th-bottom {
    border-top-color: #05080d;
}

table.tabledata th a {
    color: #00ff88;
}

table.tabledata tr:hover,
table.tabledata tr:focus {
    background-color: #00a85f;
    background-image: linear-gradient(to top, #00b368, #008f52);
}

table.tabledata .th-top:hover,
table.tabledata .th-bottom:hover,
table.tabledata .th-top:focus,
table.tabledata .th-bottom:focus {
    color: #fff;
    background-color: #122130;
}

table.striped-rows tbody tr:nth-child(odd),
ul.striped-rows > li:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.1);
}

table.tabledata tbody .cel_cover img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

table.tabledata tbody .cel_cover img:hover {
    border-color: #00ff88;
}

input:invalid {
    border: 4px solid red;
}

/* --------------------------
   Content (info-box)
   -------------------------- */
.random_selection .random_album .art_album img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.random_selection .random_video .art_album img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.random_selection .random_album .art_album img:hover {
    border-color: #00ff88;
}

#content .missing {
    background-image: url('../images/missing.png');
}

/* --------------------------
    Content (now playing)
   -------------------------- */
#now_playing .cel_albumart img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

#now_playing .cel_lyrics a:hover {
    color: #00d4ff;
}

/* --------------------------
    Content (Tag cloud)
   -------------------------- */
span.fatalerror {
    color: #b388ff;
}

.box-content #tag_filter .tag_button {
    color: #fff;
}

.box-content #tag_filter .tag_button span:hover {
    background-color: #00a85f;
    background-image: linear-gradient(to top, #00b368, #008f52);
}

/* --------------------------
    Content (information-actions)
   -------------------------- */
.item_properties {
    color: #999;
}

.item_art .item_art_play .item_art_play_icon,
.item_art .item_art_play_150 .item_art_play_icon {
    background-image: url('../images/videoplay.png');
}

.item_art .item_art_actions {
    background-color: rgba(0, 0, 0, 0.6);
}

.item_art img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.item_art:hover {
    color: #00ff88;
}

#information_actions ul li {
    color: #999;
}

#information_actions a:hover,
#information_actions li:hover {
    color: #fff;
}

/* ------------------------
    Styles for ratings / user flags
   ------------------------ */
.star-rating .global-rating {
    color: #999;
}

/* --------------------------
   Content (Track view)
   -------------------------- */
dl.media_details dt {
    color: #b388ff;
}

/* --------------------------
   Footer
   -------------------------- */
#footer a:hover {
    color: #00d4ff;
}

#ampache_link {
    color: #555;
}

/* --------------------------
   Web Player
   -------------------------- */
div.jp-audio,
div.jp-audio-stream,
div.jp-video {
    color: #999;
    border: 1px solid #0a141e;
}

div.jp-video div.jp-interface {
    border-top: 1px solid #0a141e;
}

div.jp-title,
div.jp-playlist {
    background-color: #0d1a26;
    border-top: 1px solid #0a141e;
}

.jp-no-solution {
    background: #05080d url("../../../lib/modules/jquery-jplayer-midnight-black/jplayer.midnight.black.interface.png") repeat-x;
    border-top: 1px solid #0a141e;
}

#webplayer {
    background-color: #0a141e !important;
}

div.playing_title a,
div.playing_artist a,
div.playing_lyrics a {
    color: #eee;
}

div.jp-interface {
    background-color: #0a141e;
}

div.jp-playlist li {
    border-bottom: 1px solid #05080d;
}

.jp-type-playlist .jp-playlist a {
    color: #fff;
}

.jp-type-playlist .jp-playlist a:hover,
.jp-type-playlist .jp-playlist a:active,
.jp-type-playlist .jp-playlist a:focus {
    color: #00ff88;
}

.jp-type-playlist .jp-playlist a.jp-playlist-current {
    color: #00ff88;
}

/* ------------------------
   Wunderbaum tree
   ------------------------ */
.wunderbaum {
    --wb-node-text-color: #fff;
    --wb-background-color: #0a141e;
    --wb-alternate-row-color: #292929;
    --wb-alternate-row-color-hover: var(--wb-hover-color);
    --wb-focus-border-color: var(--wb-active-color);
    --wb-drop-source-color: var(--wb-hover-color);
    --wb-drop-target-color: var(--wb-active-color);
    --wb-hover-color: hsl(152, 100%, 18%);
    --wb-active-color: hsl(152, 100%, 42%);
    --wb-active-hover-color: var(--wb-active-color);
    --wb-active-color-grayscale: var(--wb-active-color);
    --wb-active-hover-color-grayscale: var(--wb-active-color);
}

/* --------------------------
   Other
   -------------------------- */
.jscroll-next {
    border-color: #ccc;
    background-color: #eee;
    color: #999;
}

.followbtn {
    background-color: #363f4a;
}

.missing_album {
    color: #bbb !important;
}

.user_online {
    background: #0f0;
}

.user_offline {
    background: #7f0000;
}

.user_disabled {
    background: #ccc;
}

.list-header-navmenu-border {
    border-color: #122130;
}

span.item-count,
span.item-duration,
span.query-count {
    color: #999;
}

a.option-list:hover {
    border-color: #122130;
}

.editdialogstyle.ui-dialog {
    background-image: url('../../../images/background.png') !important;
}

#tabs li a {
    color: #00ff88;
}

#tabs li a:hover {
    color: #00d4ff;
}

#tabs li.tab_active a {
    color: #fff;
}

/* ============================================================
   LENO // SPOOK flavour — neon ghost palette overrides
   Mirrors leno.nz: ghost-green #00ff88, ghost-blue #00d4ff,
   ghost-purple #b388ff, deep navy bg, Orbitron + Share Tech Mono.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

:root {
    color-scheme: dark;
    accent-color: #00ff88;
    --ghost-green: #00ff88;
    --ghost-blue: #00d4ff;
    --ghost-purple: #b388ff;
}

/* Monospace body, like the leno dashboard */
body,
table.tabledata,
input, select, textarea, button {
    font-family: 'Share Tech Mono', 'DejaVuSansCondensed', monospace;
}

/* Leno_Sky backdrop (Milky Way) with a dark overlay for readability */
body {
    background-color: #05080d;
    background-image:
        linear-gradient(180deg, rgba(5, 8, 13, 0.80) 0%, rgba(8, 18, 36, 0.88) 100%),
        url('../images/Leno_Sky.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* Orbitron + neon glow on headings / titles */
#header h1, .site-title, .list-header, h1, h2, h3,
table.tabledata thead .th-top, #sidebar-tabs .sb2 li h4 {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

/* Header gets a green glow underline */
#header {
    border-bottom: 1px solid rgba(0, 255, 136, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(0, 255, 136, 0.25) !important;
}

/* Links glow softly on hover */
a { transition: color .2s ease, text-shadow .2s ease; }
a:hover { text-shadow: 0 0 8px rgba(0, 212, 255, 0.6); }

/* Buttons: neon green gradient with glow */
button,
input[type=button],
input[type=submit],
.editdialogstyle.ui-dialog .ui-dialog-buttonset button {
    background-image: linear-gradient(to top, #00b368, #00ff88) !important;
    color: #05140c !important;
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
button:hover,
input[type=button]:hover,
input[type=submit]:hover {
    background-image: linear-gradient(to top, #00d4ff, #66f0ff) !important;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.55) !important;
}

/* Cards / panels: glassy navy with green edge */
#content, #sidebar-content, #sidebar-content-light, #sidebar-page,
#rightbar, #sidebar-header, div.jp-title, div.jp-playlist {
    border: 1px solid rgba(0, 255, 136, 0.18) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Selected / active rows glow green instead of orange */
table.tabledata tr:hover,
table.tabledata tr:focus,
#rightbar #rb_current_playlist li a:hover,
.box-content #tag_filter .tag_button span:hover {
    background-image: linear-gradient(to top, #00b368, #00d4ff) !important;
    color: #05140c !important;
}

/* Online dot in ghost green with glow */
.user_online {
    background: #00ff88 !important;
    box-shadow: 0 0 8px #00ff88;
}

/* Scrollbars in ghost green (webkit) */
* { scrollbar-color: #00ff88 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #00ff88; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   NERFSCRIPTS-style login — compact terminal card, mirrors
   nerfscripts.leno.nz (small ghost on top, gradient wordmark,
   uppercase labels, roomy translucent fields). Cures the
   "very full" feel of the stock Ampache login.
   ============================================================ */

/* Card body text: light, no glow */
#loginPage #loginbox,
#loginPage #loginbox div,
#registerPage #registerbox div {
    color: #cdd9e4 !important;
    text-shadow: none !important;
}

/* Small uppercase grey labels */
#loginPage .loginfield label,
#loginPage label {
    display: block;
    color: #9fb3c8 !important;
    font-size: .78rem !important;
    letter-spacing: 1px;
    margin-bottom: 7px;
    text-transform: uppercase;
    text-shadow: none !important;
}

/* Muted footer, ghost-blue links — no glow */
#loginPage #footer {
    color: #7f95a8 !important;
    text-shadow: none !important;
    font-size: .8rem;
}
#loginPage #footer a {
    color: #00d4ff !important;
    text-shadow: none !important;
}

/* --------------------------------------------------------------
   Glowing form fields — identical on mobile & desktop.
   appearance:none stops iOS/Android/mobile-Firefox from forcing
   their native flat-grey controls (the cause of the mismatch).
   -------------------------------------------------------------- */
input[type=password],
input[type=text],
input[type=email],
input[type=url],
input[type=search],
input[type=number],
input[type=year],
textarea {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #0a141e !important;
    background-image: none !important;
    border: 1px solid rgba(0, 255, 136, 0.35) !important;
    border-radius: 7px !important;
    color: #d8fff0 !important;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.15) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

input[type=password]:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=search]:focus,
textarea:focus,
#loginPage #loginbox #usernamefield input:focus,
#loginPage #loginbox #emailfield input:focus,
#loginPage #loginbox #passwordfield input:focus {
    border-color: #00ff88 !important;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.6) !important;
    outline: none !important;
}

/* Soft ghost-green placeholder text */
::placeholder { color: rgba(216, 255, 240, 0.45) !important; opacity: 1; }

/* Kill the white/grey autofill box browsers paint over inputs
   (most visible on mobile) and keep the dark glowing field */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #d8fff0 !important;
    -webkit-box-shadow: 0 0 0 1000px #0a141e inset, 0 0 12px rgba(0, 255, 136, 0.45) !important;
    caret-color: #00ff88 !important;
    border: 1px solid #00ff88 !important;
}

/* Compact glassy card, centered (mirrors nerf .login-box / .card) */
#loginPage #maincontainer {
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
    margin: auto !important;
    padding: 28px 28px 22px !important;
    background: rgba(10, 20, 30, 0.85) !important;
    border: 1px solid rgba(0, 255, 136, 0.30) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 28px rgba(0, 255, 136, 0.12) !important;
    backdrop-filter: blur(10px);
}
#loginPage #loginbox { max-width: 100% !important; margin: 0 !important; }

/* Site title shown as a green→blue gradient Orbitron wordmark */
#loginPage #loginbox h2 {
    display: block !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(1.05rem, 5vw, 1.5rem);
    letter-spacing: 2px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: break-word;
    margin: 4px 0 20px;
    background: linear-gradient(90deg, #00ff88, #00d4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
}

/* Tighter field rhythm (stock was 18px text + 15px padding = "very full") */
#loginPage #loginbox div { font-size: 1rem !important; line-height: 1.4 !important; }
#loginPage .loginfield { padding: 7px 0 !important; }

/* Roomy nerf-style inputs */
#loginPage .loginfield input[type=text],
#loginPage .loginfield input[type=password] {
    padding: 12px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    font-size: 1rem !important;
}

/* Remember-me on its own row, not floated against the button */
#loginPage #loginbox #remembermefield {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9fb3c8 !important;
    text-shadow: none !important;
    margin: 4px 0 6px;
}
#loginPage #loginbox #remembermefield label { margin: 0 !important; }
#loginPage #loginbox #remembermefield input { width: auto !important; }

/* Full-width translucent "Login" button (nerf .btn-go) */
#loginPage #loginbutton {
    width: 100%;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    background: rgba(0, 255, 136, 0.10) !important;
    border: 1px solid rgba(0, 255, 136, 0.5) !important;
    color: #00ff88 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 700;
    letter-spacing: 1px;
}
#loginPage #loginbutton:hover {
    background: rgba(0, 255, 136, 0.20) !important;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.35) !important;
}

#loginPage .loginoptions a { font-size: .85rem; }

/* Small glowing ghost at the TOP — desktop (#header) and mobile (#mobileheader) */
#loginPage #header,
#loginPage #mobileheader {
    height: auto !important;
    width: auto !important;
    padding: 0 0 4px !important;
    margin: 0 auto 4px !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#loginPage #logo {
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
    height: auto !important;
}
#loginPage #logo img {
    height: 56px !important;
    width: 56px !important;
    filter: drop-shadow(0 0 12px rgba(0, 255, 136, 0.55));
}