/*
  Sternpower Theme (refined)
  Goal: closer to sternpower.eu (cleaner surfaces, consistent accents)
  Notes:
  - Keep the signature gradient mainly on header/footer.
  - Use calmer dark-teal surfaces for chat/panels.
*/

:root{
  --sp-primary:#158e9f;      /* turquoise */
  --sp-accent:#d3745d;       /* coral */
  --sp-bg:#07161b;           /* deep background */
  --sp-surface:#0f2730;      /* panels */
  --sp-surface2:#12323d;     /* raised panels */
  --sp-border:rgba(255,255,255,0.08);
  --sp-border-strong:rgba(255,255,255,0.12);
  --sp-text:#eaf6f7;
  --sp-muted:rgba(234,246,247,0.72);
  --sp-shadow:0 1px 3px rgba(0,0,0,0.45);

  /* Signature Sternpower gradient (used sparingly) */
  --sp-grad:linear-gradient(to right,
    #0e566d 0%,
    #1bb7c4 22%,
    #d3745d 55%,
    #6fa4a2 78%,
    #22d0e0 100%
  );
}

/* general colors */
a{ color: var(--sp-primary); }
a:hover{ color: #22d0e0; }

body{
  color: var(--sp-text);
  background: var(--sp-bg);
}

button{ background:transparent; color:var(--sp-text); }

input, textarea, .post_input_container{
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text);
  background: rgba(0,0,0,0.28);
}
input:focus, textarea:focus{
  outline: none;
  border-color: rgba(27,183,196,0.55) !important;
  box-shadow: 0 0 0 2px rgba(21,142,159,0.25);
}

.setdef{ color:var(--sp-text); }

/* cookie box */
.cookie_wrap{ background: rgba(0,0,0,0.55); color:var(--sp-text); border:1px solid var(--sp-border); }

/* item with background no effect */
.bback{ background: rgba(255,255,255,0.04); }

/* item with background no effect with border */
.bbackb{ background: rgba(255,255,255,0.04); border:1px solid var(--sp-border); }

/* item with no background and hover effect */
.bhover:hover{ background: rgba(255,255,255,0.05); }

/* item with background and hover effect */
.bbackhover{ background: rgba(255,255,255,0.04); }
.bbackhover:hover{ background: rgba(255,255,255,0.06); }

/* item width background and hover effect with a border */
.bbackhoverb{ background: rgba(255,255,255,0.04); border:1px solid transparent; }
.bbackhoverb:hover{ background: rgba(255,255,255,0.06); border:1px solid var(--sp-border); }

/* posts */
.post_content{
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 10px 0;
  word-wrap: break-word;
  color: var(--sp-text);
}

.emo_content_priv{
  width: 100%;
  height: 160px;
  overflow: hidden;
  overflow-y: auto;
  padding: 5px;
  background: var(--sp-surface2);
  border-top: 1px solid var(--sp-border);
}

/* item with no background with line separator and hover effect */
.blisting{ border-bottom: 1px solid rgba(255,255,255,0.04); }
.blisting:hover{ background: rgba(255,255,255,0.05); }

/* item with no background with line separator */
.blist{ border-bottom: 1px solid rgba(255,255,255,0.04); }

