/* 
Copyright © 2026 Marko Vityk
All rights reserved.
Unauthorized copying prohibited.
*/
/* ts code so beautiful */
:root {
  --background: #0a0a0a;
  --background2: #0f0f0f;
  --background3: #202020;
  --background4: #2c2c2c;
  --shadow: rgba(255, 255, 255, 0.15);
  --blue: #ffffff;
  --green: #22c55e;
  --mauve: #a78bfa;
  --text: #e4e4e7;
  --scrollbar-size: 14px;
  --ui-scale: 1;
  --game-card-padding: calc(12px * var(--ui-scale));
  --game-icon-size: calc(92px * var(--ui-scale));
  --bezel-size: clamp(8px, calc(14px * var(--ui-scale)), 18px);
  --panel-radius: clamp(10px, calc(16px * var(--ui-scale)), 20px);
}

body[theme="midnight"] { /* og markos classroom! theme */
  --background: #0a0a0a;
  --background2: #0f0f0f;
  --background3: #202020;
  --background4: #2c2c2c;
  --shadow: rgba(255, 255, 255, 0.15);
  --blue: #ffffff;
  --green: #22c55e;
  --mauve: #a78bfa;
  --text: #e4e4e7;
}

body[theme="macchiato"] {
  --background: #11111b; /* from arsenic */
  --background2: #181825;
  --background3: #313244;
  --background4: #45475a;
  --shadow: rgba(137, 180, 250, 0.5);
  --blue: #89b4fa;
  --green: #a6e3a1;
  --mauve: #cba6f7;
  --text: #cdd6f4;
}

body[theme="tokyo-night"] {
  --background: #1a1b26;
  --background2: #16161e;
  --background3: #24283b;
  --background4: #414868;
  --shadow: rgba(125, 207, 255, 0.5);
  --blue: #7dcfff;
  --green: #9ece6a;
  --mauve: #bb9af7;
  --text: #c0caf5;
}

body[theme="mocha"] { /* from arsenic */
  --background: #1e1e2e;
  --background2: #181825;
  --background3: #313244;
  --background4: #45475a;
  --shadow: rgba(137, 180, 250, 0.5);
  --blue: #89b4fa;
  --green: #a6e3a1;
  --mauve: #cba6f7;
  --text: #cdd6f4;
}

body[theme="one-dark"] {
  --background: #1e2127;
  --background2: #282c34;
  --background3: #3e4451;
  --background4: #4b5263;
  --shadow: rgba(97, 175, 239, 0.5);
  --blue: #61afef;
  --green: #98c379;
  --mauve: #c678dd;
  --text: #abb2bf;
}

body[theme="gruvbox"] {
  --background: #1d2021;
  --background2: #282828;
  --background3: #3c3836;
  --background4: #504945;
  --shadow: rgba(251, 189, 46, 0.5);
  --blue: #83a598;
  --green: #b8bb26;
  --mauve: #d3869b;
  --text: #ebdbb2;
}

body[theme="frappe"] {
  --background: #303446; /* from arsenic */
  --background2: #292c3c;
  --background3: #414559;
  --background4: #51576d;
  --shadow: rgba(140, 170, 238, 0.5);
  --blue: #8caaee;
  --green: #a6d189;
  --mauve: #ca9ee6;
  --text: #c6d0f5;
}

body[theme="dracula"] {
  --background: #282a36;
  --background2: #1e1f29;
  --background3: #44475a;
  --background4: #6272a4;
  --shadow: rgba(189, 147, 249, 0.5);
  --blue: #8be9fd;
  --green: #50fa7b;
  --mauve: #bd93f9;
  --text: #f8f8f2;
}

body[theme="nord"] {
  --background: #2e3440;
  --background2: #3b4252;
  --background3: #434c5e;
  --background4: #4c566a;
  --shadow: rgba(136, 192, 208, 0.5);
  --blue: #88c0d0;
  --green: #a3be8c;
  --mauve: #b48ead;
  --text: #eceff4;
}

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

