/*
  Sun-Panel custom theme v16
  Style: Hatsune Miku / Magical Mirai / restrained dark glass

  Upload target:
  sun-panel/conf/custom/index.css

  Background image:
  sun-panel/conf/custom/bg-miku.jpg

  Important implementation notes:
  - Sun-Panel loads /custom/index.css before its bundled CSS, so this file uses
    high-specificity selectors and !important only on visual properties.
  - Do not change layout primitives. #app only gets position + z-index.
  - Do not add global filters to img/svg.
  - Do not add frames, borders, or shadows directly to icon/logo elements.
*/

:root {
  --sp-miku-primary: #39C5BB;
  --sp-miku-primary-soft: rgba(57, 197, 187, 0.16);
  --sp-miku-primary-line: rgba(57, 197, 187, 0.36);
  --sp-miku-accent: #FF4FA3;
  --sp-miku-accent-soft: rgba(255, 79, 163, 0.14);
  --sp-miku-bg: #071116;
  --sp-miku-bg-deep: #02070B;
  --sp-miku-text: rgba(242, 255, 253, 0.96);
  --sp-miku-text-muted: rgba(212, 236, 235, 0.74);
  --sp-miku-text-faint: rgba(212, 236, 235, 0.54);
  --sp-miku-glass: rgba(6, 18, 24, 0.58);
  --sp-miku-glass-strong: rgba(8, 23, 30, 0.76);
  --sp-miku-glass-hover: rgba(10, 34, 41, 0.82);
  --sp-miku-border: rgba(116, 238, 230, 0.24);
  --sp-miku-border-strong: rgba(57, 197, 187, 0.48);
  --sp-miku-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  --sp-miku-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.26);
  --sp-miku-glow: 0 0 22px rgba(57, 197, 187, 0.20);
  --sp-miku-radius-lg: 18px;
  --sp-miku-radius-md: 14px;
  --sp-miku-radius-sm: 10px;
  --sp-title-top: -10px;
  --sp-title-cn-left: 0px;
  --sp-title-miku-left: 168px;
  --sp-title-panel-left: 342px;
  --sp-title-sub-left: 2px;
  --sp-title-sub-top: 54px;
  --sp-layout-left: 28px;
  --sp-layout-max-width: 980px;
  --sp-header-width: 820px;
  --sp-search-width: 500px;
}

/*
  Optional local fonts.
  If you upload these files to sun-panel/conf/custom/fonts/, the title will be
  much closer to the reference. If the files are missing, browser fallbacks apply.
*/
@font-face {
  font-family: "Miku Sans";
  src: url("/custom/fonts/Inter-ExtraBoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Miku Script";
  src: url("/custom/fonts/Pacifico-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html {
  background-color: var(--sp-miku-bg-deep);
}

body {
  color: var(--sp-miku-text);
  background-color: var(--sp-miku-bg) !important;
  background-image: url("/custom/bg-miku.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center right !important;
  background-attachment: fixed !important;
  accent-color: var(--sp-miku-primary);
}

/* Background mask: darker on the left, lighter on the right to preserve the artwork. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(2, 7, 11, 0.92) 0%,
      rgba(3, 11, 16, 0.82) 34%,
      rgba(5, 14, 20, 0.24) 62%,
      rgba(5, 13, 18, 0.015) 100%),
    linear-gradient(180deg,
      rgba(2, 7, 11, 0.26) 0%,
      rgba(5, 15, 20, 0.02) 48%,
      rgba(2, 7, 11, 0.28) 100%),
    radial-gradient(circle at 18% 24%, rgba(57, 197, 187, 0.12), transparent 34%),
    radial-gradient(circle at 72% 52%, rgba(255, 79, 163, 0.08), transparent 32%);
  -webkit-backdrop-filter: saturate(1.06) brightness(0.92);
  backdrop-filter: saturate(1.06) brightness(0.92);
}

/* Keep the app above the mask without changing layout size. */
#app {
  position: relative;
  z-index: 1;
}

/* Sun-Panel's internal wallpaper mask sits above its background image. */
#app .mask {
  background:
    linear-gradient(90deg,
      rgba(2, 7, 11, 0.88) 0%,
      rgba(3, 11, 16, 0.74) 32%,
      rgba(5, 14, 20, 0.16) 58%,
      rgba(5, 13, 18, 0.00) 100%),
    linear-gradient(180deg,
      rgba(2, 7, 11, 0.14) 0%,
      rgba(5, 15, 20, 0.00) 46%,
      rgba(2, 7, 11, 0.18) 100%) !important;
}

/*
  Left-aligned dashboard layout.
  These are scoped to Sun-Panel's rendered container classes and intentionally
  avoid broad selectors such as main, #app > div, or [class*="content"].
*/
#app .scroll-container > .p-2\.5.mx-auto {
  margin-left: var(--sp-layout-left) !important;
  margin-right: auto !important;
  max-width: var(--sp-layout-max-width) !important;
}

