/* RoyalSonic Vault — cohesive studio chrome (login + app) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");

:root {
  --rs-deep: #071820;
  --rs-ink: #0b3d4a;
  --rs-panel: #0f2a33;
  --rs-surface: #16424d;
  --rs-line: rgba(232, 241, 244, 0.12);
  --rs-line-strong: rgba(232, 241, 244, 0.22);
  --rs-text: #e8f1f4;
  --rs-muted: #9bb4bc;
  --rs-accent: #c9a227;
  --rs-accent-soft: rgba(201, 162, 39, 0.16);
  --rs-card: #ffffff;
  --rs-card-ink: #14262c;
  --rs-card-muted: #5b7178;
  --rs-font: "Manrope", "Segoe UI", sans-serif;
  --rs-display: "Fraunces", "Palatino Linotype", Georgia, serif;
  --rs-radius: 12px;
  --rs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body {
  font-family: var(--rs-font) !important;
  background: var(--rs-deep) !important;
  color: var(--rs-text) !important;
  min-height: 100% !important;
  -webkit-font-smoothing: antialiased;
}

[class*="download"],
[class*="Download"],
a[href*="download.psono"],
.top-bar, .announcement, .banner-download,
.rs-hide-vendor, [data-rs-hide="1"] {
  display: none !important;
}

/* LOGIN */
body.rs-vault-login {
  background:
    radial-gradient(1000px 520px at 12% -8%, rgba(61, 139, 143, 0.28), transparent 55%),
    radial-gradient(900px 480px at 88% 108%, rgba(201, 162, 39, 0.14), transparent 50%),
    linear-gradient(165deg, #071820 0%, #0b3d4a 48%, #12263a 100%) !important;
}
body.rs-vault-login #app,
body.rs-vault-login #app > div {
  background: transparent !important;
  min-height: 100vh !important;
}
.rs-login-card {
  background: var(--rs-card) !important;
  color: var(--rs-card-ink) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset, 0 28px 60px rgba(0,0,0,0.35) !important;
  padding: 1.65rem 1.45rem 1.25rem !important;
  border: 0 !important;
  max-width: 400px !important;
  width: min(400px, 92vw) !important;
  margin: 2.75rem auto !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  animation: rs-rise 520ms var(--rs-ease) both;
}
@keyframes rs-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.rs-login-card img,
body.rs-vault-login img[src*="logo"],
body.rs-vault-login img[src*="royalsonic"] {
  display: block !important;
  max-height: 46px !important;
  width: auto !important;
  max-width: 190px !important;
  height: auto !important;
  margin: 0 auto 1.15rem !important;
  object-fit: contain !important;
  background: transparent !important;
}
.rs-login-card .mdc-text-field,
.rs-login-card .MuiTextField-root {
  margin-top: 0.85rem !important;
  margin-bottom: 0.35rem !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: visible !important;
}
.rs-login-card .mdc-floating-label,
.rs-login-card .MuiFormLabel-root,
.rs-login-card label {
  color: var(--rs-card-muted) !important;
  font-weight: 600 !important;
  font-family: var(--rs-font) !important;
  background: #fff !important;
  padding: 0 0.35rem !important;
}
.rs-login-card .mdc-text-field--outlined .mdc-notched-outline__leading,
.rs-login-card .mdc-text-field--outlined .mdc-notched-outline__notch,
.rs-login-card .mdc-text-field--outlined .mdc-notched-outline__trailing,
.rs-login-card .MuiOutlinedInput-notchedOutline {
  border-color: #d7e2e6 !important;
}
.rs-login-card .mdc-text-field--focused .mdc-notched-outline__leading,
.rs-login-card .mdc-text-field--focused .mdc-notched-outline__notch,
.rs-login-card .mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: #3d8b8f !important;
}
body.rs-vault-login input,
body.rs-vault-login .MuiInputBase-input {
  font-family: var(--rs-font) !important;
  color: var(--rs-card-ink) !important;
  background: #fff !important;
}
body.rs-vault-login .MuiButton-containedPrimary,
body.rs-vault-login button[type="submit"],
body.rs-vault-login button.mdc-button--raised,
body.rs-vault-login button.mdc-button--unelevated {
  background: var(--rs-ink) !important;
  border-color: var(--rs-ink) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-family: var(--rs-font) !important;
  min-height: 44px !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background 180ms var(--rs-ease), transform 180ms var(--rs-ease) !important;
}
body.rs-vault-login .MuiButton-containedPrimary:hover,
body.rs-vault-login button[type="submit"]:hover {
  background: #0e4f5f !important;
  transform: translateY(-1px);
}
body.rs-vault-login a[href*="lost"],
body.rs-vault-login a[href*="password"],
body.rs-vault-login a[href*="delete"],
body.rs-vault-login footer a {
  color: rgba(255,255,255,0.86) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
}
.rs-login-card a { color: var(--rs-card-muted) !important; }

