/*
 * Storm Storage — Filestash Login Theme v5
 * Contained SaaS-style split login.
 * No overlapping pseudo-element roles.
 */

:root {
  --ss-bg: #151922;
  --ss-blue-a: #5368f7;
  --ss-blue-b: #3f37cc;
  --ss-blue-c: #2946bd;
  --ss-white: #ffffff;
  --ss-ink: #151821;
  --ss-muted: #727887;
  --ss-line: #e7e9ee;
  --ss-field: #f7f8fa;
  --ss-field-hover: #f3f4f7;
  --ss-shell-w: min(1180px, calc(100vw - 64px));
  --ss-shell-h: min(700px, calc(100vh - 96px));
}

@keyframes ssShellIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes ssFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ssFormIn {
  from { opacity: 0; transform: translateY(-46%) translateX(18px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@keyframes ssLeftDrift {
  0%, 100% { background-position: 0% 50%, 0 0, 0 0, 0 0; }
  50%      { background-position: 100% 50%, 24px 10px, 0 0, 0 0; }
}

/* ---------- Login-page canvas ---------- */

html:has(input[placeholder="Email"]):has(input[placeholder="Password"]),
body:has(input[placeholder="Email"]):has(input[placeholder="Password"]) {
  min-height: 100%;
  margin: 0 !important;
  background: var(--ss-bg) !important;
}

body:has(input[placeholder="Email"]):has(input[placeholder="Password"]) {
  min-height: 100vh !important;
  overflow: hidden !important;
  color: var(--ss-ink) !important;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
}

/*
 * The complete product shell.
 * Left 56% = animated blue visual.
 * Right 44% = clean white authentication area.
 */
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before {
  content: "";
  position: fixed;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: var(--ss-shell-w);
  height: var(--ss-shell-h);
  transform: translate(-50%, -50%);

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 26px;

  background:
    /* very subtle moving light, clipped to left */
    radial-gradient(
      circle at 22% 22%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 19%,
      transparent 38%
    ),
    /* restrained arc detail, also naturally strongest on left */
    repeating-radial-gradient(
      circle at 6% 108%,
      transparent 0 56px,
      rgba(255,255,255,.075) 57px 59px
    ),
    /* actual split */
    linear-gradient(
      90deg,
      var(--ss-blue-a) 0%,
      var(--ss-blue-b) 56%,
      var(--ss-white) 56%,
      var(--ss-white) 100%
    ),
    var(--ss-white);

  background-size:
    180% 180%,
    58% 100%,
    100% 100%,
    100% 100%;

  background-repeat: no-repeat;
  background-position:
    0% 50%,
    0 0,
    0 0,
    0 0;

  box-shadow:
    0 38px 100px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.08) inset;

  animation:
    ssShellIn .72s cubic-bezier(.22,.8,.24,1) both,
    ssLeftDrift 20s 1s ease-in-out infinite;
}

/* Brand, safely outside the form */
html:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before {
  content: "STORM STORAGE";
  position: fixed;
  z-index: 4;

  top: max(52px, calc(50% - 300px));
  left: max(52px, calc(50% - 540px));

  color: rgba(255,255,255,.96);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .15em;

  animation: ssFadeUp .7s .16s cubic-bezier(.22,.8,.24,1) both;
}

/* One left-side headline. Nothing else shares this pseudo-element. */
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])::after {
  content: "Everything important,\Ain one place.";
  white-space: pre-line;

  position: fixed;
  z-index: 4;

  left: max(52px, calc(50% - 540px));
  top: calc(50% + 70px);
  width: min(500px, 39vw);

  color: #fff;
  font-size: clamp(42px, 4.1vw, 64px);
  line-height: 1.01;
  font-weight: 760;
  letter-spacing: -.052em;

  text-shadow: 0 12px 36px rgba(37,27,111,.22);

  animation: ssFadeUp .78s .24s cubic-bezier(.22,.8,.24,1) both;
}

/* A small abstract mark on the blue visual side */
html:has(input[placeholder="Email"]):has(input[placeholder="Password"])::after {
  content: "✦";
  position: fixed;
  z-index: 4;

  left: max(52px, calc(50% - 540px));
  top: max(116px, calc(50% - 220px));

  color: rgba(255,255,255,.97);
  font-size: 66px;
  line-height: 1;
  font-weight: 400;

  text-shadow: 0 10px 32px rgba(36,27,120,.20);

  animation: ssFadeUp .72s .2s cubic-bezier(.22,.8,.24,1) both;
}

/* ---------- Authentication form ---------- */

