/* Material-inspired styling constrained to provided palette */
:root {
  --color-bg: #101140;
  --color-surface: #1E1452;
  --color-surface-alt: #040A4F;
  --color-primary: #2205C2;
  --color-primary-variant: #452FBC;
  --color-secondary: #5562DD;
  --color-accent: #A5D1A6;
  --color-ink: #FFFFFF;
  --color-ink-muted: #A5D1A6;
  /* New muted overlays */
  --overlay-01: rgba(255,255,255,0.02);
  --overlay-02: rgba(255,255,255,0.04);
  --overlay-03: rgba(255,255,255,0.07);
  --outline-faint: rgba(255,255,255,0.08);
  --outline-soft: rgba(255,255,255,0.14);
  --btn-overlay: rgba(255,255,255,0.10);
  --accent-soft: rgba(165,209,166,0.25);
  --accent-faint: rgba(165,209,166,0.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --elev-1: 0 2px 4px -2px rgba(0,0,0,.55),0 2px 3px -1px rgba(0,0,0,.40);
  --elev-2: 0 4px 8px -2px rgba(0,0,0,.55),0 4px 6px -1px rgba(0,0,0,.35);
  --elev-3: 0 6px 14px -4px rgba(0,0,0,.60),0 8px 10px -3px rgba(0,0,0,.45);
  --transition-fast: 130ms cubic-bezier(.4,0,.2,1);
  --transition-micro: 80ms cubic-bezier(.4,0,.2,1);
  --focus-ring: 0 0 0 2px rgba(165,209,166,.35);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html, body { background: radial-gradient(circle at 30% 20%, #101140 0%, #040A4F 65%, #040A4F 100%); color: var(--color-ink); }

/* Softened surfaces */
.m-surface { background: linear-gradient(145deg, var(--color-surface) 0%, #1A0F46 100%); border:1px solid var(--outline-faint); border-radius: var(--radius-md); box-shadow: var(--elev-1); backdrop-filter: blur(4px); }
.m-surface-alt { background: linear-gradient(145deg, #0d123f 0%, #040A4F 100%); border:1px solid var(--outline-faint); border-radius: var(--radius-md); box-shadow: var(--elev-1); }

/* Typography helpers */
.h1 { font-size: 1.75rem; font-weight:600; letter-spacing:.5px; }
.h2 { font-size: 1.25rem; font-weight:600; }
.text-muted { color: var(--color-ink-muted); opacity:.85; }
.caption { font-size:.75rem; letter-spacing:.4px; opacity:.85; }

/* Buttons (muted variant) */
.m-btn { position:relative; display:inline-flex; align-items:center; gap:.5rem; justify-content:center; font-weight:500; font-size:.83rem; letter-spacing:.3px; cursor:pointer; border:none; border-radius: var(--radius-sm); min-height:38px; padding:0 .95rem; background: linear-gradient(135deg,var(--color-primary) 0%, var(--color-primary-variant) 85%); color:var(--color-ink); box-shadow: var(--elev-1); transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-micro); overflow:hidden; }
.m-btn:hover { background: linear-gradient(135deg,var(--color-primary-variant) 5%, var(--color-primary) 95%); }
.m-btn:active { transform: translateY(1px); box-shadow: var(--elev-2); }
.m-btn:focus-visible { outline:none; box-shadow: var(--focus-ring), var(--elev-2); }
.m-btn.secondary { background: linear-gradient(135deg,var(--color-secondary) 0%, var(--color-primary-variant) 90%); }
.m-btn.secondary:hover { filter: brightness(1.08); }
.m-btn.outline { background: rgba(255,255,255,0.02); color: var(--color-accent); border:1px solid var(--accent-faint); box-shadow:none; }
.m-btn.outline:hover { background: var(--accent-faint); }
.m-btn.ghost { background: transparent; color: var(--color-ink-muted); box-shadow:none; }
.m-btn.ghost:hover { background: var(--btn-overlay); }
.m-btn.destructive { background: linear-gradient(135deg,#b42a2a 0%, #8f1d1d 95%); }
.m-btn.destructive:hover { filter: brightness(1.08); }
.m-btn[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; }

/* Ripple */
.m-ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple .6s linear; background:rgba(255,255,255,0.35); pointer-events:none; }
@keyframes ripple { to { transform:scale(3); opacity:0; } }

/* Cards */
.m-card { background: linear-gradient(160deg, rgba(69,47,188,0.08) 0%, rgba(34,5,194,0.06) 60%, rgba(4,10,79,0.35) 100%), var(--color-surface); border:1px solid var(--outline-faint); border-radius: var(--radius-lg); padding:1rem 1.1rem 1.25rem; box-shadow: var(--elev-1); position:relative; }
.m-card.elevated { box-shadow: var(--elev-2); }
.m-card-header { margin-bottom:.75rem; }
.m-card-title { font-size:1.05rem; font-weight:600; letter-spacing:.3px; }

/* Badge (pill) */
.m-badge { display:inline-flex; align-items:center; font-size:.65rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:.25rem .5rem; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--color-accent); border:1px solid var(--outline-faint);}
.m-badge.primary { background: var(--color-primary-variant); }
.m-badge.warn { background: var(--color-secondary); }
.m-badge.danger { background:#b42a2a; }

/* Inputs */
.m-input-wrapper { position:relative; display:flex; flex-direction:column; gap:.35rem; }
.m-input { background: rgba(255,255,255,0.03); border:1px solid var(--outline-faint); color:var(--color-ink); border-radius: var(--radius-sm); min-height:40px; padding:0 .85rem; font-size:.875rem; transition:border var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); }
.m-input:focus { border-color: var(--color-accent); background: rgba(255,255,255,0.05); box-shadow: var(--focus-ring); }
.m-input::placeholder { color: var(--color-ink-muted); opacity:.55; }

/* Checkbox */
.m-checkbox { appearance:none; width:18px; height:18px; border:2px solid var(--color-accent); border-radius:4px; display:inline-grid; place-items:center; background: rgba(255,255,255,0.02); cursor:pointer; position:relative; transition: background var(--transition-fast), border var(--transition-fast); }
.m-checkbox:hover { border-color: var(--color-accent); }
.m-checkbox:checked { background: var(--color-primary-variant); border-color: var(--color-primary-variant); }
.m-checkbox:checked:after { content:""; width:8px; height:8px; background: var(--color-ink); border-radius:2px; }
.m-checkbox:focus-visible { outline:none; box-shadow: var(--focus-ring); }

/* Table */
.m-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.m-table thead th { font-weight:600; text-align:left; padding:.55rem .75rem; background:rgba(255,255,255,0.04); backdrop-filter: blur(3px); position:sticky; top:0; z-index:5; }
.m-table tbody td { padding:.6rem .75rem; border-top:1px solid rgba(255,255,255,0.04); }
.m-table tbody tr { transition: background var(--transition-fast); }
.m-table tbody tr:hover { background: rgba(255,255,255,0.05); }

/* Dropdown */
.m-menu { background: linear-gradient(155deg, rgba(255,255,255,0.05) 0%, rgba(34,5,194,0.08) 100%), var(--color-surface); border:1px solid var(--outline-faint); }
.m-menu-item { padding:.55rem .9rem; font-size:.75rem; cursor:pointer; display:flex; align-items:center; gap:.5rem; color: var(--color-ink); transition: background var(--transition-fast); }
.m-menu-item:hover { background: rgba(255,255,255,0.06); }

/* Dialog & Sheet */
.m-overlay { position: fixed; inset: 0; background: rgba(0,0,12,0.70); z-index: 1000; display: flex; align-items: center; padding: 1rem; }
.m-dialog { background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(4,10,79,0.55) 90%), var(--color-surface); border:1px solid var(--outline-faint); border-radius: var(--radius-lg); box-shadow: var(--elev-3); max-width: 560px; width: 100%; padding: 1rem 1.1rem; position: relative; }
.m-drawer { background: linear-gradient(150deg, rgba(255,255,255,0.045) 0%, rgba(34,5,194,0.10) 70%), var(--color-surface-alt); border-left:1px solid var(--outline-faint); }

/* Scroll area */
.m-scroll { overflow:auto; scrollbar-gutter:stable; }

/* Separator refinement */
.m-separator { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.25), rgba(255,255,255,0.02)); margin:1rem 0; }

/* Utility */
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:.5rem; }
.gap-3 { gap:.75rem; }
.gap-4 { gap:1rem; }
.mt-2 { margin-top:.5rem; }
.mt-4 { margin-top:1rem; }
.mb-2 { margin-bottom:.5rem; }
.text-sm { font-size:.8rem; }
.font-medium { font-weight:500; }
.rounded-full { border-radius:999px; }
.w-full { width:100%; }
.inline-flex { display:inline-flex; }
.cursor-pointer { cursor:pointer; }

/* Notifications badge style override */
.notice { background: linear-gradient(135deg,var(--color-secondary) 0%, var(--color-primary-variant) 90%); color: var(--color-ink); padding:.40rem .75rem; border-radius: var(--radius-md); font-size:.7rem; letter-spacing:.5px; font-weight:600; box-shadow: var(--elev-1); }

/* Minimal spinner */
.m-spinner { width: 18px; height: 18px; border: 3px solid rgba(255,255,255,0.25); border-top-color: var(--color-accent); border-radius: 50%; animation: mspin .8s linear infinite; }
@keyframes mspin { to { transform: rotate(360deg); } }

/* Wallet link highlight */
.wallet-highlight { position:relative; isolation:isolate; }
.wallet-highlight .m-btn { background:linear-gradient(135deg,var(--color-accent) 0%, var(--color-secondary) 90%); color:var(--color-ink); font-weight:600; letter-spacing:.4px; }
.wallet-highlight .m-btn:hover { filter:brightness(1.08); }
.wallet-pulse { animation:walletPulse 1.8s ease-in-out infinite; border-radius:var(--radius-lg); }
@keyframes walletPulse { 0% { box-shadow:0 0 0 0 rgba(165,209,166,0.55);} 70% { box-shadow:0 0 0 18px rgba(165,209,166,0); } 100% { box-shadow:0 0 0 0 rgba(165,209,166,0);} }
.disabled-dim { opacity:.35; pointer-events:none; filter:grayscale(.35) brightness(.8); }
.wallet-banner { background:linear-gradient(145deg, rgba(165,209,166,0.12) 0%, rgba(69,47,188,0.18) 60%, rgba(34,5,194,0.22) 100%); border:1px solid var(--outline-faint); border-radius:var(--radius-md); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.6rem; }
.wallet-banner h3 { margin:0; font-size:.95rem; font-weight:600; letter-spacing:.4px; }
.wallet-banner p { margin:0; font-size:.7rem; line-height:1.3; color:var(--color-ink-muted); }