/* Ruble UI Recovery v1.0.0
 * Wallet-only contrast restoration plus the established subtle brand hover.
 * Loaded after the existing application stylesheet.
 */

html[data-view="wallet"],
html[data-view="wallet"] body {
  background: #07080b;
  color-scheme: dark;
}

.app-shell--wallet {
  --paper: #07080b;
  --paper-deep: #090b10;
  --surface: #10131a;
  --ink: #f4f6fa;
  --ink-soft: #c7ccd6;
  --muted: #9aa2b2;
  --line: #252a34;
  --line-dark: #4c5360;
  --red: #ef3f47;
  --red-dark: #ff5059;
  --red-faint: #3a161a;
  --green: #42d69a;
  --green-faint: #153329;
  --amber: #f1b957;
  --amber-faint: #3a2f16;
  --night: #07080b;
  --night-soft: #10131a;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  background: var(--paper);
  color: var(--ink);
}

.app-shell--wallet .site-header {
  background: rgba(7, 8, 11, 0.96);
}

.app-shell--wallet input,
.app-shell--wallet select,
.app-shell--wallet .input-with-action button,
.app-shell--wallet .secret-output {
  background: #0b0d12;
  color: var(--ink);
}

.app-shell--wallet input::placeholder {
  color: #747d8e;
}

.app-shell--wallet .backup-card,
.app-shell--wallet .draft-card {
  border-color: #725a22;
  background: #3a2f16;
}

.app-shell--wallet .notice--error {
  border-color: #7f2730;
  color: #ffb7bb;
}

.app-shell--wallet .notice--success {
  border-color: #27664d;
  color: #baf4dc;
}

.app-shell--wallet .notice--info {
  border-color: #725a22;
  color: #f1d49a;
}

.app-shell--wallet .local-sign {
  border-color: #27664d;
  color: #42d69a !important;
}

.app-shell--wallet .beta-warning {
  color: #f1d49a;
}

.site-header .brand img {
  transform-origin: 50% 50%;
  transition: transform .35s ease, filter .35s ease;
}

.site-header .brand:hover img,
.site-header .brand:focus-visible img,
.site-header a:focus-visible .brand img {
  transform: rotate(-8deg) scale(1.04);
  filter: drop-shadow(0 12px 24px rgba(239, 63, 71, .42));
}

.app-shell--explorer .site-header .brand:hover img,
.app-shell--explorer .site-header .brand:focus-visible img,
.app-shell--explorer .site-header a:focus-visible .brand img {
  transform: translateY(1px) rotate(-8deg) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand img {
    transition: none;
  }

  .site-header .brand:hover img,
  .site-header .brand:focus-visible img,
  .site-header a:focus-visible .brand img {
    transform: none;
    filter: none;
  }

  .app-shell--explorer .site-header .brand:hover img,
  .app-shell--explorer .site-header .brand:focus-visible img,
  .app-shell--explorer .site-header a:focus-visible .brand img {
    transform: translateY(1px);
    filter: none;
  }
}