/* Lotusprince / Dark Lotus. Visual overlay for Downtify 3.10.0.
   Application scripts, API routes and account settings stay upstream-owned. */
:root {
  --c-bg: #080711;
  --c-side: #100c1d;
  --c-surface: #171123;
  --c-surface-2: #21192f;
  --c-raised: #30243f;
  --c-line: #251d35;
  --c-line-2: #362944;
  --c-line-3: #4e3c62;
  --c-text: #f1ecfb;
  --c-text-2: #ded3ec;
  --c-text-3: #c9bbd8;
  --c-muted: #b4aac7;
  --c-faint: #998ba9;
  --c-accent: #cdb2f3;
  --c-accent-hi: #e4d1ff;
  --c-on-accent: #20132e;
  --c-glass: #171123ed;
  --c-invert: #f1ecfb;
  --c-on-invert: #120b1d;
  --sh-float: 0 18px 48px #0006;
  --sh-cover: 0 10px 30px #0005;
  --lotus-wash: linear-gradient(105deg, #080711f5 0%, #080711e6 45%, #0e0916c9 100%);
  --lotus-side: linear-gradient(180deg, #171023f5, #0d0918fa);
  --lotus-card: linear-gradient(145deg, #22192fec, #100c1cf5);
  --lotus-focus: #cdb2f347;
  --lotus-quiet: #cdb2f30b;
  --lotus-primary: linear-gradient(135deg, #dec8fa, #bc98e5);
  color-scheme: dark;
}

/* The native light-mode switch remains useful, with the same lilac palette. */
:root[data-theme="light"] {
  --c-bg: #f6f1fa;
  --c-side: #fbf8fe;
  --c-surface: #fffcff;
  --c-surface-2: #eee5f5;
  --c-raised: #e4d7ee;
  --c-line: #e6dcee;
  --c-line-2: #dbcde5;
  --c-line-3: #c3aed2;
  --c-text: #251a31;
  --c-text-2: #3d2d4e;
  --c-text-3: #574365;
  --c-muted: #6e5b7c;
  --c-faint: #816d90;
  --c-accent: #78519e;
  --c-accent-hi: #634084;
  --c-on-accent: #fff;
  --c-glass: #fffcfff2;
  --c-invert: #2a1b37;
  --c-on-invert: #fffcff;
  --sh-float: 0 18px 42px #34204520;
  --sh-cover: 0 8px 24px #34204520;
  --lotus-wash: linear-gradient(105deg, #f6f1fafc 0%, #f6f1faf5 45%, #f6f1fae0 100%);
  --lotus-side: linear-gradient(180deg, #fcf9fefa, #f4ecf9fa);
  --lotus-card: linear-gradient(145deg, #fffdfefa, #f5edfafa);
  --lotus-focus: #78519e40;
  --lotus-quiet: #78519e0b;
  --lotus-primary: linear-gradient(135deg, #8960ac, #704895);
  color-scheme: light;
}

html { background: var(--c-bg); }
body {
  background-color: var(--c-bg);
  background-image: var(--lotus-wash), url("./dark-lotus.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
#app > .min-h-dvh { background-color: transparent; }
::selection { background: var(--lotus-focus); color: var(--c-text); }
* { scrollbar-color: var(--c-line-3) var(--c-bg); }

/* Reuse the Homepage's original vector mark, retaining accessible SVG labels. */
svg[aria-label="Downtify"] {
  background: url("./lotus-mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 12px #bd94ec26);
  overflow: visible;
}
svg[aria-label="Downtify"] > * { visibility: hidden; }

/* Sign in: a single quiet card against the pond artwork. */
main:has(> section input[autocomplete="username"]) {
  padding-block: max(32px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-bottom));
}
main:has(> section input[autocomplete="username"]) > section {
  max-width: 408px;
  padding: 38px;
  gap: 26px;
  border: 1px solid var(--c-line-3);
  border-radius: 22px;
  background: var(--lotus-card);
  box-shadow: var(--sh-float), inset 0 1px 0 #dfc4ff09;
}
main:has(> section input[autocomplete="username"]) svg[aria-label="Downtify"] {
  width: 74px;
  height: 74px;
  margin-bottom: 2px;
  order: -3;
}
main:has(> section input[autocomplete="username"]) > section > div:first-child::after {
  content: "LOTUSPRINCE";
  order: -2;
  margin: 1px 0 9px;
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
}
main:has(> section input[autocomplete="username"]) h1 {
  letter-spacing: -.035em;
}
main:has(> section input[autocomplete="username"]) section > p:last-child {
  line-height: 1.6;
}

/* The app shell stays dense enough for a music library. */
#app > div > aside {
  background: var(--lotus-side);
  border-right-color: var(--c-line-2);
}
aside a:has(> svg[aria-label="Downtify"]) { gap: 12px; }
aside svg[aria-label="Downtify"] { width: 34px; height: 34px; }
aside a:has(> svg[aria-label="Downtify"]) > span {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.025em;
}
aside a:has(> svg[aria-label="Downtify"]) > span::after {
  content: "LOTUSPRINCE";
  display: block;
  margin-top: 1px;
  color: var(--c-muted);
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.5;
}
aside nav a.bg-surface-2 {
  background: linear-gradient(100deg, var(--lotus-focus), var(--lotus-quiet));
  box-shadow: inset 2px 0 0 var(--c-accent);
  color: var(--c-text);
}
aside nav a.bg-surface-2 > svg { color: var(--c-accent); }
#app > div > div > header {
  border-bottom-color: var(--c-line-2);
  box-shadow: 0 1px 20px #00000008;
}
main h1 { letter-spacing: -.04em; }
[data-home-shelf] {
  background: var(--lotus-card);
  border-color: var(--c-line-2);
  box-shadow: inset 0 1px 0 #ddc0ff05;
}

/* Inset hover treatment cannot be clipped by the virtual album grid. */
.tile {
  border-radius: 14px;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.tile:hover, .tile:focus-within {
  transform: none;
  background-color: var(--lotus-quiet);
  box-shadow: inset 0 0 0 1px var(--c-line-3);
}
button.bg-accent, a.bg-accent {
  background-image: var(--lotus-primary);
  box-shadow: 0 3px 12px #9673bc17;
}
button.bg-accent:hover, a.bg-accent:hover { filter: brightness(1.06); }
:focus-visible { outline-color: var(--c-accent); }
input::placeholder, textarea::placeholder { color: var(--c-faint); }
[role="dialog"] { box-shadow: var(--sh-float); }

@media (min-width: 768px) {
  /* Keep artwork restrained behind the library, but let the sign-in breathe. */
  body:has(main > section input[autocomplete="username"]) {
    --lotus-wash: linear-gradient(100deg, #080711a8 0%, #08071182 53%, #08071133 100%);
  }
  :root[data-theme="light"] body:has(main > section input[autocomplete="username"]) {
    --lotus-wash: linear-gradient(100deg, #f6f1faed 0%, #f6f1fadb 53%, #f6f1fa9e 100%);
  }
}
@media (max-width: 767px) {
  body { background-position: 64% center; background-attachment: scroll; }
  main:has(> section input[autocomplete="username"]) > section {
    padding: 30px 24px;
    border-radius: 20px;
  }
  #app > div > nav[aria-label] {
    border-top-color: var(--c-line-2);
    background-color: var(--c-glass);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tile, button.bg-accent, a.bg-accent { transition: none; }
}