/* ============================================================================
   ALVIN EDGE CLOUD — next.alvin-whn.top · Application Shell v1 (header + footer)
   ----------------------------------------------------------------------------
   next.alvin-whn.top is the RESERVED / EASTER EGG entry (WebGL "fluid" canvas +
   「这是送给你的惊喜」). By explicit user decision (2026-09-19) it now carries the
   SAME top-left lockup and the SAME real portal cosmic-footer as every other
   application shell page — WITHOUT touching the easter-egg body.

   HOW (no site file is modified):
     - the page content lives on the NAS (/vol2/runtime/alvin-edge-cloud-sites/
       testing/current) and stays exactly as it is: it is not edited, not copied
       into Git, and no SPA/bundle string-rewriting happens;
     - the container injects `alvin-app-brand.html` + `alvin-app-footer.html`
       into the HTML document only, and serves this sheet plus the canonical
       assets from /__alvin/ (see ../nginx.conf, mount ./shell).

   BACKGROUND (intentional, do not "fix"):
     this page KEEPS its own background — the colourful fluid canvas is the
     easter egg itself, so NEXT is the one shell page that does NOT get the
     canonical wallpaper. Recorded in docs/branding/APPLICATION_SHELL.md §5.

   The four ALVIN-APP-SHELL:v1 blocks below are verbatim copies of
   brand/application-shell/alvin-app-shell.css (block set is complete on purpose:
   the other targets carry the unused blocks too). Gate:
       node scripts/verify-app-brand.js --static
   ========================================================================= */