body {
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--background);
  color: var(--text);
  overflow: hidden;
  font-size: calc(16px * var(--ui-scale));
}

a {
  color: var(--text);
  text-decoration: none;
}

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: row-reverse;
}

.container.nav-left {
  flex-direction: row;
}

.container.nav-left nav {
  direction: ltr;
}

.container.nav-left .main-content {
  margin: var(--bezel-size) var(--bezel-size) var(--bezel-size) 0px;
}

.container.nav-left .close-tab {
  left: auto;
  right: calc(8px * var(--ui-scale));
}

#particles-js {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

nav {
  width: clamp(54px, calc(74px * var(--ui-scale)), 110px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
  direction: rtl;
  transition: width 0.2s ease;
}

nav:hover {
  width: clamp(220px, calc(280px * var(--ui-scale)), 420px);
}

.logo {
  display: flex;
  padding: calc(20px * var(--ui-scale));
  align-items: center;
  gap: calc(10px * var(--ui-scale));
}

.logo img {
  width: calc(32px * var(--ui-scale));
  height: calc(32px * var(--ui-scale));
  border-radius: calc(5px * var(--ui-scale));
}

.logo-name {
  font-size: calc(22px * var(--ui-scale));
  font-weight: 800;
}

nav .tab-btn .left p {
  font-size: calc(14px * var(--ui-scale));
}

.tabs {
  padding: calc(10px * var(--ui-scale)) calc(15px * var(--ui-scale));
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-scale));
  overflow: auto;
}

#tabs-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-btn {
  width: 100%;
  border: none;
  border-radius: calc(12px * var(--ui-scale));
  background: var(--background);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.tab-btn:hover {
  background: var(--background2);
}

.tab-btn .left {
  display: flex;
  gap: calc(10px * var(--ui-scale));
  align-items: center;
  padding: calc(10px * var(--ui-scale));
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.tab-btn .left p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(140px * var(--ui-scale));
}

.close-tab {
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: calc(5px * var(--ui-scale));
  border-radius: 8px;
  position: absolute;
  left: calc(8px * var(--ui-scale));
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

.close-tab:hover {
  background: var(--background4);
}

.container.nav-left .close-tab {
  left: auto;
  right: calc(8px * var(--ui-scale));
}

.icon {
  width: calc(20px * var(--ui-scale));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.icon .tab-favicon {
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  max-width: calc(20px * var(--ui-scale));
  max-height: calc(20px * var(--ui-scale));
  border-radius: 4px;
  object-fit: contain;
  display: block;
  transition: none !important;
}

.bottom-nav {
  padding: calc(18px * var(--ui-scale));
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-scale));
}

.server-switcher {
  position: relative;
  padding: 0 calc(18px * var(--ui-scale)) calc(8px * var(--ui-scale));
}

#server-switcher-btn {
  width: 100%;
  border: 1px solid var(--background3);
  border-radius: 10px;
  background: var(--background2);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

#server-switcher-btn:hover {
  background: var(--background3);
}

.server-switcher-menu {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(100% + 6px);
  list-style: none;
  border: 1px solid var(--background3);
  border-radius: 10px;
  background: var(--background2);
  display: none;
  z-index: 25;
  overflow: hidden;
}

.server-switcher-menu li {
  padding: 8px 10px;
  cursor: pointer;
}

.server-switcher-menu li:hover,
.server-switcher-menu li.active {
  background: var(--background3);
}

nav:not(:hover) .logo-name,
nav:not(:hover) .logo h6,
nav:not(:hover) .tab-btn p,
nav:not(:hover) .tab-btn .close-tab {
  opacity: 0;
  pointer-events: none;
}

nav:not(:hover) .logo-name,
nav:not(:hover) .logo h6,
nav:not(:hover) .tab-btn p {
  max-width: 0;
  overflow: hidden;
}

nav .tab-btn .left,
nav .logo {
  justify-content: flex-start;
}

nav .tab-btn .left {
  justify-content: flex-start;
}

