.key-page[data-v-0ad39f9c] {
  --sky-ink: #233c58;
  --sky-muted: #6d8499;
  --sky-line: rgba(122, 166, 196, .24);
  --sky-blue: #70b9df;
  --sky-blue-deep: #478db8;
  --sky-gold: #e9b85e;
  --sky-gold-deep: #c98b31;
  --sky-cream: #fff9ec;
  min-height: 100vh;
  color: var(--sky-ink);
  background:
    radial-gradient(circle at 17% 13%, rgba(255, 255, 255, .95) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 18%, rgba(255, 255, 255, .9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 67% 8%, rgba(255, 244, 198, .75) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 108%, rgba(255, 225, 169, .82) 0 20%, transparent 50%),
    linear-gradient(180deg, #69b8e7 0%, #a9dcf3 34%, #e9f6f6 68%, #fff1d5 100%);
  isolation: isolate;
}

.key-page[data-v-0ad39f9c]::before {
  content: "";
  position: fixed;
  inset: auto -8vw -8vh -8vw;
  height: 42vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 72%, rgba(255,255,255,.82) 0 15%, transparent 16%),
    radial-gradient(ellipse at 25% 58%, rgba(255,255,255,.72) 0 18%, transparent 19%),
    radial-gradient(ellipse at 48% 75%, rgba(255,255,255,.88) 0 21%, transparent 22%),
    radial-gradient(ellipse at 72% 56%, rgba(255,255,255,.72) 0 18%, transparent 19%),
    radial-gradient(ellipse at 94% 72%, rgba(255,255,255,.86) 0 16%, transparent 17%);
  filter: blur(12px);
  opacity: .95;
}

.key-page[data-v-0ad39f9c]::after {
  content: "✦";
  position: fixed;
  top: 15vh;
  right: 8vw;
  z-index: -1;
  color: rgba(255, 246, 203, .72);
  font-size: clamp(70px, 10vw, 150px);
  line-height: 1;
  text-shadow: -42vw 14vh 0 rgba(255,255,255,.24), -22vw -8vh 0 rgba(255,255,255,.2);
  transform: rotate(16deg);
  pointer-events: none;
}

.key-page[data-v-0ad39f9c] .blob {
  display: block;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .28;
}

.key-page[data-v-0ad39f9c] .blob-a {
  background: #fff2b8;
}

.key-page[data-v-0ad39f9c] .blob-b {
  background: #d6f5ff;
}

.key-page[data-v-0ad39f9c] .blob-c {
  background: #f8c9a5;
}

.key-page[data-v-0ad39f9c] .page-inner {
  width: min(920px, calc(100% - 36px));
  padding-top: 28px;
  padding-bottom: 36px;
}

.key-page[data-v-0ad39f9c] .topbar {
  min-height: 64px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 22px;
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 12px 34px rgba(49, 98, 128, .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.key-page[data-v-0ad39f9c] .brand-icon {
  color: #fff8dc;
  background: linear-gradient(145deg, #f4cf77, #d99a3f);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 8px 24px rgba(170, 113, 38, .27), inset 0 1px 0 rgba(255,255,255,.55);
  transform: rotate(45deg);
}

.key-page[data-v-0ad39f9c] .brand-icon::first-letter {
  transform: rotate(-45deg);
}

.key-page[data-v-0ad39f9c] .brand-sub,
.key-page[data-v-0ad39f9c] .brand-name {
  color: rgba(39, 71, 96, .62);
  letter-spacing: .18em;
}

.key-page[data-v-0ad39f9c] .topbar h1 {
  color: #213b56;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.key-page[data-v-0ad39f9c] .support-btn,
.key-page[data-v-0ad39f9c] .copy-key-btn {
  color: #315b78;
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.66);
  box-shadow: 0 8px 20px rgba(55, 103, 132, .12);
}

.key-page[data-v-0ad39f9c] .support-btn:hover,
.key-page[data-v-0ad39f9c] .copy-key-btn:hover {
  color: #9a671f;
  border-color: rgba(234, 186, 94, .48);
  background: rgba(255, 250, 233, .9);
  transform: translateY(-1px);
}

.key-page[data-v-0ad39f9c] .glass,
.key-page[data-v-0ad39f9c] .panel,
.key-page[data-v-0ad39f9c] .state-box,
.key-page[data-v-0ad39f9c] .key-entry-card,
.key-page[data-v-0ad39f9c] .login-card,
.key-page[data-v-0ad39f9c] .announcement-card,
.key-page[data-v-0ad39f9c] .inline-login-card {
  border: 1px solid rgba(255,255,255,.8);
  background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(247,252,250,.68));
  box-shadow: 0 24px 60px rgba(45, 92, 121, .17), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}

.key-page[data-v-0ad39f9c] .key-entry-card,
.key-page[data-v-0ad39f9c] .login-card,
.key-page[data-v-0ad39f9c] .announcement-card {
  border-radius: 28px;
}

.key-page[data-v-0ad39f9c] .key-entry-icon,
.key-page[data-v-0ad39f9c] .login-ic,
.key-page[data-v-0ad39f9c] .announcement-icon {
  color: #fff9df;
  border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(145deg, #efc66c, #d99a3e);
  box-shadow: 0 12px 28px rgba(184, 128, 48, .24);
}

.key-page[data-v-0ad39f9c] .key-entry-step,
.key-page[data-v-0ad39f9c] .summary-eyebrow,
.key-page[data-v-0ad39f9c] .form-label,
.key-page[data-v-0ad39f9c] .login-step-label {
  color: #b17a2a;
}

.key-page[data-v-0ad39f9c] .key-entry-card h2,
.key-page[data-v-0ad39f9c] .login-card h2,
.key-page[data-v-0ad39f9c] .panel-title,
.key-page[data-v-0ad39f9c] .state-box h2 {
  color: #233e59;
}

.key-page[data-v-0ad39f9c] .key-entry-desc,
.key-page[data-v-0ad39f9c] .key-entry-hint,
.key-page[data-v-0ad39f9c] .login-sub,
.key-page[data-v-0ad39f9c] .assets-hint,
.key-page[data-v-0ad39f9c] .meta-k,
.key-page[data-v-0ad39f9c] .days-labels,
.key-page[data-v-0ad39f9c] .order-no,
.key-page[data-v-0ad39f9c] .asset-label,
.key-page[data-v-0ad39f9c] .asset-delta.zero {
  color: var(--sky-muted);
}

.key-page[data-v-0ad39f9c] .input,
.key-page[data-v-0ad39f9c] .textarea,
.key-page[data-v-0ad39f9c] .time-input,
.key-page[data-v-0ad39f9c] .key-entry-input {
  color: #28465f;
  border: 1px solid rgba(102, 157, 190, .3);
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 2px 5px rgba(66, 113, 143, .05);
}

.key-page[data-v-0ad39f9c] .input:focus,
.key-page[data-v-0ad39f9c] .textarea:focus,
.key-page[data-v-0ad39f9c] .time-input:focus,
.key-page[data-v-0ad39f9c] .key-entry-input:focus {
  border-color: rgba(213, 156, 62, .72);
  box-shadow: 0 0 0 4px rgba(238, 194, 112, .16), inset 0 2px 5px rgba(66, 113, 143, .04);
}

.key-page[data-v-0ad39f9c] .key-entry-submit,
.key-page[data-v-0ad39f9c] .next-btn,
.key-page[data-v-0ad39f9c] .submit {
  color: #fffdf4;
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(135deg, #efc66e 0%, #d99a3f 100%);
  box-shadow: 0 12px 28px rgba(180, 122, 43, .25), inset 0 1px 0 rgba(255,255,255,.38);
}

.key-page[data-v-0ad39f9c] .key-entry-submit:hover,
.key-page[data-v-0ad39f9c] .next-btn:hover:not(:disabled),
.key-page[data-v-0ad39f9c] .submit:hover:not(:disabled) {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(180, 122, 43, .3), inset 0 1px 0 rgba(255,255,255,.42);
}

.key-page[data-v-0ad39f9c] .submit.ghost,
.key-page[data-v-0ad39f9c] .more-channel-btn,
.key-page[data-v-0ad39f9c] .link-back,
.key-page[data-v-0ad39f9c] .verify-link {
  color: #3f789d;
  border-color: rgba(91, 145, 179, .27);
  background: rgba(240, 250, 254, .76);
  box-shadow: none;
}

.key-page[data-v-0ad39f9c] .order-summary {
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  background:
    radial-gradient(circle at 82% 16%, rgba(255,244,195,.38) 0 4%, transparent 13%),
    linear-gradient(135deg, rgba(66, 139, 185, .92), rgba(94, 180, 204, .86) 62%, rgba(229, 183, 99, .88));
  box-shadow: 0 22px 52px rgba(48, 110, 148, .23), inset 0 1px 0 rgba(255,255,255,.4);
}

.key-page[data-v-0ad39f9c] .order-summary::after {
  color: rgba(255,249,215,.28);
}

.key-page[data-v-0ad39f9c] .summary-eyebrow,
.key-page[data-v-0ad39f9c] .summary-head small {
  color: rgba(255,255,255,.76);
}

.key-page[data-v-0ad39f9c] .days-badge {
  color: #fff8dc;
  border-color: rgba(255,255,255,.48);
  background: rgba(31, 89, 124, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.key-page[data-v-0ad39f9c] .steps {
  color: rgba(46, 77, 98, .48);
}

.key-page[data-v-0ad39f9c] .steps b {
  color: #7690a1;
  border-color: rgba(105, 153, 182, .24);
  background: rgba(255,255,255,.55);
}

.key-page[data-v-0ad39f9c] .steps .active,
.key-page[data-v-0ad39f9c] .steps .done {
  color: #9a6924;
}

.key-page[data-v-0ad39f9c] .steps .active b,
.key-page[data-v-0ad39f9c] .steps .done b {
  color: #fffdf4;
  border-color: rgba(255,255,255,.62);
  background: linear-gradient(145deg, #eac16a, #d6963c);
  box-shadow: 0 6px 16px rgba(176, 118, 43, .22);
}

.key-page[data-v-0ad39f9c] .ch-card {
  color: #294861;
  border-color: rgba(111, 160, 190, .22);
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.key-page[data-v-0ad39f9c] .ch-card:hover:not(.disabled) {
  border-color: rgba(219, 164, 73, .55);
  background: rgba(255,250,235,.82);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(70, 113, 138, .12);
}

.key-page[data-v-0ad39f9c] .ch-card.active {
  color: #79521f;
  border-color: rgba(218, 157, 62, .68);
  background: linear-gradient(145deg, rgba(255,252,237,.94), rgba(255,237,198,.8));
  box-shadow: 0 12px 28px rgba(179, 121, 42, .16), inset 0 1px 0 rgba(255,255,255,.82);
}

.key-page[data-v-0ad39f9c] .ch-icon,
.key-page[data-v-0ad39f9c] .time-icon {
  color: #b27827;
  background: rgba(245, 207, 128, .26);
}

.key-page[data-v-0ad39f9c] .ch-card.active .ch-icon {
  color: #fff9e4;
  background: linear-gradient(145deg, #e9ba5b, #cf8c31);
}

.key-page[data-v-0ad39f9c] .action-btn {
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 12px 28px rgba(51, 105, 137, .13), inset 0 1px 0 rgba(255,255,255,.72);
}

.key-page[data-v-0ad39f9c] .action-btn.pink {
  color: #84551d;
  background: linear-gradient(145deg, rgba(255,249,228,.92), rgba(250,221,165,.82));
}

.key-page[data-v-0ad39f9c] .action-btn.purple {
  color: #2d698d;
  background: linear-gradient(145deg, rgba(243,252,255,.92), rgba(190,226,242,.82));
}

.key-page[data-v-0ad39f9c] .info-bar,
.key-page[data-v-0ad39f9c] .login-status {
  border-color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.52);
  box-shadow: 0 10px 25px rgba(51, 103, 132, .09);
}

.key-page[data-v-0ad39f9c] .info-chip {
  color: #496b83;
}

.key-page[data-v-0ad39f9c] .info-chip i {
  color: #a8732a;
  background: rgba(244, 204, 119, .22);
}

.key-page[data-v-0ad39f9c] .view-tabs {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.42);
  box-shadow: 0 10px 24px rgba(48, 100, 132, .08);
}

.key-page[data-v-0ad39f9c] .view-tabs button {
  color: #6d8798;
}

.key-page[data-v-0ad39f9c] .view-tabs button.active {
  color: #2f6688;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(51, 103, 132, .12), inset 0 -2px 0 rgba(229, 174, 78, .68);
}

.key-page[data-v-0ad39f9c] .asset-cell,
.key-page[data-v-0ad39f9c] .meta-item {
  border-color: rgba(104, 153, 182, .19);
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.key-page[data-v-0ad39f9c] .asset-cell:hover {
  border-color: rgba(221, 166, 75, .36);
  background: rgba(255,251,239,.7);
  transform: translateY(-2px);
}

.key-page[data-v-0ad39f9c] .asset-amount,
.key-page[data-v-0ad39f9c] .meta-v,
.key-page[data-v-0ad39f9c] .days-num {
  color: #294b63;
}

.key-page[data-v-0ad39f9c] .big-red,
.key-page[data-v-0ad39f9c] .asset-amount.is-red {
  color: #cf8b30;
}

.key-page[data-v-0ad39f9c] .asset-delta {
  color: #399274;
}

.key-page[data-v-0ad39f9c] .pager span.on {
  background: #dfa548;
}

.key-page[data-v-0ad39f9c] .relogin {
  color: #fffdf5;
  border-color: rgba(255,255,255,.58);
  background: linear-gradient(135deg, #64a9cf, #4b8fb7);
  box-shadow: 0 12px 28px rgba(50, 112, 149, .2);
}

.key-page[data-v-0ad39f9c] .relogin:hover {
  background: linear-gradient(135deg, #72b7d9, #559bc0);
  transform: translateY(-2px);
}

.key-page[data-v-0ad39f9c] .modal-mask,
.key-page[data-v-0ad39f9c] .login-sheet,
.key-page[data-v-0ad39f9c] .announcement-sheet {
  background: rgba(32, 66, 87, .36);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.key-page[data-v-0ad39f9c] .badge-normal,
.key-page[data-v-0ad39f9c] .login-status.ls-success {
  color: #257b61;
  border-color: rgba(64, 163, 127, .2);
  background: rgba(220, 247, 237, .78);
}

.key-page[data-v-0ad39f9c] .tip-box,
.key-page[data-v-0ad39f9c] .notice {
  color: #57758a;
  border-color: rgba(94, 151, 185, .18);
  background: rgba(236, 248, 253, .58);
}

.key-page[data-v-0ad39f9c] .foot {
  color: rgba(46, 78, 98, .54);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

@media (max-width: 640px) {
  .key-page[data-v-0ad39f9c] {
    background:
      radial-gradient(circle at 82% 12%, rgba(255,244,198,.62) 0 2px, transparent 3px),
      radial-gradient(circle at 50% 108%, rgba(255,225,169,.72) 0 22%, transparent 53%),
      linear-gradient(180deg, #76bee7 0%, #b9e2f3 38%, #edf7f4 72%, #fff0d2 100%);
  }

  .key-page[data-v-0ad39f9c] .page-inner {
    width: min(100% - 20px, 920px);
    padding-top: 10px;
    padding-bottom: 22px;
  }

  .key-page[data-v-0ad39f9c] .topbar {
    min-height: 56px;
    border-radius: 18px;
  }

  .key-page[data-v-0ad39f9c] .key-entry-card,
  .key-page[data-v-0ad39f9c] .login-card,
  .key-page[data-v-0ad39f9c] .announcement-card,
  .key-page[data-v-0ad39f9c] .panel,
  .key-page[data-v-0ad39f9c] .glass {
    border-radius: 22px;
  }

  .key-page[data-v-0ad39f9c] .order-summary {
    border-radius: 22px;
  }

  .key-page[data-v-0ad39f9c] .asset-cell,
  .key-page[data-v-0ad39f9c] .ch-card,
  .key-page[data-v-0ad39f9c] .action-btn {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .key-page[data-v-0ad39f9c] .glass,
  .key-page[data-v-0ad39f9c] .panel,
  .key-page[data-v-0ad39f9c] .key-entry-card,
  .key-page[data-v-0ad39f9c] .order-summary {
    animation: sky-rise .48s ease-out both;
  }

  @keyframes sky-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}