:root {
  --dz-bg: #0b0f14;
  --dz-panel: #18212a;
  --dz-panel-soft: #202a34;
  --dz-cyan: #33ffff;
  --dz-magenta: #ff33cc;
  --dz-orange: #ff8800;
  --dz-text: #e8eef2;
}

/* ==========================================================================
   GLOBAL
   ========================================================================== */

html,
body,
#app,
.v-application,
main,
.dashboard {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(51, 255, 255, 0.12), transparent 28%),
    radial-gradient(circle at 85% 85%, rgba(255, 51, 204, 0.10), transparent 35%),
    linear-gradient(135deg, #071018 0%, #0b0f14 45%, #15101f 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: var(--dz-text) !important;
}

.v-card,
.v-sheet,
.theme--dark.v-card,
.theme--dark.v-sheet {
  background: rgba(24, 33, 42, 0.96) !important;
  border: 1px solid rgba(51, 255, 255, 0.16) !important;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.35) !important;
}

h1,
h2,
h3,
h4 {
  color: var(--dz-cyan) !important;
  text-shadow: 0 0 8px rgba(51, 255, 255, 0.35) !important;
}

a {
  color: var(--dz-cyan) !important;
}

small,
.v-label,
.text--secondary {
  color: rgba(232, 238, 242, 0.72) !important;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

header,
main header,
.v-toolbar {
  background: rgba(12, 18, 26, 0.86) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(51, 255, 255, 0.24) !important;
  box-shadow:
    0 0 18px rgba(51, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

header img[src*="logo.svg"] {
  display: none !important;
}

header::before,
header::after,
nav::before {
  content: none !important;
  display: none !important;
}

header i,
header .material-icons,
header button.action {
  color: rgba(232, 238, 242, 0.82) !important;
  transition:
    color 0.16s ease,
    text-shadow 0.16s ease !important;
}

header button.action:hover,
header i:hover,
header .material-icons:hover {
  color: var(--dz-cyan) !important;
  text-shadow: 0 0 8px rgba(51, 255, 255, 0.48) !important;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

nav,
.v-navigation-drawer {
  background:
    linear-gradient(
      180deg,
      rgba(12, 28, 33, 0.92),
      rgba(10, 18, 26, 0.96)
    ) !important;
  border-right: 1px solid rgba(51, 255, 255, 0.16) !important;
  box-shadow:
    inset -1px 0 0 rgba(51, 255, 255, 0.08),
    8px 0 28px rgba(0, 0, 0, 0.22) !important;
}

nav::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(51, 255, 255, 0.36),
      rgba(255, 51, 204, 0.22),
      transparent
    );
  pointer-events: none;
}

nav i,
nav .material-icons {
  color: var(--dz-cyan) !important;
  text-shadow: 0 0 7px rgba(51, 255, 255, 0.42) !important;
}

nav a,
nav button {
  transition:
    color 0.16s ease,
    background 0.16s ease,
    text-shadow 0.16s ease !important;
}

nav a:hover,
nav button:hover {
  background: rgba(51, 255, 255, 0.025) !important;
  color: rgba(232, 238, 242, 0.95) !important;
  text-shadow: none !important;
}

nav hr {
  border-color: rgba(51, 255, 255, 0.14) !important;
}

/* ==========================================================================
   STORAGE BAR
   ========================================================================== */

.vue-simple-progress {
  height: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.vue-simple-progress-bar {
  height: 6px !important;
  background: var(--dz-magenta) !important;
  box-shadow:
    0 0 6px rgba(255, 51, 204, 0.45),
    0 0 12px rgba(255, 51, 204, 0.22) !important;
}

.credits,
.credits small,
.credits div:last-child {
  color: rgba(232, 238, 242, 0.70) !important;
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */

.v-btn,
button {
  border-radius: 4px !important;
}

.v-btn.primary,
button.primary {
  background: var(--dz-cyan) !important;
  color: #05080c !important;
  font-weight: 700 !important;
}

.v-btn:hover,
button:hover {
  box-shadow:
    0 0 8px rgba(51, 255, 255, 0.45),
    0 0 16px rgba(255, 51, 204, 0.18) !important;
}

input,
textarea,
select,
.v-input__slot {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(51, 255, 255, 0.12) !important;
  color: var(--dz-text) !important;
}

select,
option,
.v-menu__content,
.v-list {
  background-color: #18212a !important;
  color: #e8eef2 !important;
}

.v-list-item {
  background-color: transparent !important;
  color: #e8eef2 !important;
}

.v-list-item:hover {
  background-color: rgba(51, 255, 255, 0.16) !important;
  color: var(--dz-cyan) !important;
}

.v-list-item--active,
.v-list-item.v-list-item--active {
  background-color: var(--dz-cyan) !important;
  color: #05080c !important;
}

input[type="checkbox"] {
  accent-color: var(--dz-cyan) !important;
}

.v-input--selection-controls__input .v-icon,
.v-input--checkbox .v-icon,
.v-input--selection-controls__ripple {
  color: var(--dz-cyan) !important;
}

/* ==========================================================================
   TABS
   ========================================================================== */

.v-tabs .v-tab--active,
.v-tabs .v-tab.v-tab--active {
  color: var(--dz-cyan) !important;
  background: rgba(51, 255, 255, 0.08) !important;
}

.v-tabs-slider {
  background-color: var(--dz-cyan) !important;
}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */

@keyframes dzGlow {
  0%   { opacity: 0.9; }
  50%  { opacity: 1; }
  100% { opacity: 0.9; }
}

#login {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(51, 255, 255, 0.16), transparent 24%),
    radial-gradient(circle at 85% 85%, rgba(255, 51, 204, 0.12), transparent 34%),
    linear-gradient(135deg, #071018 0%, #0b0f14 45%, #15101f 100%) !important;
  animation: dzGlow 12s ease-in-out infinite;
}

#login > form {
  width: 460px !important;
  height: 460px !important;
  min-width: 460px !important;
  min-height: 460px !important;
  padding: 48px 52px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  background: rgba(24, 33, 42, 0.88) !important;
  border: 1px solid rgba(51, 255, 255, 0.30) !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 28px rgba(51, 255, 255, 0.16),
    inset 0 0 24px rgba(51, 255, 255, 0.04) !important;
}

#login form img {
  display: none !important;
}

#login form h1 {
  width: 100% !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
  font-family: monospace !important;
  font-size: 44px !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--dz-cyan) !important;
  text-shadow:
    0 0 10px rgba(51, 255, 255, 0.85),
    0 0 24px rgba(51, 255, 255, 0.35) !important;
}

