/* 凑时 — PPVI 浅色玻璃拟态
   灰阶做框架,颜色只出现在热力格子(数据本身);强调色靛蓝只用于 chrome。 */

:root {
    --ink: #1c1f23;
    --ink-2: #4a4f56;
    --muted: #71767d;
    --faint: #9aa0a6;
    --line: rgba(28, 31, 35, 0.08);

    --bg: #f4f5f7;
    --glass: rgba(255, 255, 255, 0.72);
    --glass-strong: rgba(255, 255, 255, 0.88);

    --accent: #5b6ee1;
    --accent-press: #4a5cc7;

    --green: #2e9e6b;   /* 全员可来 */
    --red: #d6584e;     /* 多数不能来 */
    --neutral-cell: #eceef1;

    --r: 16px;
    --r-sm: 11px;
    --r-cell: 9px;

    --sh-1: 0 1px 2px rgba(20, 24, 31, 0.05);
    --sh-2: 0 2px 8px rgba(20, 24, 31, 0.06), 0 12px 32px rgba(20, 24, 31, 0.07);

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
    color: var(--ink);
    font: 400 clamp(15px, 4vw, 16px)/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    /* 浅灰底 + 极淡冷暖双光晕,给玻璃折射的底子 */
    background:
        radial-gradient(120% 80% at 12% -8%, rgba(91, 110, 225, 0.10), transparent 50%),
        radial-gradient(120% 80% at 100% 0%, rgba(46, 158, 107, 0.07), transparent 45%),
        var(--bg);
    background-attachment: fixed;
    word-break: keep-all;          /* CJK 不在词内断行 */
    overflow-wrap: anywhere;       /* 超长串(链接)仍可断 */
}

.wrap { max-width: 600px; margin: 0 auto; padding: var(--s6) var(--s4) 96px; }
@media (min-width: 540px) { .wrap { padding-left: var(--s6); padding-right: var(--s6); } }

/* —— 字阶(严格 4 级)—— */
.display { font-size: clamp(24px, 7vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(20px, 5.5vw, 23px); font-weight: 640; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 560; color: var(--ink-2); }
.cap { font-size: clamp(12.5px, 3.4vw, 13px); font-weight: 400; color: var(--muted); }
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* —— 顶栏 —— */
.topbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.topbar .back { color: var(--muted); text-decoration: none; font-size: 22px; line-height: 1; }
.topbar .grow { flex: 1; min-width: 0; }
.topbar .who { font-size: 13px; color: var(--muted); }
.brand-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); display: inline-block; margin-right: 7px; vertical-align: middle; }

/* —— 顶栏切换器 —— */
.switcher { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: var(--ink); }
.switcher .sw-title { font-size: clamp(20px, 5.5vw, 23px); font-weight: 640; letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 78%; }
.switcher .chev { color: var(--muted); font-size: 13px; }
.card.current { box-shadow: inset 0 0 0 2px var(--accent); }

.icon-btn { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--line);
    background: var(--glass-strong); color: var(--accent); font-size: 22px; line-height: 1; font-weight: 400;
    cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-1); }
.icon-btn:active { transform: scale(0.94); }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: block; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-ph { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff;
    font-size: 15px; font-weight: 560; text-decoration: none; }

/* —— 空态落地 —— */
.empty-hero { padding: var(--s8) var(--s6); text-align: center; margin-top: var(--s8); }

/* —— 活动海报 —— */
.poster { width: 100%; height: auto; display: block; border-radius: var(--r);
    margin-bottom: var(--s3); box-shadow: var(--sh-1); }

/* —— 介绍卡 —— */
.intro { padding: var(--s4); margin-bottom: var(--s3); }
.intro-purpose { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.45; }
.intro-purpose b { font-weight: 640; }
.intro-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: 10px; font-size: 13px; color: var(--muted); align-items: center; }
.intro-meta b { color: var(--ink); font-weight: 640; }

