/* ============================================
   BOSS 扫码签到 · 微信绿色风格
   独立 CSS 文件
   ============================================ */

:root {
  --wx-green: #07C160;
  --wx-green-dark: #06AD56;
  --wx-green-light: #E8F8EE;
  --primary: var(--wx-green);
  --danger: #FA5151;
  --warning: #FF9C00;
  --gray-50: #F5F5F5;
  --gray-100: #EBEDF0;
  --gray-200: #DADCE0;
  --gray-300: #BABBC0;
  --gray-400: #999A9E;
  --gray-500: #7D7E83;
  --gray-600: #4E4F54;
  --gray-700: #3B3B40;
  --gray-800: #1D1D21;
  --gray-900: #111112;
  --white: #FFFFFF;
  --radius: 8px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--gray-50);
  color: var(--gray-900);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- Animations ---------- */
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-12px) } to { opacity:1; transform:translateY(0) } }
@keyframes popIn { 0% { transform:scale(.85); opacity:0 } 50% { transform:scale(1.05) } 100% { transform:scale(1); opacity:1 } }
.anim-fade-up { animation: fadeUp .3s ease forwards; opacity:0 }
.delay-1 { animation-delay:.05s }
.delay-2 { animation-delay:.1s }

/* ---------- Layout ---------- */
.app-wrap {
  display: flex; flex-direction: column;
  height: 100%; max-width: 480px; margin: 0 auto;
  position: relative; background: var(--white);
}

.page-content {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 底部为固定提交栏留出空间，否则最后一块内容会被盖住且滚不出来 */
  padding-bottom: calc(95px + max(12px, env(safe-area-inset-bottom)));
}
.page-content::-webkit-scrollbar { display: none }

/* ---------- Login Gate（入口即登录：先授权再签到） ---------- */
.login-gate {
  position: absolute; inset: 0; z-index: 200;   /* 高于固定提交栏(100)，低于弹层(1000) */
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  padding: 0 32px;
}
.login-gate-inner {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.login-logo {
  width: 72px; height: 72px;
}
.login-logo img { width: 100%; height: 100%; object-fit: contain; display: block }
/* 图片加载失败（还没放 logo.png）时回退为文字，不留破图 */
.login-logo.is-fallback::after {
  content: 'BOSS'; color: var(--white);
  font-size: 20px; font-weight: 700; letter-spacing: .5px;
}
.login-title { font-size: 19px; font-weight: 600; color: var(--gray-900); margin-top: 18px }
.login-desc { font-size: 13px; color: var(--gray-500); margin-top: 6px; margin-bottom: 32px }

/* ---------- Section Cards ---------- */
.section {
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
}
.section.compact {
  padding: 4px 16px;
}
.section-title {
  font-size: 15px; font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.section-title svg { width:20px; height:20px; stroke:var(--primary); fill:none; stroke-width:2; }

/* ---------- Progress Steps ---------- */
.steps-bar {
  display: flex; align-items:center; justify-content:center;
  gap:0; padding: 6px 0;
}
.step-item { display:flex; flex-direction:column; align-items:center; flex:1; position:relative }
.step-circle {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  border:2px solid var(--gray-200); background:var(--white);
  color:var(--gray-300); transition:all .25s ease;
  position:relative; z-index:1;
}
.step-item.done .step-circle { border-color:var(--primary); background:var(--primary); color:var(--white) }
.step-item.active .step-circle { border-color:var(--primary); background:var(--primary); color:var(--white); box-shadow:0 0 0 3px rgba(7,193,96,.15) }
.step-line {
  flex:1; height:2px; background:var(--gray-200);
  margin-top:-12px; position:relative; z-index:0; transition:background .25s ease;
}
.step-line.done { background:var(--primary) }
.step-label { margin-top:4px; font-size:11px; color:var(--gray-400); font-weight:500 }
.step-item.active .step-label { color:var(--primary); font-weight:600 }
.step-item.done .step-label { color:var(--primary) }

/* ---------- Info Row ---------- */
.info-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--gray-100);
}
.info-row:last-child { border-bottom:none }
.info-label { font-size:13px; color:var(--gray-500); min-width:72px }
.info-value { font-size:14px; color:var(--gray-800); font-weight:500; text-align:right; word-break:break-all }
.info-value.muted { color:var(--gray-400); font-style:italic; font-weight:400 }

/* ---------- Badge ---------- */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius:9999px;
  font-size:11px; font-weight:600;
}
.badge-wx { background:var(--wx-green-light); color:var(--primary) }
.badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor }

/* ---------- WeChat User Card ---------- */
.user-card { display:flex; align-items:center; }
.user-view, .user-empty { display:flex; align-items:center; gap:12px; width:100% }
.user-avatar {
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; background:var(--gray-100); flex-shrink:0;
}
.user-avatar--ph {
  display:flex; align-items:center; justify-content:center;
  background:var(--gray-100);
}
.user-avatar--ph svg {
  width:22px; height:22px; stroke:var(--gray-400); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.user-meta { flex:1; min-width:0 }
.user-name {
  font-size:15px; font-weight:600; color:var(--gray-900);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.user-hint { font-size:12px; color:var(--gray-400); margin-top:2px }
.user-empty .user-name { color:var(--gray-500); font-weight:500 }

/* ---------- Location Status ---------- */
.loc-status {
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0 8px; text-align:center;
}
.loc-icon {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px; position:relative;
}
.loc-icon.green { background:var(--wx-green-light) }
.loc-icon svg { width:22px; height:22px }
.loc-icon .ring {
  position:absolute; inset:-6px;
  border:2px solid transparent;
  border-top-color:var(--primary); border-right-color:var(--primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
.loc-text { font-size:14px; font-weight:600; margin-bottom:2px }
.loc-desc {
  font-size:13px; color:var(--gray-600); line-height:1.7;
  text-align:center; padding:0 8px;
}

/* ---------- Error Hint ---------- */
.loc-error { display:flex; flex-direction:column; align-items:center; padding:8px 0 }
.error-header {
  display:flex; align-items:center; gap:6px; margin-bottom:10px;
}
.error-header svg { width:16px; height:16px }
.btn-retry-inline {
  background:none; border:none; color:var(--primary); font-size:13px; font-weight:600;
  cursor:pointer; margin-left:auto; padding:4px 8px; border-radius:6px;
  transition:background .15s ease;
}
.btn-retry-inline:hover { background:rgba(7,193,96,.08) }
.error-steps {
  background:#FFF7E6; border-radius:10px; padding:10px 14px;
  width:100%; box-shadow:0 2px 8px rgba(255,156,0,.08);
}
.step-line-hint {
  font-size:12.5px; color:#6B4F00; line-height:1.7;
  display:flex; align-items:flex-start; gap:6px;
}
.step-line-hint::before { content:''; width:5px; height:5px; background:#FF9C00; border-radius:50%; flex-shrink:0; margin-top:5px }
.step-muted { color:var(--gray-500); font-size:11.5px }

/* ---------- Address Display ---------- */
.address-card {
  background:var(--gray-50); border-radius:var(--radius);
  padding:8px 12px; margin-top:6px;
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--gray-700); line-height:1.5;
}
.address-card svg { width:16px; height:16px; stroke:var(--primary); fill:none; stroke-width:2; flex-shrink:0; margin-top:1px }

/* ---------- Coordinate Display ---------- */
.loc-coords {
  display:flex; gap:16px; justify-content:center;
  font-size:13px; color:var(--gray-700);
}
.coord-item span { font-weight:600; color:var(--primary); font-family:"SF Mono",Menlo,monospace; font-size:14px }

/* ---------- Camera Area ---------- */
.camera-area {
  width:100%; aspect-ratio:4/3;
  background:var(--gray-50); border:2px dashed var(--gray-200);
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden; position:relative;
  transition:border-color .2s, background .2s;
}
.camera-area:hover { border-color:var(--primary); background:var(--wx-green-light) }
.camera-area.has-photo { border-style:solid; border-color:var(--primary) }
.camera-preview {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:var(--radius-lg);
}
.camera-placeholder { display:flex; flex-direction:column; align-items:center; gap:10px }
.camera-placeholder svg { width:44px; height:44px; stroke:var(--gray-300); fill:none; stroke-width:1.5 }
.camera-placeholder span { font-size:14px; color:var(--gray-500) }
.camera-badge {
  position:absolute; top:10px; right:10px;
  background:rgba(7,193,96,.9); color:var(--white);
  padding:3px 10px; border-radius:9999px;
  font-size:11px; font-weight:600;
  display:none; align-items:center; gap:4px; z-index:2;
}
.camera-overlay-btn {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.6); color:var(--white);
  padding:6px 16px; border-radius:9999px;
  font-size:12px; font-weight:500;
  opacity:0; transition:opacity .2s; z-index:2;
}
.camera-area.has-photo:hover .camera-overlay-btn { opacity:1 }

/* ---------- No Photo Placeholder ---------- */
.no-photo-box {
  width:100%; aspect-ratio:4/3;
  background:var(--gray-50);
  border:2px dashed var(--gray-200);
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.no-photo-icon {
  width:48px; height:48px; border-radius:50%;
  background:var(--gray-100);
  display:flex; align-items:center; justify-content:center;
}
.no-photo-icon svg {
  width:24px; height:24px;
  stroke:var(--gray-400); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.no-photo-text { font-size:14px; color:var(--gray-500); font-weight:500 }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius);
  font-size:15px; font-weight:600; border:none;
  cursor:pointer; transition:all .15s ease;
  outline:none; line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(.97) }
.btn-wx { background:var(--primary); color:var(--white) }
.btn-wx:hover { background:var(--wx-green-dark) }
.btn-wx:disabled, .btn-wx.disabled { opacity:.4; cursor:not-allowed; filter:grayscale(.5) }
.btn-gray { background:var(--gray-200); color:var(--gray-400) }
.btn-gray:disabled { cursor:not-allowed; }
.btn-full { width:100% }

/* ---------- Toast（锚定用户卡片右侧的浮动 tips） ---------- */
.tips-host { position:relative }
.toast-box {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  z-index:20; pointer-events:none;
  max-width:min(210px, calc(100% - 96px));
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.toast {
  display:flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:9999px;
  font-size:12.5px; font-weight:600; line-height:1.4;
  background:rgba(255,255,255,.97);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  animation:fadeDown .25s ease, fadeOut .3s ease 2s forwards;
}
.toast svg { width:14px; height:14px; flex-shrink:0 }
.toast-success { color:var(--primary) }
.toast-error { color:var(--danger) }
.toast-warning { color:#E08900 }
@keyframes fadeOut { to { opacity:0; transform:translateY(-8px) } }

/* ---------- Bottom Sheet ---------- */
.sheet-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:1000; opacity:0; visibility:hidden; transition:all .3s ease;
}
.sheet-mask.show { opacity:1; visibility:visible }
.bottom-sheet {
  position:fixed; bottom:0; left:0; right:0;
  max-height:75vh; background:var(--white);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  z-index:1001;
  display:flex; flex-direction:column;
  box-shadow:0 -8px 32px rgba(0,0,0,.15);
  overflow:hidden;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
}
.bottom-sheet.show { transform:translateY(0) }
.bottom-sheet-inner { width:100%; max-width:380px; margin:0 auto; display:flex; flex-direction:column; height:100%; }
.sheet-handle { display:flex; justify-content:center; padding:10px }
.sheet-handle-bar { width:32px; height:4px; background:var(--gray-200); border-radius:9999px }
.sheet-header {
  display:flex; flex-direction:column; align-items:center;
  padding:8px 16px 16px; border-bottom:1px solid var(--gray-100);
}
.sheet-ok {
  width:56px; height:56px; border-radius:50%;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px; animation:popIn .4s ease;
}
.sheet-ok svg { width:32px; height:32px; stroke:var(--white); fill:none; stroke-width:2.5 }
.sheet-title { font-size:17px; font-weight:700; color:var(--gray-900) }
.sheet-sub { font-size:13px; color:var(--gray-500); margin-top:2px }
.sheet-body { flex:1; overflow-y:auto; padding:16px }
.sheet-body::-webkit-scrollbar { display:none }
.sheet-footer { padding:12px 16px; border-top:1px solid var(--gray-100); display:flex; justify-content:center }

/* ---------- Submit Bar ---------- */
.submit-bar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:min(480px, 100vw);
  padding:12px 16px;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
  background:var(--white);
  border-top:1px solid var(--gray-100);
  z-index:100;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.submit-sub {
  font-size:11px; color:var(--gray-400); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* ---------- Loading Overlay ---------- */
.loading-box {
  position:absolute; inset:0; background:rgba(255,255,255,.88);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  z-index:50; backdrop-filter:blur(4px);
}
.loading-ring {
  width:40px; height:40px;
  border:3px solid var(--gray-100); border-top-color:var(--primary);
  border-radius:50%; animation:spin .7s linear infinite;
}
.loading-text { font-size:14px; color:var(--gray-600); font-weight:500 }

/* ---------- Utility ---------- */
.hidden { display:none!important }
.mb-2 { margin-bottom:8px }

@media (max-width:360px) {
  .section { padding:12px }
  .steps-bar { padding:4px 0 }
  .step-circle { width:28px; height:28px; font-size:12px }
  .step-label { font-size:11px }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}