/* Alpha Scorpion · 星图 v3 · shell.css（全站共用：登录状态、连接钱包、搜索、账户菜单、提示）
 * <html data-auth="guest|user"> 由页头脚本在渲染前设好（merge_responsive.py 的 AUTH）。
 * 模板里只给游客看的块加 class="as-g"，只给已登录用户看的加 class="as-u"。
 * 下面的覆盖层由 shell.js 插到 <body>，数值来自 Figma「AlpSco · Rebuild」：02 登录、04 搜索、14 账户菜单、Toast。
 */
html[data-auth="guest"] .as-u,
html[data-auth="user"] .as-g { display: none !important; }
/* 搜索面板打开时已经能看出输入框有焦点，不再叠一圈焦点框（Figma 无） */
input[data-as="search"]:focus-visible { outline: none; }

/* —— 共用 —— */
.as-card, .as-spage { color: #ECE6D6; font-family: 'Noto Serif SC', 'Songti SC', serif; -webkit-font-smoothing: antialiased; }
.as-card *, .as-card *::before, .as-card *::after, .as-spage *, .as-layer { box-sizing: border-box; }
:where(.as-card, .as-spage) p { margin: 0; }
:where(.as-card, .as-spage) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.as-card, .as-spage) input { font: inherit; color: inherit; background: transparent; border: 0; margin: 0; padding: 0; outline: none; min-width: 0; -webkit-appearance: none; appearance: none; }
.as-card input::-webkit-search-cancel-button, .as-spage input::-webkit-search-cancel-button { -webkit-appearance: none; }
:where(.as-card, .as-spage) :where(a, a:hover) { color: inherit; text-decoration: none; }
.as-card :focus-visible, .as-spage :focus-visible { outline: 2px solid #F6E7B8; outline-offset: 2px; }
.as-card svg, .as-spage svg, .as-toast svg { display: block; flex: none; }
.as-num { font-family: 'Cormorant Infant', serif; font-weight: 600; }
.as-hl { color: #D8B46A; }

.as-card { box-sizing: border-box; background: #0A0E16; border: 1px solid rgba(201,164,92,0.24); border-radius: 4px; box-shadow: 0 0 40px rgba(201,164,92,0.12); }

/* 12px 文字在 Figma 里行高 17（Noto Serif SC 默认行高），钉死，避免 0.5px 累积 */
.as-dh-t p, .as-wallet-t span, .as-tag, .as-chk, .as-terms, .as-hint, .as-note, .as-tf > span, .as-mw-h, .as-foot > span { line-height: 17px; }
.as-wallet-t b { line-height: 23px; }

/* 遮罩 + 弹窗 / 底部弹层 */
.as-layer { position: fixed; inset: 0; z-index: 60; }
.as-scrim { position: absolute; inset: 0; background: rgba(5,7,12,0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: asFade .3s ease both; }
.as-modal-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.as-modal { position: relative; width: 440px; max-width: 100%; margin: auto; overflow: hidden; animation: asPop .36s cubic-bezier(.16,1,.3,1) both; }
.as-sheet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px; max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain;
  border-width: 1px 0 0; border-radius: 12px 12px 0 0; animation: asUp .42s cubic-bezier(.16,1,.3,1) both; }
.as-closing .as-scrim { animation: asFadeOut .24s ease both; }
.as-closing .as-modal { animation: asPopOut .2s ease both; }
.as-closing .as-sheet { animation: asDown .26s cubic-bezier(.7,0,.84,0) both; }
.as-spage.as-closing { animation: asFadeOut .2s ease both; }

/* Dialog Header：电脑 20/20/18/24；手机带拖动条 8/16/14 */
.as-dh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 18px 24px; border-bottom: 1px solid rgba(201,164,92,0.16); }
.as-sheet .as-dh { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 16px 14px; }
.as-dh-grab { display: none; width: 36px; height: 4px; border-radius: 2px; background: rgba(201,164,92,0.35); align-self: center; }
.as-sheet .as-dh-grab { display: block; }
.as-dh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 auto; min-width: 0; }
.as-dh-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.as-dh-t h2 { margin: 0; font-size: 18px; font-weight: 500; line-height: normal; letter-spacing: 0.08em; }
.as-dh-t p { font-size: 12px; color: #A9A49A; }
.as-x { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.as-x:hover svg path:first-child { stroke-opacity: 0.6; }

/* Connect Modal 内容：电脑 22/24/24，手机 18/16/30 */
.as-cb { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 24px; }
.as-sheet .as-cb { padding: 18px 16px calc(30px + env(safe-area-inset-bottom)); }
.as-wallet { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #D8B46A; border-radius: 4px; background: rgba(216,180,106,0.05); }
.as-mark { flex: none; width: 40px; height: 40px; border: 1px solid rgba(201,164,92,0.35); border-radius: 4px; background: #070A11; display: flex; align-items: center; justify-content: center; }
.as-mark.as-s { width: 32px; height: 32px; }
.as-wallet-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.as-wallet-t b { font-size: 16px; font-weight: 500; letter-spacing: 0.08em; }
.as-wallet-t span { font-size: 12px; color: #A9A49A; overflow: hidden; text-overflow: ellipsis; }
.as-tag { flex: none; display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid rgba(216,180,106,0.5); border-radius: 999px; font-size: 12px; color: #F6E7B8; white-space: nowrap; }
.as-tag.as-quiet { border-color: rgba(201,164,92,0.24); color: #A9A49A; }
.as-para { font-size: 12px; line-height: 1.6; color: #A9A49A; }
.as-btn { width: 100%; height: 44px; padding: 0 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, #E9C97F 0%, #C9A45C 100%); color: #15110A !important; font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-align: center !important; transition: filter .2s; }
.as-btn:hover { filter: brightness(1.06); }
.as-safe { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(201,164,92,0.1); }
.as-chk { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.as-chk.as-acc { color: #F6E7B8; }
.as-terms { font-size: 12px; color: #8E897C; }
.as-terms span { color: #D8B46A; }

/* 设置用户名 */
.as-connected { display: flex; flex-direction: column; gap: 6px; }
.as-addr { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; }
.as-addr .as-num { font-size: 14px; line-height: 17px; letter-spacing: 0.02em; white-space: nowrap; }
.as-addr.as-s .as-num { font-size: 12px; line-height: 16px; }   /* Figma Address Chip S 高 16 */
.as-addr:hover .as-num { color: #F6E7B8; }
.as-fw { display: flex; flex-direction: column; gap: 6px; }
.as-tf { display: flex; flex-direction: column; gap: 4px; }
.as-tf > span { font-size: 12px; color: #A9A49A; letter-spacing: 0.06em; }
.as-tf > div { padding: 6px 0; border-bottom: 1px solid rgba(201,164,92,0.35); transition: border-color .2s; }
.as-tf > div:focus-within { border-bottom-color: #D8B46A; }
.as-tf input { display: block; width: 100%; font-size: 16px; line-height: 23px; height: 23px; color: #ECE6D6; }
.as-tf input:focus-visible, .as-sbox input:focus-visible { outline: none; }   /* 下划线 / 边框变金色就是焦点提示 */
.as-tf input::placeholder { color: #8E897C; }
.as-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #8E897C; }
.as-hint > span:last-child { color: #D8B46A; white-space: nowrap; }
.as-note { font-size: 12px; color: #8E897C; }

/* —— 搜索 —— */
.as-spanel { position: absolute; z-index: 55; width: 440px; max-width: calc(100vw - 32px); overflow: hidden; padding-top: 6px; animation: asDrop .28s cubic-bezier(.16,1,.3,1) both; }
.as-ll { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 17px; white-space: nowrap; padding: 12px 14px 6px; }
.as-ll > span:first-child { color: #8E897C; letter-spacing: 0.06em; }
.as-ll button { color: #A9A49A; }
.as-ll button:hover { color: #F6E7B8; }
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 12px; }
.as-chips.as-pb16 { padding-bottom: 16px; }
.as-chip { height: 32px; padding: 0 12px !important; border: 1px solid rgba(201,164,92,0.24) !important; border-radius: 999px; font-size: 13px; color: #A9A49A !important; display: inline-flex; align-items: center; white-space: nowrap; transition: border-color .2s, color .2s; }
.as-chip:hover { border-color: rgba(216,180,106,0.5) !important; color: #ECE6D6 !important; }
.as-row { display: flex; align-items: center; gap: 12px; height: 39px; padding: 0 14px; white-space: nowrap; line-height: 17px; }   /* Figma 行高 39 */
.as-row.as-sel { background: rgba(216,180,106,0.05); border-left: 2px solid #D8B46A; }
.as-row.as-sel .as-sym { color: #F6E7B8; }
.as-ins { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.as-sym { font-size: 14px; color: #ECE6D6; }
.as-nm { font-size: 13px; line-height: 19px; color: #A9A49A; overflow: hidden; text-overflow: ellipsis; }
.as-nm.as-sec { color: #ECE6D6; }
.as-pr { width: 76px; flex: none; text-align: right; font-size: 14px; color: #ECE6D6; }
.as-pr.as-cnt { font-family: 'Noto Serif SC', 'Songti SC', serif; font-weight: 400; font-size: 12px; color: #A9A49A; }
.as-ch { width: 54px; flex: none; text-align: right; font-size: 13px; color: #D8B46A; }
.as-ch.as-dn { color: #8DA4CC; }
.as-foot { display: flex; align-items: center; gap: 18px; padding: 10px 14px; border-top: 1px solid rgba(201,164,92,0.1); }
.as-foot > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8E897C; white-space: nowrap; }
.as-kbd { height: 24px; min-width: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(201,164,92,0.45); border-bottom-width: 2px; border-radius: 4px;
  font-family: 'Cormorant Infant', serif; font-weight: 600; font-size: 14px; line-height: normal; color: #F6E7B8; }
.as-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px 26px; text-align: center; }
.as-empty h3 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: 0.08em; line-height: normal; }
.as-empty p { font-size: 12px; line-height: 1.6; color: #A9A49A; }
/* Search Box（L 44）：手机整屏搜索 */
.as-sbox { flex: 1 1 auto; min-width: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; background: #070A11; border: 1px solid rgba(201,164,92,0.35); border-radius: 4px; transition: border-color .2s; }
.as-sbox:focus-within { border-color: #D8B46A; }
.as-sbox input { flex: 1 1 auto; width: 100%; height: 100%; font-size: 14px; color: #ECE6D6; caret-color: #D8B46A; }
.as-sbox input::placeholder { color: #8E897C; }
.as-sbox .as-qx { display: none; width: 24px; height: 24px; margin-right: -4px; align-items: center; justify-content: center; }
.as-sbox.as-has .as-qx { display: flex; }

/* 手机整屏搜索：Content 20/16/24，间距 18 */
.as-spage { position: fixed; inset: 0; z-index: 60; background: #05070C; overflow-y: auto; overscroll-behavior: contain; animation: asFade .22s ease both; }
.as-spage-in { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding: max(20px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.as-sbar { display: flex; align-items: center; gap: 12px; }
.as-cancel { flex: none; font-size: 14px; color: #D8B46A !important; height: 44px; }
.as-spage .as-ll { padding: 4px 0; }
.as-spage .as-ll.as-pt20 { padding-top: 20px; }
.as-spage .as-chips { padding: 6px 0 20px; }
.as-spage .as-chips.as-pb16 { padding-bottom: 16px; }
.as-spage .as-row { height: auto; padding: 12px 0; border-bottom: 1px solid rgba(201,164,92,0.1); }
.as-spage .as-ins { flex-direction: column; align-items: flex-start; gap: 2px; }
.as-spage .as-nm { font-size: 12px; line-height: 17px; color: #8E897C; }
.as-spage .as-nm.as-sec { font-size: 14px; line-height: 20px; color: #ECE6D6; }
.as-q { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.as-spage .as-pr { width: auto; font-size: 15px; line-height: 18px; }
.as-spage .as-pr.as-cnt { font-size: 13px; }
.as-spage .as-ch { width: auto; line-height: 16px; }

/* —— 账户菜单（电脑 / 平板，宽 320）—— */
.as-menu { position: absolute; z-index: 55; width: 320px; max-width: calc(100vw - 32px); overflow: hidden; animation: asDrop .28s cubic-bezier(.16,1,.3,1) both; }
.as-mp { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.as-av { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201,164,92,0.45); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.as-mname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.as-mname b { font-family: 'Cormorant Infant', serif; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-mw { padding: 0 16px 14px; }
.as-mw > div { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid rgba(201,164,92,0.16); border-radius: 4px; }
.as-mw-h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8E897C; white-space: nowrap; }
.as-div { height: 1px; background: rgba(201,164,92,0.16); }
.as-mg { display: flex; flex-direction: column; padding: 6px; }
.as-mi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px !important; border-radius: 4px; line-height: normal; transition: background .2s; }
.as-mi:hover, .as-mi:focus-visible { background: rgba(216,180,106,0.05) !important; }
.as-mi > span:nth-child(2) { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #ECE6D6; text-align: left; }
.as-mi > span:nth-child(3) { flex: none; font-size: 12px; color: #8E897C; }
.as-mi.as-muted > span:nth-child(2) { color: #A9A49A; }

/* —— Toast：手机上没有 tab 栏时离底 55（Figma 充值页），有 tab 栏时在 tab 栏上方 —— */
.as-toast { position: fixed; left: 50%; bottom: 40px; z-index: 70; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px;
  background: #070A11; border: 1px solid rgba(201,164,92,0.24); border-radius: 999px; filter: drop-shadow(0 0 20px rgba(201,164,92,0.12));
  font-family: 'Noto Serif SC', 'Songti SC', serif; font-size: 13px; line-height: normal; color: #ECE6D6;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.as-toast.as-show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 767.98px) {
  .as-toast { bottom: calc(55px + env(safe-area-inset-bottom)); }
  .as-toast.as-high { bottom: calc(67px + max(8px, env(safe-area-inset-bottom))); }
}

@keyframes asFade { from { opacity: 0; } }
@keyframes asFadeOut { to { opacity: 0; } }
@keyframes asPop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes asPopOut { to { opacity: 0; transform: scale(.98); } }
@keyframes asUp { from { transform: translateY(100%); } }
@keyframes asDown { to { transform: translateY(100%); } }
@keyframes asDrop { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .as-layer, .as-layer *, .as-spanel, .as-menu, .as-spage, .as-toast { animation: none !important; transition: none !important; }
}