/* DEEPMINE v10.2 — wallet card (我的 · 充值 · 提现) and the permission purchase sheet (docs/v10-2-wallet-admin.md A3, B, C).
   Scoped to .wallet-card / .wallet-status / .permission-dialog; every rule sits in the pages layer. Linked from index.html, or
   injected by public/wallet-connect.mjs ensureWalletStyles() when the page does not carry the link. */
@layer pages {
  /* ═════════════════════════ Wallet card ═════════════════════════ */
  .wallet-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--r-lg);
    border: 1px solid rgb(51 166 240 / .32);
    background: radial-gradient(120% 140% at 100% 0%, rgb(51 166 240 / .15), transparent 62%), var(--surface-inset);
    box-shadow: var(--hl-top);
  }
  .wallet-card.is-unbound { border-style: dashed; border-color: rgb(51 166 240 / .42); }
  .wallet-card.is-confirming { border-color: rgb(255 143 112 / .5); }
  .wallet-card-coin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(51 166 240 / .14); border: 1px solid rgb(51 166 240 / .35); }
  .wallet-card-coin .currency-icon { width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
  .wallet-card-copy { display: grid; gap: 2px; min-width: 0; }
  .wallet-card-copy strong { font-size: var(--fs-14); font-weight: 800; color: var(--text-1); }
  .wallet-card-copy small { font-size: var(--fs-12); line-height: 1.35; color: var(--text-3); }
  .wallet-card-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono, ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace);
    font-size: var(--fs-15);
    letter-spacing: 0;
    color: var(--text-1);
  }
  .wallet-card-tools { display: flex; align-items: center; gap: 6px; }
  .wallet-card-copy-button { min-width: 44px; padding: 0 10px; }
  .wallet-card-copy-button .gi { width: 20px; height: 20px; margin: 0; }
  .wallet-card-action { white-space: normal; }
  .wallet-card-note, .wallet-card-confirm { grid-column: 1 / -1; margin: 0; }
  .wallet-card-note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-12); line-height: 1.45; color: var(--warn); }
  .wallet-card-note .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
  .wallet-card-confirm { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-md); background: var(--danger-bg); border: 1px solid rgb(255 120 90 / .3); }
  .wallet-card-confirm p { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: #ffd2c4; }
  .wallet-card-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .wallet-card-confirm-actions .btn { flex: 1 1 120px; }
  @media (max-width: 359px) {
    .wallet-card { grid-template-columns: auto minmax(0, 1fr); }
    .wallet-card-tools, .wallet-card-action { grid-column: 1 / -1; justify-content: flex-end; }
    .wallet-card-action { width: 100%; }
  }
  .wallet-status { margin: 0; }
  .wallet-row-note { margin: 2px 0 0; font-size: var(--fs-12); line-height: 1.45; color: var(--warn); }
  .profile-deposits .profile-withdrawal-address { font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); }

  /* ═════════════════════════ Permission purchase sheet ═════════════════════════ */
  .permission-dialog {
    width: min(380px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: auto;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--text-1);
    text-align: left;
    border: 2px solid transparent;
    border-radius: var(--r-xl);
    background:
      radial-gradient(120% 50% at 50% 0%, rgb(245 200 105 / .14), transparent 60%) padding-box,
      var(--noise) padding-box,
      linear-gradient(180deg, #17402f 0%, #10301f 40%, #0b2219 100%) padding-box,
      linear-gradient(180deg, var(--gold-rim) 0%, var(--gold-400) 30%, var(--gold-700) 70%, var(--gold-900) 100%) border-box;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .7), 0 0 44px -8px rgb(245 190 80 / .45), 0 30px 80px -12px rgb(0 0 0 / .95);
  }
  .permission-dialog[open] { animation: perm-in .32s var(--ease-spring) both; }
  .permission-dialog::backdrop { background: radial-gradient(90% 70% at 50% 45%, rgb(10 36 26 / .9), rgb(2 9 6 / .96)); }
  .permission-dialog[open]::backdrop { animation: perm-fade .26s ease-out both; }
  @keyframes perm-in { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
  @keyframes perm-fade { from { opacity: 0; } to { opacity: 1; } }
  .permission-dialog :is(h2, p, ul) { margin: 0; }
  .permission-dialog ul { padding: 0; list-style: none; }
  .permission-dialog .icon { width: 18px; height: 18px; }

  .perm-head { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 52px 12px; text-align: center; border-bottom: 1px solid rgb(242 205 128 / .22); }
  .perm-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgb(6 19 14 / .72);
    border: 1px solid var(--line-2);
    color: var(--text-2);
    box-shadow: 0 2px 0 rgb(0 0 0 / .4);
  }
  .perm-close:active { transform: scale(.92); color: var(--text-1); }
  .perm-close .gi { width: 22px; height: 22px; }
  .perm-emblem {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #2f6a50, #163b2c 75%);
    border: 2px solid var(--gold-300);
    box-shadow: 0 0 0 4px rgb(245 200 105 / .14), 0 0 26px rgb(245 190 80 / .38), inset 0 2px 0 rgb(255 255 255 / .16);
  }
  .perm-emblem :is(.gi, img, .icon) { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
  .perm-emblem .icon { color: var(--gold-200); }
  .perm-head h2:focus { outline: none; }
  .perm-head h2 { font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--text-1); text-shadow: 0 2px 10px rgb(0 0 0 / .7); }
  .perm-head p { font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }

  .perm-body { display: grid; gap: 10px; padding: 12px 14px 14px; }
  .perm-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; }
  .perm-price .currency-amount { font: 800 36px/1.05 var(--font-display); color: var(--gold-100); text-shadow: 0 0 20px rgb(245 200 105 / .4), 0 2px 0 rgb(0 0 0 / .4); }
  .perm-price .currency-amount .currency-icon { width: 28px; height: 28px; }
  .perm-price .currency-amount small { font: 700 13px/1 var(--font-display); color: var(--text-2); }
  .perm-price > small { font-size: var(--fs-12); color: var(--text-3); }

  .perm-methods { display: grid; gap: 8px; }
  .perm-method-note { margin: -4px 0 0; font-size: var(--fs-12, 12px); color: var(--text-3); text-align: center; }
  .perm-method {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    text-align: left;
    font: inherit;
    color: var(--text-1);
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: rgb(0 0 0 / .22);
    transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-1);
  }
  .perm-method:active:not(:disabled) { transform: scale(.985); }
  .perm-method.is-selected {
    border-color: var(--line-gold-strong);
    background: radial-gradient(120% 100% at 100% 0%, rgb(245 200 105 / .18), transparent 60%), linear-gradient(180deg, #21503d, var(--surface-2));
    box-shadow: var(--hl-top), 0 0 0 1px rgb(245 200 105 / .25);
  }
  .perm-method.is-unavailable { opacity: .62; }
  .perm-method-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(0 0 0 / .26); border: 1px solid var(--line-2); color: var(--text-2); }
  .perm-method.is-selected .perm-method-icon { border-color: var(--gold-300); color: var(--gold-100); }
  .perm-method-icon .currency-icon { width: 24px; height: 24px; }
  .perm-method-icon .icon { width: 20px; height: 20px; }
  .perm-star { color: #ffcf4d; fill: currentColor; }
  .perm-method-copy { display: grid; gap: 1px; min-width: 0; }
  .perm-method-copy b { font-size: var(--fs-14); font-weight: 800; line-height: 1.25; }
  .perm-method-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: 1.35; color: var(--text-3); }
  .perm-method-price { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; min-width: 0; text-align: right; }
  .perm-method-price b { font: 800 17px/1 var(--font-display); color: var(--gold-100); }
  .perm-method-price i { font-style: normal; font-size: var(--fs-11); font-weight: 700; color: var(--text-3); }
  .perm-method-price .icon { width: 16px; height: 16px; align-self: center; }

  .perm-note { margin: 0; }
  .permission-dialog .perm-pay { white-space: normal; }
  .perm-topup { margin-top: -2px; }
  .perm-free {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    font: inherit;
    font-size: var(--fs-13);
    color: var(--jade-300);
    background: none;
    border: 0;
    border-radius: var(--r-md);
  }
  .perm-free:active { background: rgb(80 200 140 / .1); }
  .perm-free-or { color: var(--text-3); }
  .perm-free b { font: 800 14px/1 var(--font-display); color: var(--jade-200); }
  .perm-free .icon { width: 14px; height: 14px; }
  .perm-rules-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 44px;
    font: inherit;
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--text-3);
    background: none;
    border: 0;
    border-top: 1px solid var(--line-1);
  }
  .perm-rules-toggle .icon { width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--dur-2); }
  .perm-rules-toggle .icon.is-open { transform: rotate(-90deg); }
  .perm-rules-body { display: grid; gap: 8px; padding: 2px 2px 4px; }
  .perm-rules-body[hidden] { display: none; }
  .perm-rules-list { display: grid; gap: 8px; }
  .perm-rules-list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-12); line-height: 1.55; color: var(--text-2); }
  .perm-rules-list li > :is(.icon, .gi, .currency-icon) { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--gold-200); }
  .perm-rules-list b { color: var(--gold-100); }
  .perm-owned { display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 18px/1.2 var(--font-display); color: var(--jade-200); }
  .perm-owned .icon { width: 22px; height: 22px; color: var(--jade-300); }
  @media (max-width: 359px) {
    .perm-body { padding-inline: 10px; }
    .perm-method { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding-inline: 10px; }
    .perm-method-icon { width: 32px; height: 32px; }
    .perm-price .currency-amount { font-size: 30px; }
  }
  @media (max-height: 640px) {
    .perm-emblem { width: 48px; height: 48px; }
    .perm-emblem :is(.gi, img, .icon) { width: 30px; height: 30px; }
    .perm-head { padding-top: 12px; }
    .perm-head h2 { font-size: 21px; }
  }
}