nav:not(:hover) .tab-btn {
  justify-content: flex-start;
  padding: 0;
}

nav:not(:hover) .tab-btn .left {
  justify-content: flex-start;
  gap: 0;
  width: auto;
  padding: calc(10px * var(--ui-scale));
  margin: 0;
  min-height: calc(40px * var(--ui-scale));
  display: flex;
  align-items: center;
}

.icon {
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

nav:hover .logo-name,
nav:hover .logo h6,
nav:hover .tab-btn p {
  opacity: 1;
  pointer-events: auto;
}

nav:hover .tab-btn:hover .close-tab {
  opacity: 1;
  pointer-events: auto;
}

nav:hover .logo-name,
nav:hover .logo h6,
nav:hover .tab-btn p {
  max-width: calc(180px * var(--ui-scale));
}


.tabs {
  padding: calc(10px * var(--ui-scale)) calc(15px * var(--ui-scale));
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 1.5vh, calc(10px * var(--ui-scale)));
  overflow: auto;
  scrollbar-width: none; /* Hide scrollbar inside tabs if possible */
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  width: 100%;
  border: none;
  border-radius: calc(12px * var(--ui-scale));
  background: var(--background);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 0;
  flex-shrink: 1;
}

.tab-btn .left {
  display: flex;
  gap: calc(10px * var(--ui-scale));
  align-items: center;
  padding: calc(10px * var(--ui-scale));
  overflow: hidden;
  position: relative;
  z-index: 2;
  width: 100%;
}

.tab-btn .left p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(140px * var(--ui-scale));
  font-size: calc(14px * var(--ui-scale));
}

.icon {
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.icon .tab-favicon, .icon i, .icon svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  object-fit: contain;
  display: block;
}

.main-content {
  flex: 1;
  margin: var(--bezel-size) 0px var(--bezel-size) var(--bezel-size);
  border-radius: var(--panel-radius);
  background: var(--background2);
  overflow: hidden;
  z-index: 2;
  position: relative;
  transition: background 0.2s; /* Smooth transition when switching pages */
}

/* Make background transparent on home page ONLY */
.main-content.home-active {
  background: transparent !important;
  box-shadow: none;
}

.page {
  display: none;
  padding: 28px;
  height: 100%;
  overflow: hidden;
}

.main-content:fullscreen,
.main-content:-webkit-full-screen,
.page:fullscreen,
.page:-webkit-full-screen {
  background: var(--background2);
}

#home-page {
  display: block;
}

.welcome {
  font-size: 42px;
  color: var(--text);
  font-weight: 700;
}

#mainQuote {
  transition: all 0.3s ease;
  user-select: none;
}

#mainQuote:hover {
  transform: scale(1.05);
  opacity: 1 !important;
  text-shadow: 0 0 15px var(--shadow);
}

.quote-out {
  opacity: 0 !important;
  filter: blur(4px);
}

.home-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height:90vh;
  text-align: center;
}

.home-page-right {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel {
  border: 1px solid var(--background3);
  border-radius: 14px;
  padding: 12px;
}

.partner,
.resource {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
}

.partner:hover,
.resource:hover {
  background: var(--background3);
}

.partner-logo,
.shortcut-image {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.page button {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--background3);
  background: var(--background2);
  color: var(--text);
  cursor: pointer;
}

.page button:hover {
  background: var(--background3);
}

.start {
  background: var(--blue) !important;
  color: var(--background) !important;
  border: none !important;
  font-weight: 700;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.game-search-container,
#uv-form,
.ai-input {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--background3);
  background: var(--background);
  border-radius: 10px;
  padding: 10px;
}

input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.home-search-wrapper {
  position: relative;
  display: inline-block;
}

.home-search-wrapper .home-search-btn {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
  width: auto;
  height: auto;
}

.home-search-wrapper .home-search-btn:hover {
  background: transparent;
  opacity: 1;
}

.input-field {
  margin: 2px;
  display: inline-block;
  padding: 15px 45px 15px 25px; /* Added right padding for button */
  font-size: 14px;
  border: 2px solid #1a1a1acc;
  border-radius: 12px;
  background-color: #2b2b2b;
  color: white;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: 0.3s;
  width: 300px;
}

.input-field:hover {
  background-color: #4b4b4b;
  border-color: #1a1a1acc;
}

.input-field:focus {
  background-color: white;
  color: black;
  border-color: #1a1a1acc;
}

#category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-btn {
  border-radius: 999px !important;
  font-size: 13px;
  font-weight: 600;
}