#app .scroll-container > .p-2\.5.mx-auto > div:has(.logo) {
  margin-left: 0 !important;
  margin-right: auto !important;
  width: min(var(--sp-header-width), calc(100vw - var(--sp-layout-left) * 2)) !important;
}

#app .scroll-container > .p-2\.5.mx-auto > div:has(.logo) > .flex {
  justify-content: flex-start !important;
}

#app .search-box,
#app .search-container {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: min(var(--sp-search-width), calc(100vw - var(--sp-layout-left) * 2)) !important;
}

::selection {
  color: #F7FFFE;
  background: rgba(57, 197, 187, 0.38);
}

/* Page title and group titles. No writing-mode or layout changes. */
#app :is(h1, h2, h3, h4, h5, h6),
#app :is(.title, .group-title, .category-title, .card-title, .section-title),
#app :is([class*="Title"], [class*="title"]) {
  color: var(--sp-miku-text) !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 0 18px rgba(57, 197, 187, 0.16),
    0 2px 12px rgba(0, 0, 0, 0.50) !important;
}

/* Sun-Panel group rows. Glass panel only, no display/size changes. */
#app .item-list {
  color: var(--sp-miku-text) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.015)),
    rgba(5, 18, 24, 0.38) !important;
  border: 1px solid rgba(116, 238, 230, 0.18) !important;
  border-radius: var(--sp-miku-radius-lg) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}

#app .item-list .group-title {
  color: rgba(245, 255, 254, 0.98) !important;
  text-shadow: 0 0 16px rgba(57, 197, 187, 0.22), 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}

/* Fixed visual title: split-color main title plus subtitle. */
#app .logo {
  position: relative;
  color: transparent !important;
  text-shadow: none !important;
}

#app .logo > span {
  color: transparent !important;
  text-shadow: none !important;
}

#app .logo::before {
  content: "哲萝的";
  position: absolute;
  left: var(--sp-title-cn-left);
  top: var(--sp-title-top);
  white-space: nowrap;
  font-family: "Miku Sans", "Arial Black", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(38px, 2.9vw, 54px);
  line-height: 1;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0;
  color: #F8FFFE;
  text-shadow:
    0 0 18px rgba(57, 197, 187, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.54);
}

#app .logo > span::before {
  content: "Miku";
  position: absolute;
  left: var(--sp-title-miku-left);
  top: calc(var(--sp-title-top) - 3px);
  white-space: nowrap;
  font-family: "Miku Script", "Pacifico", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(42px, 3.1vw, 58px);
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--sp-miku-primary);
  text-shadow:
    0 0 20px rgba(57, 197, 187, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.50);
}

#app .logo > span::after {
  content: "Panel";
  position: absolute;
  left: var(--sp-title-panel-left);
  top: var(--sp-title-top);
  white-space: nowrap;
  font-family: "Miku Sans", "Arial Black", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(38px, 2.9vw, 54px);
  line-height: 1;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0;
  color: #F8FFFE;
  text-shadow:
    0 0 18px rgba(57, 197, 187, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.54);
}

#app .logo::after {
  content: "39 Music System · Magical Mirai Home Dashboard";
  position: absolute;
  left: var(--sp-title-sub-left);
  top: var(--sp-title-sub-top);
  white-space: nowrap;
  font-family: "Inter", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(214, 235, 235, 0.78);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}

