:root{
    --fg:#0b0f14;
    --muted:#374151;
    --radius:22px;

    /* 玻璃层次 */
    --glass-bg-1: rgba(255,255,255,.58);
    --glass-bg-2: rgba(255,255,255,.22);
    --glass-border: rgba(255,255,255,.55);
    --glass-hairline: rgba(255,255,255,.75);
    --glass-shadow: 0 10px 30px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08);

    --btn-border: rgba(255,255,255,.55);
    --btn-bg-1: rgba(255,255,255,.35);
    --btn-bg-2: rgba(255,255,255,.16);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    color:var(--fg);
    font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;

    /* 背景：你要求的渐变 + 一层柔和高光 */
    background:
            radial-gradient(60% 80% at 75% 10%, rgba(255,255,255,.35), transparent 60%),
            linear-gradient(135deg,#FFAE5E 0%,#85FBFF 100%);
}

.wrap{max-width:1080px;margin:0 auto;padding:48px 20px 80px}

/* 顶部也做玻璃质感 */
header.hero{
    position:relative;
    text-align:center;
    padding:28px;
    border-radius:calc(var(--radius) + 10px);
    background: linear-gradient(180deg,var(--glass-bg-1),var(--glass-bg-2));
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    border:1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow:hidden;
}
header.hero::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:
            linear-gradient(to bottom, rgba(255,255,255,.55), transparent 40%),
            radial-gradient(40% 60% at 0% 0%, rgba(255,255,255,.35), transparent 60%);
    mix-blend-mode: screen; opacity:.55;
}
header.hero::after{
    content:""; position:absolute; left:1px; right:1px; top:1px; height:1px;
    border-radius:inherit; background: var(--glass-hairline); opacity:.45;
}
h1{margin:0;font-size:clamp(24px,4.5vw,44px);letter-spacing:.3px}

/* 自适应网格 */
.grid{
    display:grid; gap:22px; margin-top:22px;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* 玻璃卡片 —— 磨砂 + 高光边缘 + 内阴影 */
.card{
    position:relative;
    display:grid; gap:14px; padding:20px; border-radius:var(--radius);
    background: linear-gradient(180deg,var(--glass-bg-1),var(--glass-bg-2));
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    border:1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
    text-align:center; justify-items:center; overflow:hidden;
    isolation:isolate;
}
.card::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:
            linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0) 38%),
            radial-gradient(55% 80% at 0% 0%, rgba(255,255,255,.35), transparent 60%),
            radial-gradient(55% 80% at 100% 0%, rgba(255,255,255,.18), transparent 60%);
    mix-blend-mode:screen; opacity:.7;
}
.card::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.2);
    opacity:.9;
}
.card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
}

/* 标题与 logo 胶囊容器也玻璃 */
.title{display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:600}
.logo{
    display:grid; place-items:center; width:56px; height:56px; border-radius:14px;
    background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.18));
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border:1px solid rgba(255,255,255,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(0,0,0,.08);
}
.logo img{ width:34px; height:34px; border-radius:8px; display:block }

/* 简介：支持回车换行 */
.desc{
    color:var(--muted);
    font-size:14px; line-height:1.65;
    white-space: pre-line;            /* \n 显示为换行 */
    text-wrap: pretty;
}

/* URL 小玻璃条 */
.url{
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px; color:#0948ff; opacity:.85; word-break:break-all;
    background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.18));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.55);
}

/* 按钮玻璃 */
.actions{display:flex;justify-content:center;width:100%}
.btn-copy{
    display:flex;align-items:center;justify-content:center;gap:8px;
    height:44px;padding:0 18px;border-radius:16px;cursor:pointer;
    background: linear-gradient(180deg,var(--btn-bg-1),var(--btn-bg-2));
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    border:1px solid var(--btn-border); color:var(--fg); font-weight:700;
    box-shadow: 0 6px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-copy:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.btn-copy:active{ transform: translateY(1px) }

/* 吐司 */
.toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
    background: rgba(0,0,0,.72); color:#fff;
    padding:10px 14px;border-radius:12px;font-size:13px;
    opacity:0; transition:opacity .25s; pointer-events:none;
}
.toast.show{opacity:1}