/* Custom layer on top of Tailwind: glass cards, glows, drawer, micro-interactions */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

.glow { position: fixed; border-radius: 9999px; filter: blur(110px); opacity: .5; pointer-events: none; z-index: 0; }
.glow-1 { width: 480px; height: 480px; background: radial-gradient(circle, #6366f1, transparent 65%); top: -160px; left: -120px; }
.glow-2 { width: 520px; height: 520px; background: radial-gradient(circle, #ec4899, transparent 65%); bottom: -200px; right: -140px; opacity: .32; }
html:not(.dark) .glow { opacity: .22; }

.card {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  backdrop-filter: blur(14px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dark .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); box-shadow: 0 12px 34px rgba(0,0,0,.35); }
.card.hoverable:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(99,102,241,.18); }

.logo-badge {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 18px;
  background: linear-gradient(135deg, #6366f1, #a855f7 55%, #ec4899);
  box-shadow: 0 8px 22px rgba(168,85,247,.45);
}
.logo-badge.small { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }

.label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; color: inherit; opacity: .85; }
.input {
  width: 100%; border-radius: .8rem; padding: .65rem .9rem; font-size: .925rem; outline: none;
  background: rgba(255,255,255,.9); border: 1.5px solid rgba(15,23,42,.12); color: #0f172a;
  transition: border-color .2s, box-shadow .2s;
}
.dark .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #f1f5f9; color-scheme: dark; }
.input:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
.input.valid { border-color: #34d399; }
.input.invalid { border-color: #fb7185; }

.btn-primary {
  width: 100%; padding: .7rem 1rem; border-radius: .85rem; font-weight: 700; color: #fff; font-size: .925rem;
  background: linear-gradient(135deg, #6366f1, #a855f7 55%, #ec4899);
  box-shadow: 0 10px 24px rgba(168,85,247,.35); transition: transform .15s, filter .15s;
}
.btn-primary:hover { filter: brightness(1.08); } .btn-primary:active { transform: scale(.98); }
.btn-ghost {
  padding: .55rem 1rem; border-radius: .8rem; font-weight: 600; font-size: .875rem;
  border: 1.5px solid rgba(120,130,160,.35); transition: background .2s, transform .15s;
}
.btn-ghost:hover { background: rgba(120,130,160,.12); } .btn-ghost:active { transform: scale(.97); }
.btn-danger {
  padding: .55rem 1rem; border-radius: .8rem; font-weight: 600; font-size: .875rem; color: #fb7185;
  border: 1.5px solid rgba(251,113,133,.4); transition: background .2s;
}
.btn-danger:hover { background: rgba(251,113,133,.1); }
.icon-btn {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 16px;
  border: 1.5px solid rgba(120,130,160,.3); transition: background .2s, transform .15s;
}
.icon-btn:hover { background: rgba(120,130,160,.12); } .icon-btn:active { transform: scale(.94); }

.stat { padding: 1.1rem 1.25rem; }
.stat-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.stat-value { font-size: 1.65rem; font-weight: 800; margin-top: .25rem; background: linear-gradient(90deg,#818cf8,#e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; }

.avatar {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none;
  background: linear-gradient(135deg, #6366f1, #ec4899);
}
.chip { font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 9999px; }
.chip-green { background: rgba(52,211,153,.16); color: #34d399; }
.chip-amber { background: rgba(251,191,36,.16); color: #fbbf24; }

.backdrop { position: fixed; inset: 0; background: rgba(2,6,16,.55); backdrop-filter: blur(3px); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(430px, 94vw); z-index: 50;
  background: #fff; transform: translateX(105%); transition: transform .38s cubic-bezier(.32,.72,.28,1);
  display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(0,0,0,.3);
}
.dark .drawer { background: #0b1120; }
.drawer.open { transform: translateX(0); }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; }
.modal.hidden { display: none; }

.link-row { display: flex; align-items: center; gap: .5rem; }
.link-state { font-size: 14px; width: 18px; text-align: center; flex: none; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(10px); z-index: 60;
  background: #0f172a; color: #fff; padding: .7rem 1.1rem; border-radius: .9rem; font-size: .875rem; font-weight: 600;
  box-shadow: 0 16px 40px rgba(0,0,0,.35); opacity: 0; transition: all .3s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.animate-rise { animation: rise .5s ease both; }
.mini-card { border-radius: .9rem; padding: .7rem .85rem; background: rgba(120,130,160,.09); }
code { font-family: ui-monospace, monospace; font-size: .92em; }
::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-thumb { background: rgba(130,140,170,.4); border-radius: 99px; }