/* —— 大家的情况:排序列表 —— */
#ranked { display: flex; flex-direction: column; gap: var(--s2); }
.r-item { padding: 10px var(--s3); border-radius: var(--r-sm); background: rgba(255,255,255,0.55); }
.r-item.r-best { background: rgba(91,110,225,0.08); box-shadow: inset 0 0 0 1px rgba(91,110,225,0.25); }
.r-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.r-label { font-size: 14px; font-weight: 540; color: var(--ink); }
.r-star { color: var(--accent); margin-right: 4px; }
.r-count { font-size: 13px; color: var(--green); font-weight: 560; white-space: nowrap; }
.r-bar { height: 5px; border-radius: 3px; background: rgba(28,31,35,0.07); margin-top: 7px; overflow: hidden; }
.r-bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.r-names { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* —— 头像组 —— */
.ava-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: center; }
.ava { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff;
    box-shadow: 0 1px 2px rgba(20,24,31,0.12); background: var(--neutral-cell); flex: 0 0 auto; }
.ava-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--accent);
    color: #fff; font-size: 11px; font-weight: 560; }
.ava-more { font-size: 11px; color: var(--muted); align-self: center; margin-left: 2px; }
.pop .ava-row { margin-top: 5px; }

/* —— 玻璃卡 —— */
.glass {
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--r);
    box-shadow: var(--sh-2);
}

/* —— 按钮 —— */
.btn { display: block; width: 100%; text-align: center; padding: 14px; border-radius: var(--r-sm);
    font-size: 15px; font-weight: 560; cursor: pointer; border: none; text-decoration: none; transition: transform .08s, background .15s; }
.btn:active { transform: scale(0.985); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(91, 110, 225, 0.28); }
.btn-primary:active { background: var(--accent-press); }
.btn-ghost { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--line); }
.btn-row { display: flex; gap: var(--s3); }
.btn-row .btn { flex: 1; }

/* —— 活动卡片列表 —— */
.section { margin-top: var(--s6); }
.section > h2 { margin-bottom: var(--s3); padding-left: 2px; }
.cards { display: flex; flex-direction: column; gap: var(--s3); }
.card { padding: var(--s4); border-radius: var(--r); text-decoration: none; color: inherit; display: block; }
.card .ttl { font-size: 17px; font-weight: 560; margin-bottom: 5px; }
.card .meta { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--muted); }
.chip { font-size: 11.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: rgba(28,31,35,0.06); color: var(--ink-2); }
.chip.live { background: rgba(46,158,107,0.14); color: #1f7a51; }
.chip.closed { background: rgba(28,31,35,0.06); color: var(--muted); }
.dot-sep { color: var(--faint); }
.empty { padding: var(--s6) var(--s4); text-align: center; color: var(--muted); font-size: 14px; border-radius: var(--r); border: 1px dashed var(--line); }

/* —— 浮动新建按钮 —— */
.fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 30; width: min(568px, calc(100% - 32px)); }

/* —— 底部弹层 —— */
.sheet-mask { position: fixed; inset: 0; background: rgba(20,24,31,0.32); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 40; }
.sheet-mask.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 600px; margin: 0 auto;
    background: var(--glass-strong); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-radius: 22px 22px 0 0; border-top: 1px solid rgba(255,255,255,0.7); box-shadow: 0 -8px 40px rgba(20,24,31,0.16);
    padding: var(--s4) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform .28s cubic-bezier(.32,.72,0,1); }
.sheet.on { transform: translateY(0); }
.sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: rgba(28,31,35,0.16); margin: 2px auto var(--s4); }
.sheet h1 { margin-bottom: var(--s4); }

/* —— 表单 —— */
.field { margin-bottom: var(--s4); }
.field > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.field input, .field select { width: 100%; background: rgba(255,255,255,0.7); border: 1px solid var(--line);
    color: var(--ink); padding: 12px; border-radius: var(--r-sm); font-size: 16px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: rgba(255,255,255,0.6); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 540; }
.err { color: var(--red); font-size: 13px; margin-top: var(--s2); min-height: 1.2em; }