/* Sun-Panel real card classes. These are visual-only overrides. */
#app :is(.card, .item-card-info, .item-card-small-icon, .free-layer-container, .n-card) {
  color: var(--sp-miku-text) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.018)),
    var(--sp-miku-glass) !important;
  border: 1px solid var(--sp-miku-border) !important;
  border-radius: var(--sp-miku-radius-md) !important;
  box-shadow: var(--sp-miku-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
  backdrop-filter: blur(16px) saturate(1.14);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

#app :is(.card, .item-card-info, .item-card-small-icon, .n-card):hover {
  background:
    linear-gradient(135deg, rgba(57, 197, 187, 0.13), rgba(255, 79, 163, 0.045)),
    var(--sp-miku-glass-hover) !important;
  border-color: var(--sp-miku-border-strong) !important;
  box-shadow: var(--sp-miku-shadow-soft), var(--sp-miku-glow), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  transform: translateY(-1px);
}

/* Top-right floating controls. The frame is glass; icons themselves remain untouched. */
#app .fixed-element {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.018)),
    rgba(6, 18, 24, 0.58) !important;
  border: 1px solid rgba(116, 238, 230, 0.18) !important;
  border-radius: var(--sp-miku-radius-md) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.10);
  backdrop-filter: blur(14px) saturate(1.10);
}

/* The decorative pattern inside some Sun-Panel cards should stay subtle. */
#app .card-pattern::before,
#app .card-pattern::after {
  background: rgba(57, 197, 187, 0.12) !important;
  border-color: rgba(57, 197, 187, 0.16) !important;
  box-shadow: none !important;
}

/* Name and description text, scoped so service status colors are not flattened. */
#app :is(.name, .app-name, .service-name, .card-name),
#app :is([class*="AppName"], [class*="app-name"], [class*="ServiceName"], [class*="service-name"], [class*="CardName"], [class*="card-name"]) {
  color: var(--sp-miku-text) !important;
}

#app :is(.desc, .description, .subtitle, .text-muted),
#app :is([class*="Desc"], [class*="desc"], [class*="Subtitle"], [class*="subtitle"]) {
  color: var(--sp-miku-text-muted) !important;
}

#app :is(.app-icon-info-text-box-title, .n-ellipsis) {
  color: var(--sp-miku-text) !important;
}

#app .app-icon-info-text-box-description {
  color: var(--sp-miku-text-muted) !important;
}

/* Search, inputs, and buttons: glass effect without forced sizing. */
#app :is(input, textarea, select, button, .n-input, .n-input-wrapper, .n-button),
#app :is(.search, .search-box, .search-input, [class*="SearchBox"], [class*="search-box"], [class*="SearchInput"], [class*="search-input"]) {
  color: var(--sp-miku-text) !important;
  background-color: rgba(7, 20, 26, 0.54) !important;
  border-color: rgba(113, 236, 229, 0.26) !important;
  border-radius: var(--sp-miku-radius-sm) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

#app :is(input, textarea, select)::placeholder {
  color: var(--sp-miku-text-faint) !important;
}

#app :is(input, textarea, select, button, .n-input, .n-input-wrapper, .n-button):hover,
#app :is(.search, .search-box, .search-input):hover {
  border-color: rgba(57, 197, 187, 0.46) !important;
}

#app :is(a, button, input, textarea, select, .n-button):focus-visible {
  outline: 2px solid rgba(57, 197, 187, 0.60) !important;
  outline-offset: 2px;
}

/* Search bar: one glass shell only. Inner input/buttons stay transparent. */
#app :is(.search-box, .search-container) {
  color: var(--sp-miku-text) !important;
  background:
    linear-gradient(90deg, rgba(57, 197, 187, 0.10), rgba(255, 79, 163, 0.035)),
    rgba(4, 16, 22, 0.50) !important;
  border: 1px solid rgba(57, 197, 187, 0.60) !important;
  border-radius: 999px !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 18px rgba(57, 197, 187, 0.10) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
  backdrop-filter: blur(16px) saturate(1.14);
}

#app :is(.search-box, .search-container):hover,
#app :is(.search-box, .search-container):focus-within {
  border-color: rgba(57, 197, 187, 0.82) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    0 0 22px rgba(57, 197, 187, 0.20) !important;
}