.selected-category {
  background: var(--blue) !important;
  color: var(--background) !important;
}

.game-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc((var(--game-card-padding) * 2) + var(--game-icon-size)), 1fr));
  gap: 14px;
}

#game-list,
#apps-page .apps-list-grid,
#game-page,
#apps-page {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: auto;
  scrollbar-color: var(--background4) var(--background2);
}

#game-page,
#apps-page {
  padding-right: 20px;
}

#game-list::-webkit-scrollbar,
#apps-page .apps-list-grid::-webkit-scrollbar,
#game-page::-webkit-scrollbar,
#apps-page::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
#settings-page::-webkit-scrollbar,
#chat-display::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

#game-list::-webkit-scrollbar-track,
#apps-page .apps-list-grid::-webkit-scrollbar-track,
#game-page::-webkit-scrollbar-track,
#apps-page::-webkit-scrollbar-track,
.tabs::-webkit-scrollbar-track,
#settings-page::-webkit-scrollbar-track,
#chat-display::-webkit-scrollbar-track {
  background: var(--background2);
  border-radius: 10px;
}

#game-list::-webkit-scrollbar-thumb,
#apps-page .apps-list-grid::-webkit-scrollbar-thumb,
#game-page::-webkit-scrollbar-thumb,
#apps-page::-webkit-scrollbar-thumb,
.tabs::-webkit-scrollbar-thumb,
#settings-page::-webkit-scrollbar-thumb,
#chat-display::-webkit-scrollbar-thumb {
  background: var(--background4);
  border-radius: 10px;
  border: 2px solid var(--background2);
}

#game-list::-webkit-scrollbar-thumb:hover,
#apps-page .apps-list-grid::-webkit-scrollbar-thumb:hover,
#game-page::-webkit-scrollbar-thumb:hover,
#apps-page::-webkit-scrollbar-thumb:hover,
.tabs::-webkit-scrollbar-thumb:hover,
#settings-page::-webkit-scrollbar-thumb:hover,
#chat-display::-webkit-scrollbar-thumb:hover {
  background: var(--blue);
}

#settings-page,
.tabs,
#chat-display {
  scrollbar-width: auto;
  scrollbar-color: var(--background4) var(--background2);
}

#settings-page {
  overflow-y: auto;
}

.game-btn {
  border-radius: 12px;
  border: 1px solid var(--background3);
  padding: var(--game-card-padding);
  cursor: pointer;
  background: var(--background2);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: calc((var(--game-card-padding) * 2) + var(--game-icon-size));
  max-width: 100%;
  justify-self: start;
}

.game-btn:hover {
  transform: translateY(-2px);
}

.game-btn .title {
  font-weight: 700;
  font-size: calc(14px * var(--ui-scale));
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.game-btn .category {
  font-size: calc(11px * var(--ui-scale));
  opacity: 0.8;
}

.game-btn img {
  width: var(--game-icon-size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  margin: 0 auto calc(8px * var(--ui-scale));
}

.game-btn .content {
  width: var(--game-icon-size);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2px * var(--ui-scale));
  text-align: center;
}

.shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
}

#embed-container {
  width: 100%;
  height: 100%;
  display: none;
}

#embed-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
  background: #fff;
}

.settings-tabs {
  display: none;
}

