/* FAWN OS layer: tactile surfaces and motion that feel native to the product. */
.fawn-image,
.buck-art {
  display: block;
  background: transparent !important;
  background-image: none !important;
  mix-blend-mode: normal;
  isolation: isolate;
}

.receive-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 20px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 200, 150, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 200, 150, 0.1), rgba(255, 255, 255, 0.035));
}
.receive-profile strong,
.receive-profile span { display: block; }
.receive-profile strong { font-size: 0.95rem; }
.receive-profile span { margin-top: 3px; color: var(--muted); font-size: 0.75rem; }
.receive-avatar,
.receive-qr-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--green);
  background: var(--surface2);
  border: 1px solid rgba(0, 200, 150, 0.48);
  font-weight: 800;
}
.receive-avatar { width: 44px; height: 44px; }
.receive-avatar img,
.receive-qr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.receive-qr-shell {
  position: relative;
  display: inline-block;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.receive-qr-shell svg { width: 200px; height: 200px; }
.receive-qr-avatar {
  position: absolute;
  width: 42px;
  height: 42px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 3px;
  border: 4px solid #fff;
  color: #111;
  background: #fff;
}
.receive-qr-caption { margin-top: 10px; color: var(--muted); font-size: 0.74rem; }

.fawn-custody-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 16px 0 22px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 200, 150, 0.28);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,200,150,0.16), rgba(255,255,255,0.04));
  box-shadow: 0 24px 70px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  transform-style: preserve-3d;
  transition: transform 180ms ease, border-color 180ms ease;
}
.fawn-custody-card::after {
  content: "";
  position: absolute;
  inset: -70% 35% auto -15%;
  height: 180%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.13) 50%, transparent 58%);
  transform: rotate(10deg);
  animation: fawn-os-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
.fawn-custody-card:hover { border-color: rgba(0, 200, 150, 0.7); }
.fawn-custody-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,200,150,0.55);
  border-radius: 17px;
  color: var(--green);
  font-size: 1.35rem;
  background: rgba(0,0,0,0.2);
  box-shadow: inset 0 0 0 7px rgba(0,200,150,0.08), 0 0 28px rgba(0,200,150,0.2);
  transform: translateZ(18px);
}
.fawn-custody-copy strong { display: block; font-size: 0.96rem; }
.fawn-custody-copy span { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.45; margin-top: 4px; }
.fawn-custody-meta { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.fawn-custody-meta span { padding: 7px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
@keyframes fawn-os-sheen { 0%, 55% { transform: translateX(-30%) rotate(10deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(90%) rotate(10deg); opacity: 0; } }
@media (max-width: 720px) {
  .fawn-custody-card { grid-template-columns: 48px minmax(0,1fr); }
  .fawn-custody-mark { width: 46px; height: 46px; }
  .fawn-custody-meta { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .fawn-custody-card::after { animation: none; }
}
/* FAWN frontend design system
   This layer removes stock dashboard cues: flat ink surfaces, editorial type,
   small asymmetries, and a consistent line-mark language. */
:root {
  --fawn-ink: #10130f;
  --fawn-moss: #20291a;
  --fawn-lime: #b8e04b;
  --fawn-line: #36402d;
}

body {
  background-color: var(--fawn-ink);
  background-image: none !important;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

h1, h2, h3, h4, .page-header h1, .balance-amount {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.035em;
}

.sidebar {
  background: #141812 !important;
  border-right-color: var(--fawn-line) !important;
}

.main { max-width: 1260px; }
.page-header { max-width: 720px; padding-left: 0; }
.page-header h1 { font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .98; }

.balance-card, .stat-card, .panel, .tab-section, .news-hero, .learn-hub,
.campus-banner, .article-card, .modal-card {
  box-shadow: none !important;
  border-radius: 12px !important;
}

.balance-card { transform: none; }
.quick-actions { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
.quick-actions .qa-btn:nth-child(2), .quick-actions .qa-btn:nth-child(4) { transform: none; }
.stats-row { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

/* Replace emoji navigation glyphs with quiet line marks. */
.nav-item .icon, .qa-icon, .onboard-icon {
  font-size: 0 !important;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid #4a5a38;
  border-radius: 8px;
  color: var(--fawn-lime);
  background: var(--fawn-moss);
}
.nav-item .icon::before, .qa-icon::before, .onboard-icon::before {
  content: "";
  width: 11px; height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.nav-item:nth-child(2n) .icon::before,
.quick-actions .qa-btn:nth-child(2) .qa-icon::before {
  border-radius: 2px; transform: rotate(45deg);
}
.nav-item:nth-child(3n) .icon::before,
.quick-actions .qa-btn:nth-child(3) .qa-icon::before {
  border-radius: 50% 50% 2px 50%; transform: rotate(-35deg);
}
.nav-item .icon:has(svg)::before, .qa-icon:has(svg)::before { display: none; }
.nav-item .icon svg, .qa-icon svg {
  width: 17px; height: 17px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-item .icon, .qa-icon {
  border-radius: 10px;
  background: transparent;
  border-color: transparent;
}
.quick-actions .qa-icon { margin: 0 auto 8px; }
.user-chip, .balance-pill, .chip, .news-pill-btn, #location-chip, .receive-qr-avatar {
  transform: none !important;
  rotate: 0deg;
}
.nav-item:hover .icon, .nav-item.active .icon, .qa-btn:hover .qa-icon {
  color: var(--fawn-lime);
  background: var(--fawn-moss);
  border-color: #4a5a38;
}

@media (max-width: 768px) {
  .quick-actions, .stats-row { grid-template-columns: 1fr 1fr !important; }
  .quick-actions .qa-btn:nth-child(2), .quick-actions .qa-btn:nth-child(4),
  .article-card:nth-child(2n), .article-card:nth-child(3n) { transform: none; }
}