body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
form:has(input[placeholder="Email"]):has(input[placeholder="Password"]) {
  position: fixed !important;
  z-index: 5 !important;

  top: 50% !important;
  right: max(52px, calc(50% - 540px)) !important;
  left: auto !important;

  box-sizing: border-box !important;
  width: min(390px, calc(44vw - 80px)) !important;
  margin: 0 !important;
  padding: 108px 0 0 !important;

  /* Important: it is part of the white pane, not a floating glass card. */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  animation: ssFormIn .72s .2s cubic-bezier(.22,.8,.24,1) both;
}

/* Heading */
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
form:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before {
  content: "Welcome back";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  color: var(--ss-ink);
  font-size: 34px;
  line-height: 1.06;
  font-weight: 760;
  letter-spacing: -.045em;

  pointer-events: none;
}

/* Subtitle */
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
form:has(input[placeholder="Email"]):has(input[placeholder="Password"])::after {
  content: "Sign in to access your Storm Storage";
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;

  color: var(--ss-muted);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.008em;

  pointer-events: none;
}

/* Inputs */
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
input[placeholder="Email"],
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
input[placeholder="Password"] {
  appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;

  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 0 14px !important;
  padding: 0 16px !important;

  border: 1px solid var(--ss-line) !important;
  border-radius: 11px !important;
  outline: none !important;

  background: var(--ss-field) !important;
  color: var(--ss-ink) !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 520 !important;

  box-shadow: none !important;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}

body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
input[placeholder="Email"]::placeholder,
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
input[placeholder="Password"]::placeholder {
  color: #8b919f !important;
  opacity: 1 !important;
}

body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
input[placeholder="Email"]:hover,
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
input[placeholder="Password"]:hover {
  background: var(--ss-field-hover) !important;
  border-color: #dde0e7 !important;
}

body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
input[placeholder="Email"]:focus,
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
input[placeholder="Password"]:focus {
  background: #fff !important;
  border-color: #7c83ff !important;
  box-shadow: 0 0 0 4px rgba(124,131,255,.12) !important;
}

/* Sign-in button */
body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
form:has(input[placeholder="Email"]):has(input[placeholder="Password"]) button {
  appearance: none !important;
  box-sizing: border-box !important;

  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin-top: 6px !important;

  border: 0 !important;
  border-radius: 11px !important;

  background: #171923 !important;
  color: #fff !important;

  box-shadow:
    0 10px 24px rgba(20,22,30,.14),
    inset 0 1px 0 rgba(255,255,255,.09) !important;

  cursor: pointer !important;
  font-size: 0 !important;

  transition:
    transform .16s ease,
    background .16s ease,
    box-shadow .16s ease !important;
}

body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
form:has(input[placeholder="Email"]):has(input[placeholder="Password"]) button::after {
  content: "Sign in";
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: -.005em;
}

body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
form:has(input[placeholder="Email"]):has(input[placeholder="Password"]) button:hover {
  transform: translateY(-1px) !important;
  background: #222531 !important;
  box-shadow:
    0 14px 30px rgba(20,22,30,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
form:has(input[placeholder="Email"]):has(input[placeholder="Password"]) button:active {
  transform: translateY(0) scale(.997) !important;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1020px) {
  :root {
    --ss-shell-w: min(720px, calc(100vw - 36px));
    --ss-shell-h: min(650px, calc(100vh - 64px));
  }

  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before {
    background:
      radial-gradient(circle at 50% 0%, rgba(83,104,247,.12), transparent 28%),
      #fff !important;
  }

  html:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before,
  html:has(input[placeholder="Email"]):has(input[placeholder="Password"])::after,
  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])::after {
    display: none !important;
  }

  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
  form:has(input[placeholder="Email"]):has(input[placeholder="Password"]) {
    right: 50% !important;
    width: min(390px, calc(100vw - 80px)) !important;
    transform: translate(50%, -50%) !important;
    animation: none !important;
  }
}

@media (max-width: 520px) {
  :root {
    --ss-shell-w: calc(100vw - 20px);
    --ss-shell-h: calc(100vh - 28px);
  }

  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before {
    border-radius: 20px;
  }

  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
  form:has(input[placeholder="Email"]):has(input[placeholder="Password"]) {
    width: calc(100vw - 58px) !important;
    padding-top: 102px !important;
  }

  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
  form:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before {
    font-size: 30px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before,
  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])::after,
  html:has(input[placeholder="Email"]):has(input[placeholder="Password"])::before,
  html:has(input[placeholder="Email"]):has(input[placeholder="Password"])::after,
  body:has(input[placeholder="Email"]):has(input[placeholder="Password"])
  form:has(input[placeholder="Email"]):has(input[placeholder="Password"]) {
    animation: none !important;
  }
}