/* private panel top */
.back_ptop{ background: rgba(211,116,93,0.95); color: #fff; }

/* page menu & page sub menu */
.bpmenu:hover{ background: rgba(255,255,255,0.06); }
.bsub{ background: rgba(0,0,0,0.18); }
.bsub:hover{ background: rgba(255,255,255,0.05); }

/* sub menus for card, logs, wall, news */
.bmenu, .submenu{ border-bottom:1px solid rgba(255,255,255,0.04); }
.bmenu:hover, .submenu:hover{ background: rgba(255,255,255,0.05); }

/* box shadow */
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed{ box-shadow: var(--sp-shadow); }

/* main item selected for panel and box */
.bselected{ background: rgba(21,142,159,0.16); }

/* reg menu selected item */
.rselected{ background: rgba(21,142,159,0.16); }

/* page selected */
.pselected{ color: var(--sp-primary); }

/* current item selected selected */
.cselected, .liked{ background: rgba(255,255,255,0.06); }

/* paginate item selected */
.pag_btn{ background: rgba(255,255,255,0.06); }
.pagselected, .pag_btn:hover{ background: rgba(255,255,255,0.10); }

/* count and gold tag */
.gtag{ background: rgba(0,0,0,0.35); border:1px solid var(--sp-border); }

/* border color for separator and items border */
.bborder{ border-bottom:1px solid var(--sp-border); }
.tborder{ border-top:1px solid var(--sp-border); }
.lborder, .ppanel{border-left:1px solid var(--sp-border);}
.rborder{ border-right:1px solid var(--sp-border); }
.fborder{ border:1px solid var(--sp-border); }

/* float top color */
.float_top{ border-bottom:1px solid var(--sp-border); }
.float_ctop{ border-bottom:1px solid var(--sp-border); }

/* headers, footer and top modal colors */
.bhead{background: linear-gradient( -137deg , #1dd5e6 0%, #ee5b40 100%);color:#fff;}
.bfoot{background: linear-gradient( -137deg , #1dd5e6 0%, #ee5b40 100%);color:#fff;}

/* Sidebar / User list: calmer surface to match the homepage */
.bsidebar{ background: var(--sp-surface); color:var(--sp-text); border-left:1px solid rgba(0,0,0,0.25); }

.modal_top, .pro_top{ background: rgba(0,0,0,0.45); color:#fff; }
.foot{background: linear-gradient( -137deg , #1dd5e6 0%, #ee5b40 100%);color:#fff;}

/* background major element panel, page menu, float menu, modal, chat boxes */
.backglob{ background: var(--sp-bg); }
.back_chat{ background: var(--sp-bg); }
.back_priv{ background: var(--sp-bg); }
.back_panel{ background: var(--sp-surface); }
.back_menu{ background: var(--sp-surface2); }
.back_pmenu{ background: var(--sp-surface); }
.back_box{ background: var(--sp-surface2); }
.back_input{ background: var(--sp-surface); }
.back_modal{ background: var(--sp-surface); }
.page_element{ background: var(--sp-surface2); }
.back_quote{ background: rgba(255,255,255,0.04); }

/* main theme color */
.theme_color{ color: var(--sp-primary); }
.default_color{ color: var(--sp-accent); }
.error{ color:#ff6464; }
.success{ color:#74b20e; }
.warn{ color:#ffb020; }

/* button colors */
.theme_btn, .back_theme{
  background: var(--sp-primary);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.theme_btn:hover, .back_theme:hover{
  filter: brightness(1.05);
}

.default_btn, .back_default{
  background: var(--sp-accent);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.default_btn:hover, .back_default:hover{
  filter: brightness(1.05);
}

.defaultd_btn{ background: rgba(255,255,255,0.08); color:#fff; border:1px solid var(--sp-border); }
.ok_btn{ background:#74b20e; color:#fff; }
.warn_btn{ background:#ffb020; color:#111; }
.delete_btn{ background:#cc0000; color:#fff; }

/* send button text/icon */
.send_btn{ color: #fff; }

/* default username color */
.user{ color:#fff; }

/* chat system message */
.chat_system{ color: var(--sp-muted); background: rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.06); }

/* opacity for offline users in list */
.offline{ opacity:0.55; }

/* menu icon */
.menui{ color: var(--sp-text); }
.subi{ color: var(--sp-primary); }

/* wall reply background */
.reply_item{ background: rgba(255,255,255,0.04); border:1px solid var(--sp-border); }

/* main post item option wall and news */
.main_post_item{ color: rgba(255,255,255,0.6); }

/* input option background colors */
.input_item{ color: var(--sp-text); }

/* private log bubble colors */
.target_private, .hunt_quote{ color:#fff; background: rgba(0,0,0,0.6); border: 1px solid rgba(211,116,93,0.75); }
.hunter_private, .targ_quote{ color:#111; background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.35); }

/* quote in chat background color */
.cquote{ background: rgba(255,255,255,0.05); color:#fff; border-left: 3px solid rgba(21,142,159,0.55); }

/* tab menu */
.tab_menu{ box-shadow: var(--sp-shadow); }
.tab_selected{ background: rgba(21,142,159,0.16); }

/* modal menu */
.modal_mback{ background: rgba(255,255,255,0.04); }
.modal_mborder{ border-bottom: 1px solid var(--sp-border); }
.modal_selected{ background: rgba(21,142,159,0.16); }

/* back transparency background for modal box */
.modal_back{ background-color: rgba(0,0,0,0.65); }

/* chat logs */
.mbubble{ background: rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.05); }
.topic_log{ background: rgba(0,0,0,0.35); color: var(--sp-muted); }
.sys_log{ }

/* upload progress */
.bprogress{ background:#74b20e; color:#fff; }

/* notification colors */
.bnotify{ background:#ff3b3b; color:#fff; }
.foot_notify, .head_notify{ border:1px solid rgba(255,255,255,0.7); }

/* date colors */
.sub_date{ color: var(--sp-muted); }
.sub_chat, .sub_priv{ color: #fff; }

/* secondary text color */
.sub_text, .list_mood{ color: var(--sp-muted); }

/* profile likes */
.plikes{ background-color: rgba(255,255,255,0.06); color:#fff; }

/* spinner color */
.bspin{ color: rgba(255,255,255,0.35); }

/* special chat item */
.my_notice{ color:#fff; background: rgba(21,142,159,0.55); border:1px solid rgba(255,255,255,0.08); }
.system_text{ background: rgba(255,255,255,0.04); color: var(--sp-muted); }

/* outside pages background */
.back_page{ background: var(--sp-bg); color:#fff; }

/* video background color */
.post_video{ background: rgb(0,0,0); }

/* slider */
.boom_slider .ui-widget-content{ background: rgba(255,255,255,0.12); }
.boom_slider .ui-state-default{ background: rgba(255,255,255,0.75) !important; }
.boom_slider .ui-state-active{ background: rgba(255,255,255,0.85) !important; }
.boom_slider .ui-slider-range{ background: rgba(21,142,159,0.75); }

/* user item (right list) - more "card" like */
.user_item{
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,0.035);
  color: var(--sp-text);
}
.user_item:hover{
  border-color: rgba(27,183,196,0.45);
  background: rgba(255,255,255,0.055);
}

/* tab menu pills */
.tab_menu ul li{
  display: inline-block;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  border-radius: 10px;
  margin: 5px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
}
.tab_menu ul li:hover{
  background: rgba(255,255,255,0.06);
}

/* emoji picker area */
.emo_content{
  width: 100%;
  height: 180px;
  overflow-x: auto;
  overflow-y: auto;
  white-space: nowrap;
  padding: 6px;
  background: var(--sp-surface2);
  border-top: 1px solid var(--sp-border);
}

/* side menus */
#chat_main_menu,
#bank_menu,
#room_options_menu,
#setting_menu,
#game_menu,
#leaderboard_menu{
  width: 300px;
  background: var(--sp-surface2);
}

/* select input color */
.selectboxit-list, .selectboxit-btn{
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--sp-border);
  color: var(--sp-text);
}
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor{ background-color: rgba(255,255,255,0.06); color:#fff; }
.selectboxit-default-arrow{ border-top: 4px solid rgba(255,255,255,0.55); }
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active{
  background: rgba(255,255,255,0.06);
  color:#fff;
}
.selectboxit-options{ background: var(--sp-surface2); color:#fff; border:1px solid var(--sp-border); }
.selectboxit-list .selectboxit-option-anchor{ color: var(--sp-muted); }

/* custom */
.modal_in{ border:1px solid rgba(255,255,255,0.04); }


/* --- Private read receipts (Sternpower ✓ / ✓✓) --- */
.pvchecks{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  font-size:11px;
  line-height:1;
  letter-spacing:-1px;
  color: var(--sp-muted);
  opacity: 0.9;
  user-select:none;
}
.pvchecks.read{
  color: var(--sp-primary);
  opacity: 1;
  text-shadow: 0 0 10px rgba(29,213,230,0.25);
}


/* --- Sternpower: Private Read Receipts (✓ / ✓✓) --- */
.pvchecks{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:10px;

  /* besser sichtbar */
  font-size:12px;
  font-weight:800;
  letter-spacing:-0.5px;
  line-height:1;

  /* Badge-Look */
  padding:2px 7px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);

  color: rgba(255,255,255,0.75);
  user-select:none;
  transform: translateY(-1px);
}

.pvchecks.read{
  /* “gelesen” = Sternpower-Türkis + Glow */
  color: #fff;
  background: color-mix(in srgb, var(--sp-primary) 28%, transparent);
  border-color: color-mix(in srgb, var(--sp-primary) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 0 12px rgba(21,142,159,0.35);
}

/* optional: beim Hover noch klarer */
.private_logs li:hover .pvchecks{
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.14);
}

.pvseen{
  margin-left:6px;
  font-size:11px;
  opacity:0.85;
  color: rgba(255,255,255,0.75);
}
.pvchecks.read + .pvseen{
  opacity:1;
}