/* —— 活动 hub —— */
.hub-head { margin-bottom: var(--s4); }
.hub-head .stat { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.hub-head .stat b { font-size: 22px; font-weight: 680; }

.hint { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--ink-2);
    padding: 10px var(--s3); border-radius: var(--r-sm); background: rgba(255,255,255,0.55); margin-bottom: var(--s3); }
.legend { display: flex; align-items: center; gap: var(--s3); font-size: 12px; color: var(--muted); margin: var(--s3) 0; flex-wrap: wrap; }
.legend .bar { width: 72px; height: 8px; border-radius: 4px;
    background: linear-gradient(90deg, rgb(225, 240, 230), rgb(46, 158, 107)); }
.legend .mk { display: inline-flex; align-items: center; gap: 5px; }
.legend .swatch-red { width: 16px; height: 16px; border-radius: 5px; background: var(--red); }

/* —— 网格快捷工具 —— */
.grid-tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0 4px; }
.tool { font-size: 13px; font-weight: 540; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink); }
.tool:active { transform: scale(0.96); }
.tool-hint { font-size: 12px; color: var(--muted); flex: 1; min-width: 140px; }
.tool-hint b { color: var(--ink-2); font-weight: 600; }

/* —— 热力网格 —— */
.grid { display: flex; flex-direction: column; gap: 5px; margin: var(--s3) 0; touch-action: none; }
.grid-row { display: grid; grid-template-columns: 38px repeat(7, 1fr); gap: 5px; }
.col-head { text-align: center; font-size: 11px; color: var(--muted); line-height: 1.25; padding-bottom: 2px; cursor: pointer; white-space: nowrap; }
.col-head .d { font-weight: 540; color: var(--ink-2); }
.col-head.weekend .d { color: var(--accent); }
.col-head small { display: block; font-size: 9.5px; color: var(--faint); }
.row-label { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-2); cursor: pointer; user-select: none; }

.cell { aspect-ratio: 1; border-radius: var(--r-cell); background: var(--neutral-cell);
    position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: var(--ink); transition: background .15s; user-select: none; }
.cell .n { font-variant-numeric: tabular-nums; opacity: 0.9; pointer-events: none; }
/* 我标的「来不了」= 保留绿底(仍看可用度)+ 红框 + 红✕ 叠加,两个信息都在 */
.cell.mine { box-shadow: inset 0 0 0 2.5px var(--red); }
.cell.mine .x { color: var(--red); font-size: 17px; font-weight: 800; pointer-events: none;
    text-shadow: 0 0 2px rgba(255,255,255,0.85); }
/* 推荐格:强调色环 + 左上 ★ */
.cell.rec { box-shadow: inset 0 0 0 2px var(--accent); }
.cell.rec.mine { box-shadow: inset 0 0 0 2.5px var(--red); }
.cell.rec::before { content: "★"; position: absolute; top: 1px; left: 3px; font-size: 10px; color: var(--accent); }
.cell:active { filter: brightness(0.96); }

/* —— 详情气泡 —— */
.pop { position: fixed; z-index: 50; max-width: 260px; padding: var(--s3) var(--s4); border-radius: var(--r-sm);
    background: var(--glass-strong); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.7);
    box-shadow: var(--sh-2); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.pop.on { opacity: 1; }
.pop .pop-ttl { font-weight: 560; margin-bottom: 5px; }
.pop .pop-row { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.pop .ok { color: var(--green); } .pop .no { color: var(--red); }
.pop .names { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* —— 分享卡 —— */
.share { margin-top: var(--s4); padding: var(--s4); }
.share .link { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); }
.share .link input { flex: 1; min-width: 0; font-size: 13px; padding: 10px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: rgba(255,255,255,0.7); color: var(--ink-2); }
.share .link button { padding: 10px 14px; border-radius: var(--r-sm); border: none; background: var(--accent); color: #fff; font-size: 13px; font-weight: 540; cursor: pointer; white-space: nowrap; }

.toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(8px); z-index: 60;
    background: var(--ink); color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 999px;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: var(--sh-2); }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.sticky-submit { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 30; width: min(568px, calc(100% - 32px)); }