:root{
  --bg:#eef2ff;
  --surface:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --border:#e6eaf5;
  --brand1:#6366f1; --brand2:#8b5cf6; --brand3:#ec4899;
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899);
  --shadow:0 10px 30px -8px rgba(99,102,241,.28);
  --shadow-sm:0 4px 14px -4px rgba(99,102,241,.22);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(236,72,153,.12), transparent 60%),
    radial-gradient(700px 500px at -10% 0%, rgba(99,102,241,.14), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  font:16px/1.55 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}

/* header */
header{
  position:sticky;top:0;z-index:20;
  background:var(--grad);
  padding:14px 16px;color:#fff;
  box-shadow:0 6px 20px -8px rgba(99,102,241,.5);
}
header h1{margin:0;font-size:19px;font-weight:800;letter-spacing:.5px}
main{max-width:620px;margin:0 auto;padding:18px 16px 32px}
footer{text-align:center;color:var(--muted);font-size:11.5px;padding:6px 16px 28px}

/* 视图切换过渡 */
#app{transition:opacity .16s ease, transform .16s ease}
#app.leave{opacity:0;transform:translateY(8px) scale(.992)}
.screen{animation:fadeUp .35s ease both}

/* hero（支持背景照片：assets/hero.jpg 放入即生效） */
.hero{
  position:relative;overflow:hidden;
  background:var(--grad);color:#fff;
  border-radius:22px;padding:26px 20px;text-align:center;
  box-shadow:var(--shadow);margin-bottom:16px;
}
.hero::before{content:"";position:absolute;inset:0;background:url('assets/hero.jpg') center/cover no-repeat;opacity:.32;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at 85% 15%,rgba(255,255,255,.25),transparent 70%);pointer-events:none;z-index:1}
.hero.small{padding:30px 20px}
.hero>*{position:relative;z-index:2}
.hero-emoji{font-size:40px;margin-bottom:6px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.hero h2{margin:0 0 6px;font-size:24px;font-weight:800}
.hero-sub{margin:0 auto;max-width:34ch;font-size:13.5px;opacity:.94;line-height:1.5}

/* team picker */
.teams{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tbtn{
  border:none;border-radius:16px;padding:14px 4px 12px;color:#fff;
  background:var(--c);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 72%,#fff),var(--c));
  box-shadow:var(--shadow-sm);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .12s,box-shadow .12s;
  animation:pop .35s ease both;animation-delay:calc(var(--i,0)*26ms);
}
.tbtn:active{transform:translateY(2px) scale(.97)}
.tbtn-num{font-size:24px;font-weight:800;line-height:1}
.tbtn-name{font-size:11px;opacity:.95}

/* landing */
.curteam{text-align:center;margin-bottom:18px}
.link{background:none;border:none;color:var(--brand1);cursor:pointer;font-size:13px;font-weight:700;text-decoration:underline}
.actions{display:grid;gap:12px;margin-bottom:14px}
.big{
  display:flex;align-items:center;gap:14px;text-align:left;
  border:none;border-radius:18px;padding:18px;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#6366f1,#7c3aed);
  box-shadow:var(--shadow-sm);transition:transform .12s;
  animation:fadeUp .45s ease both;animation-delay:calc(var(--i,0)*90ms);
}
.big.alt{background:linear-gradient(135deg,#ec4899,#f97316)}
.big:active{transform:scale(.98)}
.big-ico{font-size:26px}
.big-txt{display:flex;flex-direction:column;text-align:left}
.big-txt b{font-size:17px;font-weight:800}
.big-txt small{font-size:12px;opacity:.92}
.note{color:var(--muted);font-size:12.5px;text-align:center;margin-top:18px;line-height:1.6;animation:fadeUp .5s ease both}

/* 精彩瞬间照片条 */
.strip{margin-top:20px;animation:fadeUp .55s ease both}
.strip-h{font-size:14px;font-weight:800;margin-bottom:10px;color:var(--text)}
.strip-imgs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.strip-imgs img{height:128px;width:auto;flex:0 0 auto;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-sm);scroll-snap-align:start}

/* upload */
.back{background:var(--surface);border:1px solid var(--border);color:var(--brand1);font-size:14px;font-weight:700;cursor:pointer;padding:7px 14px;border-radius:999px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.upload h3{margin:0 0 16px;font-size:18px;font-weight:800}
.drop{display:block;border:2px dashed #c7ccf0;border-radius:18px;background:var(--surface);cursor:pointer;margin-bottom:14px;transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--brand1);background:#fbfaff}
.drop-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:150px;padding:18px;text-align:center}
.drop-ico{font-size:36px}
.drop-main{font-size:16px;font-weight:700}
.drop-sub{font-size:12.5px;color:var(--muted)}
.name{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px}
.name:focus{outline:none;border-color:var(--brand1);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.prog{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.progitem{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:13.5px;animation:fadeUp .3s ease both}
.fname{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fstate{font-size:12.5px;color:var(--muted);flex:none}
.progitem.ok{border-color:#a7f3d0}.progitem.ok .fstate{color:#059669;font-weight:700}
.progitem.err{border-color:#fecaca}.progitem.err .fstate{color:#dc2626;font-weight:700}
.spin{width:14px;height:14px;border:2px solid #cdd3f5;border-top-color:var(--brand1);border-radius:50%;animation:spin .7s linear infinite;flex:none}

/* gallery */
.bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;animation:fadeUp .35s ease both}
.bar select{flex:1;padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-weight:600}
.live{display:flex;align-items:center;gap:5px;color:#059669;font-size:12.5px;font-weight:700;background:#ecfdf5;border:1px solid #a7f3d0;padding:5px 10px;border-radius:999px;flex:none}
.live .dot{width:8px;height:8px;border-radius:50%;background:#10b981;animation:pulse 1.6s infinite}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;animation:cardIn .4s ease both}
.card:active{transform:scale(.99)}
.grid .card:nth-child(1){animation-delay:0ms}
.grid .card:nth-child(2){animation-delay:35ms}
.grid .card:nth-child(3){animation-delay:70ms}
.grid .card:nth-child(4){animation-delay:105ms}
.grid .card:nth-child(5){animation-delay:140ms}
.grid .card:nth-child(6){animation-delay:175ms}
.grid .card:nth-child(7){animation-delay:210ms}
.grid .card:nth-child(8){animation-delay:245ms}
.grid .card:nth-child(9){animation-delay:280ms}
.grid .card:nth-child(10){animation-delay:315ms}
.media{position:relative;background:#0f172a;aspect-ratio:1/1}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;font-size:18px;pointer-events:none}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:9px 11px;font-size:12px}
.chip{background:var(--c);color:#fff;padding:2px 9px;border-radius:999px;font-weight:700;font-size:11px}
.who{color:var(--text);font-weight:600;max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.time{color:var(--muted);margin-left:auto;font-size:11px}
.acts{display:flex;gap:6px;padding:0 11px 10px}
.mini{border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer;flex:none}
.mini:active{transform:scale(.96)}
.mini:disabled{opacity:.5}
.mini.rep:hover{color:#dc2626;border-color:#fecaca}
.mini.del{color:#dc2626;border-color:#fecaca}
.bar .mini{margin-left:auto}
.bar .mini.on{background:#1e293b;color:#fff;border-color:#1e293b}
.just-in{animation:flash 1.3s ease both}

/* skeleton */
.skel .sk{background:linear-gradient(90deg,#eef0f7,#e4e7f5,#eef0f7);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:8px}
.skel .media.sk{aspect-ratio:1/1;border-radius:0}
.skel .meta .sk{height:12px;display:inline-block}
.skel .meta .sk.w60{width:60%}.skel .meta .sk.w30{width:30%}

/* empty */
.empty{text-align:center;color:var(--muted);padding:48px 20px;font-size:14px;line-height:1.6;animation:fadeUp .4s ease both}
.empty b{display:block;font-size:16px;color:var(--text);margin-bottom:6px}

.sentinel{height:1px}

/* toast */
#toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(24px);
  background:var(--grad);color:#fff;font-weight:600;
  padding:12px 22px;border-radius:999px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:.28s;z-index:60;max-width:90vw
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes flash{0%{box-shadow:0 0 0 3px rgba(236,72,153,.6)}100%{box-shadow:0 0 0 0 rgba(236,72,153,0)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:560px){.teams{gap:12px}.tbtn{padding:18px 4px 14px}.tbtn-num{font-size:28px}}