:root{
    --bg:#0b0f14; --card:#121824; --text:#e8eef7; --muted:#9fb0c3; --line:#223044;
    --btn:#2a7cff; --good:#2bd576;
}
:root[data-theme="light"]{
    --bg:#f6f7fb; --card:#ffffff; --text:#0b1220; --muted:#5b6b82; --line:#d7deea;
    --btn:#2563eb; --good:#16a34a;
}
*{ box-sizing:border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
/*body{ margin:0; background:var(--bg); color:var(--text); }*/
body{
    margin:0;
    color:var(--text);
    background: var(--bg);
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 简约渐变底色（暗色主题） */
:root body::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
            radial-gradient(900px 600px at 12% 8%, rgba(42,124,255,.18), transparent 55%),
            radial-gradient(800px 520px at 88% 18%, rgba(43,213,118,.10), transparent 55%),
            radial-gradient(900px 700px at 50% 110%, rgba(255,255,255,.06), transparent 60%),
            linear-gradient(180deg, #0b0f14 0%, #0a101a 55%, #080c12 100%);
}

/* 简约渐变底色（亮色主题） */
:root[data-theme="light"] body::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
            radial-gradient(900px 600px at 12% 8%, rgba(37,99,235,.16), transparent 55%),
            radial-gradient(800px 520px at 88% 18%, rgba(22,163,74,.10), transparent 55%),
            radial-gradient(900px 700px at 50% 110%, rgba(0,0,0,.05), transparent 60%),
            linear-gradient(180deg, #f6f7fb 0%, #f3f6ff 55%, #f6f7fb 100%);
}

/* 轻微噪点质感（很淡，不抢眼） */
body::after{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .06;
    background-image:
            repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
            repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
}

.wrap{ max-width:900px; margin:0 auto; padding:14px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn{ background:var(--btn); color:white; border:0; padding:10px 12px; border-radius:10px; cursor:pointer; }
.btn.secondary{ background:transparent; border:1px solid var(--line); color:var(--text); }
input{
    width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
    background: color-mix(in oklab, var(--card) 70%, var(--bg));
    color:var(--text);
}
.small{ color:var(--muted); font-size:12px; line-height:1.4; }
.h1{ font-size:18px; font-weight:750; margin:0 0 10px; }
.brand{ font-size:18px; font-weight:850; letter-spacing:1px; }

.topbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.actionsCol{ display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width:140px; }

.members{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.member{ display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.avatar{ width:36px; height:36px; border-radius:10px; background: color-mix(in oklab, var(--btn) 20%, var(--card));
    display:flex; align-items:center; justify-content:center; font-weight:800; }
.meta{ flex:1; min-width:0; }
.name{ font-weight:700; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.score{ color:var(--muted); font-size:12px; margin-top:2px; }
.badge{ font-size:11px; padding:2px 6px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.dot{ width:8px; height:8px; border-radius:999px; background:var(--muted); display:inline-block; }
.dot.on{ background:var(--good); }

.log{ margin-top:12px; }
.logitem{ padding:10px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; }

.dialog{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:16px; z-index:50; }
.dialog .panel{ width:min(420px, 100%); position:relative; }
.dialog.show{ display:flex; }

.linkbtn{
    border:0; background:transparent; color:var(--btn); cursor:pointer;
    padding:0 6px; font-size:12px;
}

.closeX{
    position:absolute; top:10px; right:10px;
    width:34px; height:34px; border-radius:10px;
    border:1px solid var(--line);
    background:transparent; color:var(--text);
    cursor:pointer; font-size:20px; line-height:30px;
}

.fab{
    position:fixed;
    right:16px; bottom:16px;
    width:52px; height:52px;
    border-radius:16px;
    border:1px solid var(--line);
    background: color-mix(in oklab, var(--card) 80%, var(--bg));
    color:var(--text);
    cursor:pointer;
    z-index:60;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#themeIcon{ font-size:20px; }

@media (max-width:520px){
    .members{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .actionsCol{ width:100%; flex-direction:row; }
    .actionsCol .btn{ flex:1; }
}
/* 让卡片整体更“融入背景” */
.card{
    background: color-mix(in oklab, var(--card) 88%, transparent);
    border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
}

/* 顶部“棋牌记账”模块：玻璃感 + 渐变描边 */
.hero{
    position: relative;
    overflow: hidden;
    background:
            radial-gradient(900px 240px at 10% 0%, rgba(42,124,255,.14), transparent 60%),
            radial-gradient(700px 220px at 90% 0%, rgba(43,213,118,.10), transparent 55%),
            color-mix(in oklab, var(--card) 82%, transparent);
    border: 1px solid color-mix(in oklab, var(--line) 55%, transparent);
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 顶部卡片的“高光边” */
.hero::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(135deg,
    rgba(42,124,255,.35),
    rgba(255,255,255,.10),
    rgba(43,213,118,.22)
    );
    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
    opacity:.65;
}

/* 让标题更有层次但仍然极简 */
.hero .brand{
    letter-spacing: .8px;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* 亮色主题下阴影/透明度更克制 */
:root[data-theme="light"] .card{
    box-shadow: 0 12px 34px rgba(15,23,42,.10);
}
:root[data-theme="light"] .hero{
    box-shadow: 0 16px 44px rgba(15,23,42,.12);
}