/* >>> ALVIN-APP-SHELL:v1 brand-lockup >>> */
.alvin-app-brand{position:fixed;top:max(10px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:60;display:flex;align-items:center;gap:12px;pointer-events:none}
.alvin-app-mark{display:block;width:34px;height:38px;flex:none}
.alvin-app-brandtext{display:flex;flex-direction:column;min-width:0}
.alvin-app-brandtext strong{font:600 19px/1.1 "Segoe UI",sans-serif;letter-spacing:.125em;color:#e1ebef;white-space:nowrap}
.alvin-app-brandtext small{margin-top:4px;font:600 7px/1 "Segoe UI",sans-serif;letter-spacing:.18em;color:#718b98;white-space:nowrap}
@media (max-width:999px){.alvin-app-brand{top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));gap:10px}.alvin-app-brandtext strong{font-size:16px}}
/* <<< ALVIN-APP-SHELL:v1 brand-lockup <<< */

/* >>> ALVIN-APP-SHELL:v1 center-titles >>> */
.alvin-app-title{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.alvin-app-title-zh{font:500 21px/1.2 "Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:.2em;text-indent:.2em;color:#f1f7fa}
.alvin-app-title-en{font:400 8px/1 "Segoe UI",sans-serif;letter-spacing:.3em;text-indent:.3em;color:#a8bcc6;text-transform:uppercase}
@media (max-width:999px){.alvin-app-title-zh{font-size:19px}.alvin-app-title-en{font-size:7px;letter-spacing:.24em;text-indent:.24em}}
/* <<< ALVIN-APP-SHELL:v1 center-titles <<< */

/* >>> ALVIN-APP-SHELL:v1 meta-powered-by >>> */
.alvin-app-meta{display:flex;justify-content:center;align-items:center;flex:none;padding:0 16px 10px}
.alvin-powered-by{font:400 9px/1.4 "Segoe UI",sans-serif;letter-spacing:.16em;color:#64798a}
/* <<< ALVIN-APP-SHELL:v1 meta-powered-by <<< */

/* >>> ALVIN-APP-SHELL:v1 footer-band >>> */
.cosmic-footer {
  position: relative;
  box-sizing: border-box;
  flex: none;
  height: 56px;
  min-height: 56px;
  padding: 6px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(105deg, #141c27, #0f1721 60%, #141b26);
  border-top: 1px solid #a2b2cb1b;
  color: #a5b1bd;
  isolation: isolate;
  font: 400 12px/1.4 "Segoe UI", sans-serif;
}
.cosmic-footer:before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, #d779c000, #a394cf40, #6ec7c13d, #bd974340, transparent);
  pointer-events: none;
}
.copyright-pair {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  color: #a9b6c1;
}
.copyright-pair > span {
  font: 500 10px "Segoe UI", sans-serif;
  letter-spacing: 0.035em;
  white-space: nowrap;
}
.copyright-pair > small {
  font: 400 9px "Segoe UI", sans-serif;
  letter-spacing: 0.22em;
  color: #7e99a9;
}
.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.cosmic-registrations {
  display: flex;
  gap: 25px;
  align-items: center;
  flex: none;
}
.cosmic-registrations a {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;
  transition: filter 0.25s;
}
.cosmic-registrations a:hover {
  filter: drop-shadow(0 0 7px #84bbd04a);
}
.cosmic-registrations img {
  width: 31px;
  height: 34px;
  object-fit: contain;
}
.cosmic-registrations strong {
  font-size: 10px;
  font-weight: 400;
  color: #a3b3c1;
  display: block;
  white-space: nowrap;
}
.cosmic-registrations a:last-child strong {
  color: #b5aa93;
}
.footer-socials {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.social-emblem {
  --social-core: #64727b;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #edf5f8;
  background: radial-gradient(circle at 30% 20%, #ffffff15, transparent 70%), var(--social-core);
  box-shadow: inset 0 1px 0 #ffffff24, 0 3px 10px #0002;
  transition: filter 0.25s, transform 0.25s;
}
.social-emblem svg {
  width: 20px;
  height: 20px;
}
.social-emblem.email {
  --social-core: #a87879;
}
.social-emblem.instagram {
  --social-core: #946b91;
}
.social-emblem.facebook {
  --social-core: #5c80aa;
}
.social-emblem.youtube {
  --social-core: #a45860;
}
.social-emblem.github {
  --social-core: #515b68;
}
.social-emblem:hover {
  transform: translateY(-2px);
  filter: brightness(1.18);
}
@media (max-width: 1200px) {
  .cosmic-footer {
    padding: 6px 22px;
    gap: 18px;
  }
  .copyright-signature {
    min-width: 280px;
  }
  .footer-socials {
    gap: 6px;
  }
  .social-emblem {
    width: 30px;
    height: 30px;
  }
  .social-emblem svg {
    width: 18px;
    height: 18px;
  }
  .cosmic-registrations {
    gap: 12px;
  }
  .cosmic-registrations strong {
    font-size: 8px;
  }
}
@media (max-width: 999px) {
  .cosmic-footer {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 18px;
  }
  .footer-center {
    position: static;
    transform: none;
    order: 3;
    width: 100%;
    margin: 0;
  }
  .footer-socials {
    margin-left: auto;
  }
  .copyright-pair > span {
    white-space: normal;
  }
}
@media (max-width: 540px) {
  .cosmic-registrations {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }
}
/* <<< ALVIN-APP-SHELL:v1 footer-band <<< */

/* ============================================================================
   next-static frame — NOT part of the canonical blocks above.
   The egg document is `html,body{position:fixed;overflow:hidden}` with the
   canvas at z-index 0 and `.overlay` at z-index 1, so the shell is pinned to the
   viewport itself (the band is not a document-flow row here). The egg's own
   faint bottom `.brand` line (opacity .2) sits underneath the opaque band and is
   left in the DOM untouched.
   ========================================================================= */

.cosmic-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
}

/* keep the egg message clear of the band (and of the lockup on top) */
.overlay {
  padding: 96px 20px 76px;
}

@media (max-width: 999px) {
  /* the band wraps to three rows on narrow screens (canonical media query) */
  .overlay {
    padding: 84px 16px 150px;
  }
}

/* the lockup sits on a vivid canvas instead of the canonical wallpaper: a soft
   scrim keeps the wordmark readable without covering the easter egg. */
.alvin-app-brand::before {
  content: "";
  position: absolute;
  inset: -16px -30px -16px -18px;
  border-radius: 20px;
  background: radial-gradient(120px 56px at 34% 50%, #04070d80, #04070d00 72%);
  z-index: -1;
}