/* the small redirect pages (frontend/views/redirect/page.php): a file, since the CSP allows no inline styles */
body { margin: 0; font-family: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; background: #f9fafb; color: #111827; }
main { max-width: 560px; margin: 10vh auto; padding: 0 16px; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 28px; }
.logo { color: #2563EB; font-weight: 700; font-size: 20px; text-decoration: none; }
h1 { font-size: 26px; margin: 16px 0 12px; background: linear-gradient(90deg, #1D4ED8, #2563EB, #0EA5E9); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { color: #4b5563; line-height: 1.5; }
.target { word-break: break-all; background: #f3f4f6; border-radius: 8px; padding: 12px; font-size: 14px; }
.btn { display: inline-block; margin-top: 16px; background: #2563EB; color: #fff; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.muted { font-size: 13px; color: #6b7280; margin-top: 20px; }

/* /legal/offer, /legal/privacy */
.legal main { max-width: 820px; margin: 4vh auto; }
.legal h2 { font-size: 17px; margin: 24px 0 8px; }
.legal p, .legal li { color: #374151; line-height: 1.6; font-size: 15px; }
.legal ul { padding-left: 20px; }
.legal-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.legal-nav span a, .legal-nav span b { margin-left: 10px; }
.legal-nav a { color: #2563EB; text-decoration: none; }
.logo img { vertical-align: middle; margin-right: 6px; }
@media print { body { background: #fff; } .legal-nav, .muted { display: none; } .card { border: 0; padding: 0; } }

/* dark mode (cookie qd_theme=dark, the same switch as the site) */
html.dark { color-scheme: dark; }
.dark body { background: #070b14; color: #e5e7eb; }
.dark .card { background: #0f172a; border-color: #243049; }
.dark p, .dark .legal p, .dark .legal li { color: #cbd5e1; }
.dark .muted { color: #8b9ab3; }
.dark .target { background: #1e293b; }
.dark h1 { background: linear-gradient(90deg, #7dd3fc, #60a5fa, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .legal-nav a, .dark .legal a { color: #60a5fa; }
.dark .logo { color: #f1f5f9; }

/* test mode strip (SITE_TEST_MODE): black with light green, a light runs across it */
.qd-test-banner {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 16px;
  overflow: hidden;
  background: #0b0f19;
  color: #bbf7d0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.qd-test-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(134, 239, 172, 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: qd-banner-light 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qd-banner-light { 60%, 100% { transform: translateX(100%); } }
.qd-test-banner a { color: #86efac; text-decoration: underline; text-underline-offset: 2px; }
.qd-test-banner a:hover { color: #fff; }
.qd-test-banner-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: qd-banner-dot 1.8s ease-out infinite; }
@keyframes qd-banner-dot { to { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .qd-test-banner::after, .qd-test-banner-dot { animation: none; } }

/* "Technical work is in progress" page (frontend/views/site/maintenance.php) */
.maintenance main { margin-top: 8vh; }
.maintenance .card { text-align: center; }
.maintenance .logo { display: inline-flex; align-items: center; }
.gears { position: relative; width: 120px; height: 96px; margin: 18px auto 4px; color: #2563eb; }
.gear { position: absolute; }
.gear-big { width: 76px; height: 76px; left: 4px; top: 10px; animation: gear-spin 6s linear infinite; }
.gear-small { width: 44px; height: 44px; right: 6px; top: 0; color: #4ade80; animation: gear-spin 4s linear infinite reverse; }
@keyframes gear-spin { to { transform: rotate(360deg); } }
.until { font-weight: 700; color: #1d4ed8; }
.progress { height: 6px; margin: 18px auto 6px; max-width: 320px; overflow: hidden; border-radius: 99px; background: #e5e7eb; }
.progress span { display: block; width: 40%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4ade80, #38bdf8, #2563eb); animation: progress-run 1.8s ease-in-out infinite; }
@keyframes progress-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.dark .gears { color: #60a5fa; }
.dark .until { color: #7dd3fc; }
.dark .progress { background: #1e293b; }
@media (prefers-reduced-motion: reduce) { .gear, .progress span { animation: none; } }

/* /contract/verify/<token>: a bank transfer contract's verification page */
.verify main { margin-top: 6vh; }
.verify .card + .card { margin-top: 16px; }
.verify h2 { font-size: 17px; margin: 0 0 12px; }
.verify-head { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; margin: 16px 0 4px; }
.verify-badge { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: 22px; }
.verify-status.ok .verify-head { color: #15803d; }
.verify-status.ok .verify-badge { background: #15803d; }
.verify-status.bad .verify-head { color: #b91c1c; }
.verify-status.bad .verify-badge { background: #b91c1c; }
.verify-data { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 8px; font-size: 15px; }
.verify-data dt { color: #6b7280; }
.verify-data dd { margin: 0; font-weight: 600; word-break: break-word; }
.dark .verify-data dt { color: #8b9ab3; }
.dark .verify-status.ok .verify-head { color: #4ade80; }
.dark .verify-status.bad .verify-head { color: #f87171; }