#login form h1::after {
  content: "Secure Family Transfer Hub";
  display: block;
  margin-top: 12px;
  margin-bottom: 38px;
  font-size: 13px;
  letter-spacing: 2.5px;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(232, 238, 242, 0.72);
  text-shadow: 0 0 10px rgba(255, 51, 204, 0.25);
}

#login form input[type="text"],
#login form input[type="password"],
#login input.input {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 50px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(51, 255, 255, 0.22) !important;
  border-radius: 4px !important;
  color: var(--dz-text) !important;
  font-size: 15px !important;
}

#login form input[type="text"]:focus,
#login form input[type="password"]:focus,
#login input.input:focus {
  border-color: var(--dz-cyan) !important;
  box-shadow:
    0 0 8px rgba(51, 255, 255, 0.38),
    inset 0 0 12px rgba(51, 255, 255, 0.04) !important;
  outline: none !important;
}

#login form input[type="submit"],
#login input.button {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 52px !important;
  margin: 10px 0 0 0 !important;
  box-sizing: border-box !important;
  background: #b845b5 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  box-shadow:
    0 0 12px rgba(184, 69, 181, 0.32),
    0 0 22px rgba(184, 69, 181, 0.14) !important;
  cursor: pointer !important;
}

/* ==========================================================================
   FILES VIEW
   ========================================================================== */

#search #input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(51, 255, 255, 0.18) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 12px rgba(51, 255, 255, 0.03) !important;
}

#search input {
  color: var(--dz-text) !important;
}

#search #input:focus-within {
  border-color: rgba(51, 255, 255, 0.55) !important;
  box-shadow:
    0 0 10px rgba(51, 255, 255, 0.22),
    inset 0 0 12px rgba(51, 255, 255, 0.04) !important;
}

.breadcrumbs {
	display: none !important;
}

#listing {
  margin-top: 10px !important;
  border: 1px solid rgba(51, 255, 255, 0.10) !important;
  background: rgba(15, 22, 30, 0.58) !important;
  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.25),
    inset 0 0 20px rgba(51, 255, 255, 0.025) !important;
}

#listing .item {
  background: rgba(24, 33, 42, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035) !important;
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease !important;
}

#listing .item:not(.header):hover {
  background: rgba(31, 44, 56, 0.92) !important;
  box-shadow:
    inset 4px 0 0 var(--dz-cyan),
    0 0 16px rgba(51, 255, 255, 0.09) !important;
}

#listing .item.header,
#listing .item.header:hover {
  transform: none !important;
  background: rgba(17, 24, 33, 0.94) !important;
  border-bottom: 1px solid rgba(51, 255, 255, 0.20) !important;
  margin-left: 1px;
	box-shadow:
    inset 4px 0 0 var(--dz-cyan),
    0 0 10px rgba(51, 255, 255, 0.05) !important;
  cursor: default !important;
}

#listing .item.header p {
  color: rgba(232, 238, 242, 0.74) !important;
  font-weight: 800 !important;
}

#listing .item p.name {
  color: rgba(232, 238, 242, 0.88) !important;
  font-weight: 600 !important;
}

#listing .item p.size,
#listing .item p.modified {
  color: rgba(232, 238, 242, 0.62) !important;
}

#listing .item i.material-icons {
  color: var(--dz-cyan) !important;
  text-shadow: 0 0 8px rgba(51, 255, 255, 0.35) !important;
}

p.credits {
  display: none !important;
}