#app :is(.search-box, .search-container) input {
  color: var(--sp-miku-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#app :is(.search-box, .search-container) input::placeholder {
  color: rgba(212, 236, 235, 0.58) !important;
}

#app :is(.search-box-btn-engine, .search-box-btn-search) {
  color: rgba(57, 197, 187, 0.92) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#app :is(.search-box-btn-engine, .search-box-btn-search):hover {
  color: #F7FFFE !important;
  text-shadow: 0 0 14px rgba(57, 197, 187, 0.34) !important;
}

/* Menus, popovers, dialogs, and dropdowns. */
#app :is(.menu, .dropdown, .popover, .modal, .dialog, .n-dropdown-menu, .n-popover, .n-modal, [role="menu"], [role="dialog"]) {
  color: var(--sp-miku-text) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.018)),
    var(--sp-miku-glass-strong) !important;
  border: 1px solid var(--sp-miku-border) !important;
  border-radius: var(--sp-miku-radius-md) !important;
  box-shadow: var(--sp-miku-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

/* Status chips and labels. */
#app :is(.tag, .badge, .chip, .label, .n-tag, [class*="Badge"], [class*="badge"]) {
  color: var(--sp-miku-text) !important;
  background-color: var(--sp-miku-primary-soft) !important;
  border-color: rgba(57, 197, 187, 0.28) !important;
  border-radius: 999px !important;
}

#app :is(progress, .progress, .n-progress) {
  accent-color: var(--sp-miku-primary);
}

#app :is(.active, .selected, .is-active, .n-menu-item-content--selected) {
  color: #F7FFFE !important;
  border-color: rgba(57, 197, 187, 0.44) !important;
  text-shadow: 0 0 16px rgba(57, 197, 187, 0.18) !important;
}

/* Footer/navigation text stays readable but quiet. */
#app :is(footer, .footer, .copyright, .powered, .nav, .tabs),
#app :is([class*="Footer"], [class*="footer"], [class*="Copyright"], [class*="copyright"]) {
  color: var(--sp-miku-text-muted) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34) !important;
}

#app a {
  color: inherit;
  text-decoration-color: rgba(57, 197, 187, 0.42);
}

#app a:hover {
  color: #F7FFFE !important;
  text-decoration-color: var(--sp-miku-primary);
}

/* Scrollbar polish, kept purely visual. */
* {
  scrollbar-color: rgba(57, 197, 187, 0.48) rgba(5, 15, 20, 0.44);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(5, 15, 20, 0.44);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(57, 197, 187, 0.62), rgba(255, 79, 163, 0.38));
  border: 2px solid rgba(5, 15, 20, 0.72);
  border-radius: 999px;
}

@media (max-width: 680px) {
  :root {
    --sp-miku-radius-lg: 14px;
    --sp-miku-radius-md: 12px;
    --sp-miku-radius-sm: 9px;
    --sp-title-top: -2px;
    --sp-title-cn-left: 0px;
    --sp-title-miku-left: 92px;
    --sp-title-panel-left: 196px;
    --sp-title-sub-left: 1px;
    --sp-title-sub-top: 40px;
    --sp-layout-left: 14px;
    --sp-layout-max-width: calc(100vw - 28px);
    --sp-header-width: calc(100vw - 28px);
    --sp-search-width: calc(100vw - 28px);
  }

  body {
    background-position: 62% center !important;
    background-attachment: scroll !important;
  }

  body::before {
    background:
      linear-gradient(90deg,
        rgba(2, 7, 11, 0.90) 0%,
        rgba(3, 11, 16, 0.78) 46%,
        rgba(5, 14, 20, 0.42) 100%),
      linear-gradient(180deg,
        rgba(2, 7, 11, 0.48) 0%,
        rgba(5, 15, 20, 0.24) 48%,
        rgba(2, 7, 11, 0.68) 100%);
  }

  #app .logo::before {
    font-size: 31px;
  }

  #app .logo > span::before {
    font-size: 33px;
  }

  #app .logo > span::after {
    font-size: 31px;
  }

  #app .logo::after {
    font-size: 12px;
  }
}