/* APP SHELL */
body.rs-vault-app { background: var(--rs-deep) !important; }
body.rs-vault-app #app,
body.rs-vault-app #app > div {
  background: transparent !important;
  min-height: 100vh !important;
}
body.rs-vault-app .MuiAppBar-root,
body.rs-vault-app header.MuiPaper-root {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%), var(--rs-ink) !important;
  color: var(--rs-text) !important;
  box-shadow: 0 1px 0 var(--rs-line-strong), 0 10px 28px rgba(0,0,0,0.22) !important;
  border-bottom: 1px solid rgba(201,162,39,0.28) !important;
}
body.rs-vault-app .MuiToolbar-root {
  min-height: 58px !important;
  padding-left: 12px !important;
  padding-right: 16px !important;
  gap: 10px;
}
body.rs-vault-app .MuiAppBar-root,
body.rs-vault-app .MuiAppBar-root * { color: var(--rs-text) !important; }
body.rs-vault-app .MuiAppBar-root .MuiTypography-root,
body.rs-vault-app .MuiAppBar-root span {
  color: var(--rs-muted) !important;
  font-family: var(--rs-font) !important;
  font-weight: 500 !important;
}
body.rs-vault-app .MuiAppBar-root img,
body.rs-vault-app header img[src*="royalsonic"],
body.rs-vault-app header img[src*="logo"] {
  display: block !important;
  max-height: 34px !important;
  width: auto !important;
  max-width: 160px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
body.rs-vault-app .MuiAppBar-root .MuiButton-containedPrimary,
body.rs-vault-app .MuiAppBar-root .MuiButton-contained,
body.rs-vault-app .MuiButtonGroup-root .MuiButton-containedPrimary {
  background: rgba(255,255,255,0.08) !important;
  color: var(--rs-text) !important;
  border: 1px solid var(--rs-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-family: var(--rs-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  min-height: 36px !important;
  padding: 4px 12px !important;
  transition: background 180ms var(--rs-ease), border-color 180ms var(--rs-ease) !important;
}
body.rs-vault-app .MuiAppBar-root .MuiButton-containedPrimary:hover,
body.rs-vault-app .MuiAppBar-root .MuiButton-contained:hover {
  background: var(--rs-accent-soft) !important;
  border-color: rgba(201,162,39,0.45) !important;
}
body.rs-vault-app .MuiAppBar-root .MuiAvatar-root {
  background: var(--rs-accent-soft) !important;
  color: var(--rs-accent) !important;
  width: 28px !important;
  height: 28px !important;
}
body.rs-vault-app .MuiIconButton-root {
  color: var(--rs-text) !important;
  border-radius: 10px !important;
}
body.rs-vault-app .MuiIconButton-root:hover {
  background: rgba(255,255,255,0.08) !important;
}
body.rs-vault-app .MuiDrawer-paper,
body.rs-vault-app .MuiDrawer-docked .MuiDrawer-paper {
  background: linear-gradient(180deg, rgba(201,162,39,0.05), transparent 120px), var(--rs-panel) !important;
  color: var(--rs-text) !important;
  border-right: 1px solid var(--rs-line) !important;
}
body.rs-vault-app .MuiListSubheader-root {
  color: var(--rs-accent) !important;
  font-family: var(--rs-font) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 2.2 !important;
}
body.rs-vault-app .MuiListItem-root,
body.rs-vault-app .MuiListItemButton-root {
  margin: 2px 10px !important;
  border-radius: 10px !important;
  color: var(--rs-text) !important;
  transition: background 160ms var(--rs-ease) !important;
}
body.rs-vault-app .MuiListItem-root:hover,
body.rs-vault-app .MuiListItemButton-root:hover {
  background: rgba(255,255,255,0.06) !important;
}
body.rs-vault-app .MuiListItem-root.Mui-selected,
body.rs-vault-app .Mui-selected.MuiListItem-root,
body.rs-vault-app .MuiListItemButton-root.Mui-selected {
  background: var(--rs-accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--rs-accent);
}
body.rs-vault-app .MuiListItemIcon-root,
body.rs-vault-app .MuiListItemIcon-root svg {
  color: var(--rs-muted) !important;
  min-width: 38px !important;
}
body.rs-vault-app .MuiListItemText-primary,
body.rs-vault-app .MuiTypography-body1 {
  font-family: var(--rs-font) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--rs-text) !important;
}
body.rs-vault-app #app > div > div {
  background:
    radial-gradient(900px 420px at 70% 0%, rgba(61,139,143,0.16), transparent 55%),
    radial-gradient(700px 380px at 10% 90%, rgba(201,162,39,0.08), transparent 50%),
    linear-gradient(160deg, #0d2430 0%, #143a42 55%, #0f2a33 100%) !important;
  min-height: calc(100vh - 58px);
}
body.rs-vault-app .MuiTypography-h5,
body.rs-vault-app .MuiTypography-h6 {
  font-family: var(--rs-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--rs-text) !important;
}
body.rs-vault-app .MuiTypography-body2 {
  color: var(--rs-muted) !important;
  font-family: var(--rs-font) !important;
}
body.rs-vault-app .MuiButton-containedPrimary {
  background: var(--rs-accent) !important;
  color: #1a1404 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 700 !important;
  font-family: var(--rs-font) !important;
  letter-spacing: 0.01em !important;
  transition: background 180ms var(--rs-ease), transform 180ms var(--rs-ease) !important;
}
body.rs-vault-app .MuiButton-containedPrimary:hover {
  background: #dbb43a !important;
  transform: translateY(-1px);
}
body.rs-vault-app .MuiButton-outlined,
body.rs-vault-app .MuiButton-text {
  text-transform: none !important;
  font-family: var(--rs-font) !important;
  border-radius: 10px !important;
  color: var(--rs-text) !important;
}
body.rs-vault-app .MuiPaper-root:not(.MuiAppBar-root):not(.MuiDrawer-paper) {
  background: rgba(15,42,51,0.72) !important;
  color: var(--rs-text) !important;
  border: 1px solid var(--rs-line) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18) !important;
  border-radius: var(--rs-radius) !important;
  backdrop-filter: blur(8px);
}
body.rs-vault-app .MuiDivider-root { border-color: var(--rs-line) !important; }
body.rs-vault-app .MuiInputBase-root,
body.rs-vault-app .MuiOutlinedInput-root {
  color: var(--rs-text) !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 10px !important;
}
body.rs-vault-app .MuiOutlinedInput-notchedOutline {
  border-color: var(--rs-line-strong) !important;
}
body.rs-vault-app .MuiMenu-paper,
body.rs-vault-app .MuiPopover-paper {
  background: #123640 !important;
  color: var(--rs-text) !important;
  border: 1px solid var(--rs-line-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35) !important;
}
body.rs-vault-app .MuiMenuItem-root:hover {
  background: rgba(255,255,255,0.06) !important;
}
@media (max-width: 900px) {
  body.rs-vault-app .MuiToolbar-root { min-height: 52px !important; }
  body.rs-vault-app .MuiAppBar-root img { max-height: 28px !important; }
}