/* TUN-AIBOX SERVER V2 — MIDNIGHT BLUE */
:root {
  color-scheme: dark;
  --tun-bg: #06122c;
  --tun-panel: #0c2046;
  --tun-panel-2: #132e59;
  --tun-border: #346cbd;
  --tun-accent: #338bff;
  --tun-text: #f2f7ff;
  --tun-muted: #a8bfdf;
}

html, body {
  color: var(--tun-text);
  background:
    radial-gradient(ellipse at 75% 8%,
      rgba(38,91,191,.23), transparent 45%),
    radial-gradient(ellipse at 8% 95%,
      rgba(28,81,167,.19), transparent 40%),
    var(--tun-bg);
}

body {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
}

aside {
  background: linear-gradient(180deg,
    #081c40 0%, #06132d 100%);
  border-right: 1px solid rgba(91,151,242,.3);
}

.brand {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.6px;
}

.group {
  color: #a8c8fa;
  letter-spacing: 1.2px;
}

main {
  background: transparent;
}

.panel,
.card,
section.panel {
  background: linear-gradient(145deg,
    rgba(20,46,91,.96),
    rgba(9,28,63,.97));
  border: 1px solid rgba(94,153,240,.34);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(0,0,0,.16);
}

header {
  border-bottom-color: rgba(90,148,232,.25);
}

h1, h2, h3 {
  color: #f5f9ff;
}

.muted, small {
  color: var(--tun-muted);
}

input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
  background: #152f55;
  color: #f4f8ff;
  border: 1px solid #40658f;
  border-radius: 11px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(67,149,255,.4);
  border-color: #65aaff;
}

button, .btn {
  border-radius: 11px;
  transition: background .2s, border-color .2s,
    box-shadow .2s;
}

button:hover, .btn:hover {
  border-color: #65aaff;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid #7db7ff;
  outline-offset: 2px;
}

.nav {
  border-radius: 12px;
}

.nav.active, .nav[aria-current="page"] {
  background: linear-gradient(110deg,
    #174a99, #236bd0);
  border: 1px solid #489dff;
  color: white;
}

#tunPresetPanel {
  background: rgba(7,24,55,.65);
  border: 1px solid rgba(90,157,255,.35) !important;
  border-radius: 16px !important;
}

#tunLiveFloat {
  border: 1px solid #518deb;
  border-radius: 24px;
  box-shadow:
    0 24px 75px rgba(0,0,0,.55),
    0 0 35px rgba(38,106,220,.15);
  overflow: hidden;
}

#tunLiveFloatBar {
  background: linear-gradient(100deg,
    #0d2550, #102c60);
  border-bottom: 1px solid rgba(91,159,255,.5);
  color: #fff;
}

#tunLiveFloat iframe {
  border: 0;
}

@media (max-width: 760px) {
  #tunLiveFloat {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}