/* Космическая тема для File Browser (files.xsaite.ru) */

:root {
  --space-bg: #05060f;
  --space-bg2: #0b0a1e;
  --space-panel: rgba(18, 18, 38, 0.72);
  --space-border: rgba(150, 160, 255, 0.16);
  --space-accent: #7aa2ff;
  --space-accent2: #c792ea;
  --space-text: #e8ecf8;
  --space-muted: #9aa4c8;
}

/* Фон — глубокий космос с туманностями */
html, body, #app, .app, main {
  background:
    radial-gradient(120% 80% at 15% 5%, #170f33 0%, transparent 55%),
    radial-gradient(100% 70% at 90% 90%, #0a2740 0%, transparent 55%),
    linear-gradient(180deg, var(--space-bg) 0%, var(--space-bg2) 60%, #03040a 100%) !important;
  background-attachment: fixed !important;
  color: var(--space-text) !important;
}

/* Звёздная пыль на фоне */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 120px 90px, rgba(200,220,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 220px 160px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 320px 60px, rgba(220,200,255,.7), transparent),
    radial-gradient(1px 1px at 60px 220px, rgba(255,240,210,.6), transparent),
    radial-gradient(1.5px 1.5px at 400px 260px, rgba(255,255,255,.75), transparent);
  background-repeat: repeat;
  background-size: 460px 320px;
  opacity: .6;
  animation: starfield 120s linear infinite;
}
@keyframes starfield { to { background-position: 460px 320px, 580px 420px, 680px 560px, 760px 420px, 520px 640px, 860px 580px; } }

/* Верхняя панель / меню */
header, .navbar, nav, .bar, .toolbar {
  background: rgba(10, 10, 26, 0.72) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--space-border) !important;
}

/* Сайдбар / боковая панель */
.sidebar, aside, #sidebar, .nav-items {
  background: rgba(8, 8, 22, 0.75) !important;
  border-right: 1px solid var(--space-border) !important;
}

/* Карточки, списки, окна */
.card, .file-list, table, .listing, .modal, .dialog, .panel {
  background: var(--space-panel) !important;
  border: 1px solid var(--space-border) !important;
  backdrop-filter: blur(6px);
  border-radius: 10px !important;
}

/* Строки файлов */
.file, tr, li {
  border-color: var(--space-border) !important;
}
.file:hover, tr:hover, li:hover {
  background: rgba(122, 162, 255, 0.10) !important;
}

/* Акценты и кнопки */
a, a:hover { color: var(--space-accent) !important; }
button, .button, .btn, [type=submit] {
  background: rgba(122, 162, 255, 0.16) !important;
  border: 1px solid var(--space-accent) !important;
  color: var(--space-text) !important;
  border-radius: 8px !important;
  transition: all .2s;
}
button:hover, .button:hover, .btn:hover, [type=submit]:hover {
  background: var(--space-accent) !important;
  color: #05060f !important;
  box-shadow: 0 0 16px rgba(122, 162, 255, 0.5);
}

/* Поля ввода */
input, textarea, select {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--space-border) !important;
  color: var(--space-text) !important;
  border-radius: 8px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--space-accent) !important;
  box-shadow: 0 0 10px rgba(122, 162, 255, 0.4);
}

/* Текст */
h1, h2, h3, h4, .title { color: var(--space-text) !important; }
.muted, small, .subtitle { color: var(--space-muted) !important; }

/* Иконки/ссылки в верхней панели пусть светятся */
svg, .icon { color: var(--space-accent); }

/* Скроллбар */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--space-accent), var(--space-accent2));
  border-radius: 10px;
}