.tab-link {
  flex: 1;
  justify-content: center;
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setting-card {
  border: 1px solid var(--background3);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cloak-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.select-control {
  flex: 1 1 240px;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--background3);
  background: var(--background2);
  color: var(--text);
  outline: none;
}

#index-cloak-status,
#index-ads-status,
#index-blob-status {
  margin-top: 8px;
  opacity: 0.85;
  font-size: 0.9rem;
}

#index-custom-wisp-input {
  border: 2px solid var(--blue) !important;
  outline: 2px solid rgba(138, 173, 244, 0.35);
  outline-offset: 0;
}

#index-custom-wisp-input:focus {
  border-color: var(--green) !important;
  outline: 2px solid rgba(166, 218, 149, 0.5);
}

#chat-display {
  min-height: 360px;
  border: 1px solid var(--background3);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}

.message {
  max-width: 80%;
}

.message.user {
  align-self: flex-end;
  text-align: right;
}

.message.ai {
  align-self: flex-start;
}

.message-bubble {
  background: var(--blue);
  color: var(--background);
  padding: 10px 12px;
  border-radius: 12px;
}

.message-plain {
  padding: 6px 0;
}

.particles-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.switch {
  position: relative;
  width: 52px;
  height: 30px;
  display: inline-flex;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid var(--background4);
  background: var(--background3);
  cursor: pointer;
}

.switch-track::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.2s ease;
}

.switch input:checked + .switch-track {
  background: var(--blue);
  border-color: var(--blue);
}

.switch input:checked + .switch-track::before {
  transform: translateX(22px);
  background: var(--background);
}

.particle-slider-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.particle-slider-row label {
  font-size: 14px;
  font-weight: 600;
}

.particle-range {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--background3);
  border: 1px solid var(--background4);
  outline: none;
}

.particle-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--background);
  cursor: pointer;
}

.particle-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--background);
  cursor: pointer;
}

.nav-divider {
  border-color: var(--background4);
  opacity: 0.6;
}

.home-subtitle {
  margin: 15px 0;
  font-weight: 600;
}

.apps-search-row {
  margin: 16px 0;
}

.apps-list-grid {
  margin-top: 16px;
}

#proxy-page {
  height: 100%;
  padding: 0;
}

#proxy-form-container {
  padding: 28px;
}

.proxy-search-row {
  margin: 20px 0;
}

#proxy-embed-container {
  display: none;
  width: 100%;
  height: 100%;
}

.settings-container {
  margin-top: 16px;
}

.theme-button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.theme-btn-frappe {
  background: #232634;
  color: #c6d0f5;
}

.theme-btn-macchiato {
  background: #181926;
  color: #cad3f5;
}

.theme-btn-mocha {
  background: #11111b;
  color: #cdd6f4;
}

.aboutblank-button-row {
  display: flex;
  gap: 10px;
}

#index-wisp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.wisp-input-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#index-custom-wisp-input {
  flex: 1;
  min-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--background2);
  color: var(--text);
}

#index-wisp-status {
  margin-top: 10px;
  opacity: 0.85;
}

@media (max-width: 900px) {
  :root {
    --scrollbar-size: 12px;
    --bezel-size: clamp(6px, calc(10px * var(--ui-scale)), 14px);
    --panel-radius: clamp(8px, calc(12px * var(--ui-scale)), 16px);
  }

  nav {
    width: clamp(50px, calc(70px * var(--ui-scale)), 110px);
  }

  .main-content {
    margin: var(--bezel-size);
  }

  .home-page-container {
    flex-direction: column;
  }

  .home-page-right {
    width: 100%;
  }
}

@media (max-width: 600px) {
  :root {
    --scrollbar-size: 10px;
  }
}

@media (min-width: 1400px) {
  :root {
    --scrollbar-size: 16px;
  }
}

#homeSearchButton,
#proxyGoButton {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

#homeSearchButton:hover,
#proxyGoButton:hover {
  transform: translateX(3px);
  color: var(--blue);
}


.control-btn {
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.1s ease;
}

.control-btn:hover {
  background: var(--background3);
}

.control-btn:active {
  transform: scale(0.95);
}