*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f6f8;color:#333;padding-bottom:70px}

.page{display:none}
.page.active{display:block}

/* Common Header */
.header{background:linear-gradient(135deg,#0f766e,#14b8a6);padding:16px 16px 20px;color:#fff}
.header-top{display:flex;justify-content:space-between;align-items:center}
.header-top .title{font-size:18px;font-weight:600}
.header-top .icons{display:flex;gap:16px;font-size:22px}
.search{background:rgba(255,255,255,0.2);border-radius:20px;padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.8);margin-top:12px}

/* Cards */
.card{background:#fff;border-radius:16px;padding:16px;margin:12px 12px 0;box-shadow:0 1px 6px rgba(0,0,0,0.04)}
.card-title{font-size:15px;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.card-title .more{font-size:12px;color:#0f766e;cursor:pointer}

/* Safety Ring */
.safety-card{margin:-10px 12px 0;background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,0.06)}
.safety-ring{display:flex;justify-content:center;margin:20px 0}
.ring-outer{width:120px;height:120px;border-radius:50%;border:6px solid #e6f7f2;display:flex;align-items:center;justify-content:center}
.ring-outer .score{font-size:32px;font-weight:700;color:#0f766e}
.ring-outer .label{font-size:11px;color:#888}
.safety-stats{display:flex;justify-content:space-around;margin-top:16px}
.stat-item{text-align:center}
.stat-item .num{font-size:20px;font-weight:700}
.stat-item .num.red{color:#dc2626}
.stat-item .num.green{color:#0f766e}
.stat-item .txt{font-size:11px;color:#999;margin-top:2px}

/* Members */
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.member{background:#fff;border-radius:14px;padding:14px 10px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,0.04);cursor:pointer}
.member .avatar{width:48px;height:48px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:22px;background:#f0faf7}
.member .name{font-size:14px;font-weight:600;margin-bottom:4px}
.member .status{font-size:11px;padding:2px 8px;border-radius:8px;display:inline-block}
.status-safe{color:#0f766e;background:#e6f7f2}
.status-alert{color:#dc2626;background:#fef2f2}

/* Alerts */
.alert-item{background:#fff;border-radius:12px;padding:14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.alert-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.alert-danger{background:#fef2f2}
.alert-warn{background:#fffbeb}
.alert-info{background:#f0faf7}
.alert-body{flex:1}
.alert-body .type{font-size:13px;font-weight:600;margin-bottom:2px}
.alert-body .detail{font-size:12px;color:#888;line-height:1.5}
.alert-body .time{font-size:11px;color:#bbb;margin-top:4px}
.alert-action{font-size:12px;color:#0f766e;flex-shrink:0;align-self:center}

/* Family Page */
.family-empty{text-align:center;padding:60px 20px;color:#999}
.family-empty .icon{font-size:48px;margin-bottom:12px}
.family-empty .text{font-size:14px}
.family-empty .btn{font-size:14px;color:#0f766e;margin-top:12px}

/* My Page */
.my-header{background:linear-gradient(135deg,#0f766e,#14b8a6);padding:40px 16px 30px;text-align:center;color:#fff}
.my-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.2);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:32px}
.my-name{font-size:18px;font-weight:600}
.my-phone{font-size:13px;opacity:0.8;margin-top:4px}
.menu-list{margin:12px}
.menu-item{background:#fff;border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,0.04);cursor:pointer}
.menu-item .icon{font-size:20px;width:28px;text-align:center}
.menu-item .text{flex:1;font-size:14px}
.menu-item .arrow{color:#bbb}

/* Bottom Tab */
.tab-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;display:flex;justify-content:space-around;padding:8px 0 20px;border-top:1px solid #f0f0f0;z-index:100}
.tab-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#999;cursor:pointer;padding:4px 20px}
.tab-item.active{color:#0f766e}
.tab-item .icon{font-size:22px}
.tab-item .badge{position:relative}
.tab-item .badge::after{content:attr(data-count);position:absolute;top:-6px;right:-10px;background:#dc2626;color:#fff;font-size:9px;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center}

/* FAB */
.fab{position:fixed;bottom:80px;right:16px;width:52px;height:52px;border-radius:50%;background:#0f766e;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 16px rgba(15,118,110,0.3);z-index:99;cursor:pointer;border:none}

/* Login page */
.login-wrap{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#0f766e 0%,#14b8a6 40%,#f5f6f8 40%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200}
.login-logo{font-size:56px;margin-bottom:8px}
.login-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:4px}
.login-sub{font-size:13px;color:rgba(255,255,255,0.8);margin-bottom:40px}
.login-card{background:#fff;border-radius:20px;padding:28px 24px;width:90%;max-width:360px;box-shadow:0 4px 24px rgba(0,0,0,0.08)}
.login-card .field{margin-bottom:16px}
.login-card label{font-size:13px;color:#888;display:block;margin-bottom:6px}
.login-card input{width:100%;padding:12px 16px;border:1.5px solid #e5e7eb;border-radius:12px;font-size:15px;outline:none;transition:0.2s}
.login-card input:focus{border-color:#0f766e}
.login-card .btn-login{width:100%;padding:14px;background:#0f766e;color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;margin-top:8px}
.login-card .btn-login:disabled{opacity:0.6}
.login-card .switch{text-align:center;margin-top:14px;font-size:13px;color:#888}
.login-card .switch a{color:#0f766e;cursor:pointer}
.login-error{color:#dc2626;font-size:12px;text-align:center;margin-top:8px;display:none}.consent-box{margin:10px 0;display:flex;align-items:flex-start;gap:6px}.consent-box input{width:16px;height:16px;flex-shrink:0;margin-top:2px}.consent-box label{font-size:11px;color:#888;line-height:1.5}.consent-box label a{color:#0f766e}
#app{display:none}


/* ===== 老人端大字简化UI ===== */
body.elder-app-mode { font-size: 20px; }
body.elder-app-mode .header, body.elder-app-mode .my-header { padding: 24px 20px !important; }
body.elder-app-mode .header .title, body.elder-app-mode .my-name { font-size: 24px !important; }
body.elder-app-mode .tab-item { font-size: 18px !important; padding: 14px 20px !important; }
body.elder-app-mode .card-title { font-size: 20px !important; }
body.elder-app-mode .member .avatar { width: 64px !important; height: 64px !important; font-size: 28px !important; }
body.elder-app-mode .member .name { font-size: 18px !important; }
body.elder-app-mode .stat-item .num, body.elder-app-mode .ring-outer .score { font-size: 36px !important; }
body.elder-app-mode .menu-item .text { font-size: 18px !important; }
body.elder-app-mode .menu-item .icon { font-size: 24px !important; }
body.elder-app-mode .btn-login, body.elder-app-mode button { font-size: 20px !important; padding: 16px 24px !important; }
body.elder-app-mode .login-card input, body.elder-app-mode input { font-size: 20px !important; padding: 16px !important; }
body.elder-app-mode .consent-box label { font-size: 16px !important; }
body.elder-app-mode .my-phone, body.elder-app-mode .tab-item .badge, body.elder-app-mode .card-title .more, body.elder-app-mode .stat-label, body.elder-app-mode .alert-time { display: none !important; }
body.elder-app-mode .my-header { text-align: center !important; }



/* ===== 学生端简化UI ===== */
body.student-app-mode { font-size: 18px; }
body.student-app-mode .header, body.student-app-mode .my-header { padding: 20px 16px !important; background: linear-gradient(135deg,#0f766e,#14b8a6) !important; }
body.student-app-mode .header .title { font-size: 22px !important; }
body.student-app-mode .tab-item { font-size: 16px !important; }
body.student-app-mode .stat-item .num { font-size: 32px !important; }
body.student-app-mode .menu-item .text { font-size: 16px !important; }
body.student-app-mode button { padding: 14px 20px !important; font-size: 17px !important; }


/* ===== Elder mode: hide management features ===== */
body.elder-app-mode .tab-item[data-tab="pageFamily"]{display:none!important}
body.elder-app-mode .elder-management-only{display:none!important}
body.elder-app-mode .elder-welcome-card{display:block!important}
body.elder-app-mode .header .title{font-size:22px!important}
body.elder-app-mode .elder-status-badge{display:inline-block!important;padding:4px 12px;border-radius:20px;background:#10b981;color:#fff;font-size:14px;margin-top:8px}
.elder-welcome-card{display:none}
.elder-status-badge{display:none}

/* Student mode: hide management features */
body.student-app-mode .tab-item[data-tab="pageFamily"]{display:none!important}
body.student-app-mode .elder-management-only{display:none!important}
body.student-app-mode .elder-welcome-card{display:block!important}
body.student-app-mode .elder-status-badge{display:inline-block!important;padding:4px 12px;border-radius:20px;background:#10b981;color:#fff;font-size:14px;margin-top:8px}

/* ===== Permission guide for elder/student mode ===== */
body.elder-app-mode .permission-guide,
body.student-app-mode .permission-guide { display: block !important; }
body.family-mode .permission-guide { display: none; }
.permission-guide {
  display: none;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
  border: 1px solid #FED7AA;
  border-radius: 16px;
  padding: 20px;
  margin: 12px;
  position: relative;
  overflow: hidden;
}
.permission-guide::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(251,146,60,0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.pg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.pg-header .icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #F59E0B, #FB923C);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.pg-header .title {
  font-size: 15px;
  font-weight: 600;
  color: #9A3412;
}
.pg-header .subtitle {
  font-size: 11px;
  color: #B45309;
  margin-top: 2px;
}
.pg-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.pg-step {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.7);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  color: #7C2D12;
  line-height: 1.5;
}
.pg-step .num {
  width: 20px; height: 20px;
  background: #F59E0B;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.pg-step strong { color: #9A3412; font-weight: 600; }
.pg-helper {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 8px;
  font-size: 11px;
  color: #92400E;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pg-helper strong { color: #9A3412; }


/* ===== Elder/Student quick login page ===== */
.elder-login-page {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #0A2540 0%, #0F766E 100%);
  z-index: 9998;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.elder-app-mode .elder-login-page,
body.student-app-mode .elder-login-page { display: block !important; }
body.elder-app-mode .login-page,
body.student-app-mode .login-page { display: none !important; }

.elder-login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.elder-login-card {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 32px 24px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  margin-bottom: 16px;
}
.elder-login-card .icon {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #0F766E, #14B8A6);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 8px 24px rgba(15,118,110,0.3);
}
.elder-login-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: #0A2540;
  margin-bottom: 6px;
}
.elder-login-card .sub {
  font-size: 13px;
  color: #64748B;
  margin-bottom: 20px;
  line-height: 1.5;
}
.elder-login-card input {
  width: 100%;
  padding: 16px;
  border: 2px solid #E2E8F0;
  border-radius: 14px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 12px;
  box-sizing: border-box;
  transition: border-color .2s;
  font-family: inherit;
}
.elder-login-card input:focus {
  outline: none;
  border-color: #0F766E;
}
.elder-login-card .error {
  display: none;
  color: #DC2626;
  font-size: 13px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #FEF2F2;
  border-radius: 10px;
}
.elder-login-card .btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #0F766E, #14B8A6);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s;
}
.elder-login-card .btn:active { transform: scale(0.98); }
.elder-login-card .btn:disabled { opacity: 0.7; }
.elder-login-card .hint {
  margin-top: 16px;
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.6;
}
.elder-login-card .hint strong { color: #0F766E; }

/* Permission card (below login card) */
.elder-perm-card {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: 20px;
  width: 100%;
  max-width: 380px;
  color: #fff;
  box-sizing: border-box;
}
.elder-perm-card .ptitle {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.elder-perm-card .ptitle .badge {
  background: #F59E0B;
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 500;
}
.elder-perm-card .plist {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
}
.elder-perm-card .plist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
}
.elder-perm-card .plist li:last-child { border-bottom: none; }
.elder-perm-card .plist .label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.elder-perm-card .plist .status {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
  font-weight: 500;
}
.elder-perm-card .plist .status.on {
  background: rgba(34, 197, 94, 0.2);
  color: #86EFAC;
}
.elder-perm-card .open-all-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #F59E0B, #FB923C);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
  margin-bottom: 10px;
}
.elder-perm-card .open-all-btn:active { transform: scale(0.98); }
.elder-perm-card .perms-detail {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.elder-perm-card .perms-detail strong { color: #fff; }