:root { --green:#07c160; --text:#1f2733; --muted:#8b95a5; --line:#eef1f5; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; }
body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  color: var(--text);
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[id$="-form"] input { width:100%; }
.bar { display:flex; align-items:baseline; gap:8px; padding:14px 16px 10px;
       border-bottom:1px solid var(--line); }
.bar h1 { font-size:16px; margin:0; }
.hint { font-size:11px; color:var(--muted); }
/* 非生产环境标记：防止把本地/测试实例当成线上 */
.badge { font-size:10px; font-weight:600; letter-spacing:.5px; color:#b26a00;
         background:#fff4e0; border:1px solid #ffdca8; border-radius:4px;
         padding:1px 5px; line-height:1.4; }
.plain { margin-left:auto; border:0; background:none; color:var(--muted); font-size:12px; padding:0; }
[hidden] { display: none !important; }
section { padding: 32px 24px; flex: 1 1 auto; }
/* 登录 / 注册 / 激活三屏与原型一致：表单在可用高度内垂直居中 */
#view-login, #view-register, #view-activate {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lead { font-size:14px; font-weight:600; margin:0 0 4px; }
.sub { font-size:12px; color:var(--muted); margin:0 0 18px; }
input { width:100%; height:44px; border:1px solid var(--line); border-radius:10px;
        padding:0 13px; font-size:14px; margin-bottom:12px; color:var(--text);
        background:#fff; -webkit-appearance:none; }
input:focus { outline:none; border-color:#c9d2dd; }
input.code { font-family:ui-monospace,Menlo,monospace; letter-spacing:.5px; text-transform:uppercase; }
.primary { width:100%; height:46px; border:0; border-radius:10px; background:var(--green);
           color:#fff; font-size:15px; font-weight:500; }
.primary:active { opacity:.85; }
.switch { text-align:center; font-size:12px; color:var(--muted); margin-top:16px; }
.switch a { color:var(--green); text-decoration:none; }
.switch.muted { color:#b9c0cc; }

#view-wall { padding:0 0 90px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; }
.cell { position:relative; aspect-ratio:1; background:#f2f4f7; overflow:hidden; }
.cell img { width:100%; height:100%; object-fit:cover; display:block;
            -webkit-touch-callout:none; }
.cell .left { position:absolute; right:3px; bottom:3px; font-size:9px; color:#fff;
              text-shadow:0 1px 3px rgba(0,0,0,.7); }
.empty { text-align:center; color:var(--muted); font-size:13px; padding:70px 0; }
.fab { position:fixed; right:16px; bottom:calc(20px + env(safe-area-inset-bottom));
       width:54px; height:54px; border-radius:50%; border:0; background:var(--green);
       color:#fff; font-size:30px; font-weight:300; line-height:1;
       box-shadow:0 4px 14px rgba(7,193,96,.45); z-index:10; }
.fab:active { transform:scale(.94); }

.viewer { position:fixed; inset:0; background:#000; z-index:50; overflow:hidden;
          touch-action:none; }
.viewer-top { position:absolute; top:0; left:0; right:0; display:flex; align-items:center;
              padding:calc(14px + env(safe-area-inset-top)) 16px 14px; z-index:2; color:#fff; }
.circle { width:28px; height:28px; border-radius:50%; border:0;
          background:rgba(255,255,255,.14); color:#fff; font-size:13px; line-height:1; }
.count { margin-left:auto; font-size:12px; opacity:.75; }
.stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
         will-change:transform; }
.stage img { max-width:100%; max-height:100%; transition:transform .15s ease-out; }
.viewer-bottom { position:absolute; left:0; right:0; bottom:0; display:flex;
                 justify-content:space-between; align-items:center;
                 padding:16px 16px calc(16px + env(safe-area-inset-bottom));
                 color:#fff; font-size:11px; opacity:.85;
                 background:linear-gradient(to top, rgba(0,0,0,.75), transparent); }
.dots { display:flex; gap:5px; }
.dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.3); }
.dot.on { background:#fff; }

.toast { position:fixed; left:50%; bottom:88px; transform:translateX(-50%);
         background:rgba(20,24,30,.92); color:#fff; font-size:13px;
         padding:10px 16px; border-radius:8px; z-index:60; max-width:80vw; text-align:center; }