:root {
  color-scheme: dark;
  --aw-bg: #060816;
  --aw-bg-2: #111d34;
  --aw-surface: rgba(255, 255, 255, 0.1);
  --aw-surface-soft: rgba(255, 255, 255, 0.06);
  --aw-border: rgba(255, 255, 255, 0.16);
  --aw-text: #f5f7ff;
  --aw-muted: #a7b1c9;
  --aw-accent: #4cc9f0;
  --aw-accent-2: #7c4dff;
  --aw-success: #bbf7d0;
  --aw-danger: #fecdd3;
  --aw-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  --aw-radius-lg: 24px;
  --aw-radius-md: 16px;
  --aw-radius-sm: 12px;
  --aw-space-1: 8px;
  --aw-space-2: 12px;
  --aw-space-3: 16px;
  --aw-space-4: 20px;
  --aw-space-5: 24px;
  --aw-input-bg: rgba(8, 16, 31, 0.88);
}

/* Force one visual mode globally so every page keeps the same identity. */
body[data-theme='light'] {
  color-scheme: dark;
  --aw-bg: #060816;
  --aw-bg-2: #111d34;
  --aw-surface: rgba(255, 255, 255, 0.1);
  --aw-surface-soft: rgba(255, 255, 255, 0.06);
  --aw-border: rgba(255, 255, 255, 0.16);
  --aw-text: #f5f7ff;
  --aw-muted: #a7b1c9;
  --aw-accent: #4cc9f0;
  --aw-accent-2: #7c4dff;
  --aw-input-bg: rgba(8, 16, 31, 0.88);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: 'Cairo', sans-serif !important;
  color: var(--aw-text) !important;
  background: radial-gradient(circle at top right, rgba(76, 201, 240, 0.2), transparent 34%),
    linear-gradient(180deg, var(--aw-bg) 0%, var(--aw-bg-2) 100%) !important;
}

a {
  color: inherit;
  text-decoration: none;
}

label,
.subtle,
.muted,
.eyebrow,
.meta,
.request-meta {
  color: var(--aw-muted) !important;
}

/* Shared Components */
.aw-card,
.card,
.panel,
.panel-card,
.profile-card,
.request-card,
.crypto-card,
.flow-section,
.summary,
.info-box,
.request-item,
.latest-box,
.recipient-card {
  background: var(--aw-surface) !important;
  border: 1px solid var(--aw-border) !important;
  box-shadow: var(--aw-shadow);
  backdrop-filter: blur(14px);
}

.aw-card,
.card,
.panel,
.panel-card,
.request-card,
.crypto-card,
.profile-card {
  border-radius: var(--aw-radius-lg) !important;
}

.aw-input,
input,
textarea,
select,
.token-select {
  background: var(--aw-input-bg) !important;
  color: var(--aw-text) !important;
  border: 1px solid var(--aw-border) !important;
  border-radius: var(--aw-radius-sm) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--aw-muted);
}

.aw-btn,
button,
.primary-btn,
.confirm-btn,
.mode-btn,
.submit-btn {
  background: linear-gradient(135deg, var(--aw-accent), var(--aw-accent-2)) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--aw-radius-sm) !important;
  cursor: pointer;
}

.action-card,
.action-card span,
.action-label,
.mode-btn,
.confirm-btn,
.primary-btn,
.ghost-btn,
.qr-inline-btn,
.back-link {
  color: #ffffff !important;
}

.aw-btn-secondary,
.ghost-btn,
.qr-inline-btn,
.back-link {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--aw-border) !important;
  color: var(--aw-text) !important;
  border-radius: var(--aw-radius-sm) !important;
}

.back-link {
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.aw-qr-card,
.qr-frame,
.reader-shell,
.wallet-address {
  background: var(--aw-input-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--aw-radius-md) !important;
}

.wallet-address {
  color: var(--aw-text) !important;
}

.aw-header,
.page-head,
.topbar,
.request-head,
.card-head,
.panel-head,
.panel-title-row {
  color: var(--aw-text);
}

.aw-footer,
.quick-actions-floating {
  background: linear-gradient(180deg, rgba(10, 18, 36, 0.96), rgba(7, 13, 28, 0.96)) !important;
  border: 1px solid var(--aw-border) !important;
}

.message {
  color: var(--aw-success) !important;
}

.status-cancelled,
.status-failed {
  color: var(--aw-danger) !important;
}

/* Utility spacing for new pages */
.aw-stack {
  display: grid;
  gap: var(--aw-space-3);
}

.aw-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--aw-space-3);
}

@media (max-width: 760px) {
  .aw-grid-2 {
    grid-template-columns: 1fr;
  }
}