:root{--brand:#2f9c9a;--brand2:#46A19F;--brand3:#258b86;--text:#0f172a;--muted:rgba(15,23,42,.70);--line:rgba(15,23,42,.08);--shadow:0 26px 70px rgba(15,23,42,.12);--shadow2:0 16px 45px rgba(15,23,42,.08);--radius:22px;}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:radial-gradient(900px 520px at 20% 10%, rgba(47,156,154,.08), transparent 60%), radial-gradient(800px 520px at 85% 20%, rgba(70,161,159,.06), transparent 58%), radial-gradient(900px 520px at 50% 90%, rgba(47,156,154,.05), transparent 60%), #f6f8fa;}
.wrap{min-height:100vh;display:flex;justify-content:flex-start;align-items:center;flex-direction:column;padding:28px 16px 40px;}
.card{margin-top:70px;width:min(460px, 100%);border-radius:var(--radius);background:#ffffff;border:1px solid rgba(15,23,42,.06);box-shadow:var(--shadow);overflow:hidden;position:relative;}
@supports((-webkit-backdrop-filter:blur(18px))or(backdrop-filter:blur(18px))){
.card{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
}
.card::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius);pointer-events:none;background:radial-gradient(900px 240px at 30% 0%, rgba(255,255,255,.82), transparent 60%);opacity:.65;}
.card > *{position:relative;z-index:1;}
.hd{padding:18px 20px 14px;text-align:center;}
.hd-top{margin:17px auto 6px;height:68px;}
.badge{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:14px;padding:10px 16px 10px 14px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(47,156,154,.22);font-weight:900;letter-spacing:.3px;box-shadow:0 10px 24px rgba(47,156,154,.12);color:var(--text);}
.badge::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--brand);box-shadow:0 0 0 6px rgba(47,156,154,.16);display:inline-block;}
.title{margin-top:14px;font-size:26px;font-weight:950;letter-spacing:.6px;}
.list{padding:10px 20px 16px;display:grid;gap:12px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.06);box-shadow:0 12px 30px rgba(15,23,42,.06);text-decoration:none;color:inherit;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;}
.row:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(15,23,42,.10);border-color:rgba(47,156,154,.18);}
.row.primary{background:linear-gradient(135deg, #5bbeb9 0%, var(--brand)60%, var(--brand3)100%);border:none;color:#fff;box-shadow: 0 10px 9px rgb(47 156 154 / 30%);}
.left{min-width:0;}
.name{font-size:16px;font-weight:950;letter-spacing:.2px;}

/* 右侧 */
.right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.enter{font-size:14px;font-weight:950;padding:5px 12px;border-radius:999px;background:rgba(47,156,154,.10);border:1px solid rgba(47,156,154,.22);box-shadow:0 8px 18px rgba(15,23,42,.06);color:#1f6f6b;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;min-width:65px;text-align:center;}
.row:hover .enter{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.08);border-color:rgba(47,156,154,.28);}
.row.primary .enter{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.30);color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.10);}
.arrow{opacity:.65;font-weight:900;}
.note{margin:0 20px 16px;padding:12px 12px;border-radius:16px;background:rgba(255,255,255,.70);border:1px dashed rgba(47,156,154,.22);display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;}
.note-left{display:flex;align-items:center;gap:8px;min-width:0;}
.lock{color:var(--brand);display:flex;align-items:center;}

/* footer */
.ft{padding:12px 20px 18px;border-top:1px solid rgba(15,23,42,.06);color:rgba(148,163,184,.95);font-size:12px;text-align:center;}
@media(max-width:420px){
	.card{width:min(420px, 100%);margin-top:34px;}
	.title{font-size:20px;}
}