/* App bundle — theme + common-ui (all pages, local assets = fast load) */

/* === theme === */
:root {
  --theme-text: #eaf2ff;
  --theme-muted: #b7c4d6;
  --theme-accent-1: rgba(124, 92, 255, 0.18);
  --theme-accent-2: rgba(52, 211, 153, 0.14);
  --theme-bg-1: #0f1a2e;
  --theme-bg-2: #1a2947;
  --theme-outline: rgba(255, 255, 255, 0.12);
  --theme-glass: rgba(255, 255, 255, 0.06);
}
html, body { min-height: 100%; }
body {
  color: var(--theme-text);
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--theme-accent-1), transparent 65%),
    radial-gradient(900px 480px at 105% 0%, var(--theme-accent-2), transparent 60%),
    linear-gradient(180deg, var(--theme-bg-1), var(--theme-bg-2)) !important;
  background-attachment: fixed !important;
}
.glass-surface {
  background: linear-gradient(180deg, var(--theme-glass), rgba(255,255,255,.03));
  border: 1px solid var(--theme-outline);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 36px rgba(5,8,20,.48);
  border-radius: 14px;
}
.chip, .btn, .pill, .badge { will-change: transform, box-shadow, opacity; }
@media (max-width: 820px) {
  body {
    background:
      radial-gradient(800px 380px at 10% -10%, var(--theme-accent-1), transparent 60%),
      radial-gradient(700px 340px at 110% -6%, var(--theme-accent-2), transparent 55%),
      linear-gradient(180deg, var(--theme-bg-1), var(--theme-bg-2)) !important;
  }
}

/* === common-ui (header, loader, transition) === */
#appHeader, #appFooter { position: relative; z-index: 50; }
.glass {
  background:
    radial-gradient(1200px 500px at -30% -40%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(900px 400px at 120% -10%, rgba(52,211,153,.12), transparent 60%),
    linear-gradient(130deg, rgba(124,92,255,.18), rgba(52,211,153,.12));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: ""; position: absolute; inset: -2px;
  background: conic-gradient(from 180deg at 50% 50%, rgba(124,92,255,.0), rgba(124,92,255,.22), rgba(52,211,153,.14), rgba(124,92,255,.0));
  filter: blur(18px);
  opacity: .45; pointer-events: none; animation: glow-rotate 5.5s linear infinite;
}
@keyframes glow-rotate { to { transform: rotate(360deg); } }
.h-wrap {
  margin: 12px auto; max-width: 1100px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  animation: drop-in .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.h-title { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.h-title img { height: 40px; width: auto; object-fit: contain; flex-shrink: 0; }
.h-title .welcome { font-size: 16px; }
.h-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, #7c5cff, #9a8cff); color: #0b1324; border: none;
  box-shadow: 0 10px 22px rgba(124,92,255,.35);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.chip.secondary {
  background: rgba(255,255,255,.06); color: #eaf2ff; border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(124,92,255,.4); filter: brightness(1.02); }
.chip.active { outline: 2px solid rgba(255,255,255,.25); }
.f-wrap {
  margin: 18px auto; max-width: 1100px; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  animation: rise-in .5s .1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.f-links { display: flex; gap: 12px; flex-wrap: wrap; }
.f-links a { color: #eaf2ff; opacity: .9; text-decoration: none; position: relative; }
.f-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, #7c5cff, #34d399);
  transition: right .22s ease;
}
.f-links a:hover::after { right: 0; }
.muted { color: #b7c4d6; }
@media (max-width: 720px) {
  .h-title img { height: 32px; }
  .h-title .welcome { display: none; }
}
#appLoader { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
#appLoader.show { display: flex; animation: fade-in .18s ease both; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
.loader-card {
  padding: 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display: flex; align-items: center; gap: 12px;
}
.ring {
  width: 28px; height: 28px; border-radius: 50%;
  background: conic-gradient(from 0deg, #7c5cff, #34d399, #7c5cff);
  -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 61%);
  mask: radial-gradient(farthest-side, transparent 60%, #000 61%);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.loader-text { font-weight: 800; color: #eaf2ff; }
#appTransition { position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: 0; }
#appTransition.active {
  opacity: 1;
  --tx: 50vw; --ty: 50vh;
  background:
    radial-gradient(200px 200px at var(--tx) var(--ty), rgba(124,92,255,.35), rgba(52,211,153,.28) 60%, transparent 62%),
    radial-gradient(180px 180px at var(--tx) var(--ty), rgba(124,92,255,.8), rgba(15,27,45,.96) 65%),
    linear-gradient(180deg, rgba(15,27,45,.96), rgba(26,43,71,.98));
  animation: cover .32s ease forwards;
}
@keyframes cover {
  from { clip-path: circle(0% at var(--tx) var(--ty)); }
  to { clip-path: circle(140% at var(--tx) var(--ty)); }
}