/* =====================================================
   common.css — 全局公共样式
   Web 版心理测评系统
   视觉风格对应小程序版（主色 #1a6fc4 / #4a9fd4）
   -----------------------------------------------------
   尺寸说明：小程序版全部使用 rpx 单位（750rpx = 视口宽），
   本文件按 375px 视口换算（1rpx = 0.5px），保证网页上的
   页面大小、元素大小与小程序版完全一致。
   ===================================================== */

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

html, body {
  background-color: #f0f5fb;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;   /* 对应小程序 page 28rpx */
  line-height: 1.5;
}

/* =====================================================
   页面外壳 —— 双端适配
   -----------------------------------------------------
   小程序版全部尺寸基于 750rpx 设计稿（视口逻辑宽度 375px），
   页面内元素按 1rpx = 0.5px 换算。
   - 手机端（≤480px）：页面全宽铺满，保持小程序样式；
   - 桌面端（>480px）：参考 frontend/test/ 视觉稿 ——
     浅灰页面背景 + 白色左侧导航栏 + 蓝色顶栏的
     后台管理布局；入口/首页/测评页另有各自布局
     （见各页面 CSS 媒体查询）。
   ===================================================== */
.page-shell {
  min-height: 100vh;
  background: #f0f5fb;
}

.page-shell .page-inner {
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background: #f0f5fb;
}

/* ===== 桌面端：浅色全屏后台布局（参考 test/admin.html、test/html/overview.html）===== */
@media (min-width: 481px) {
  html, body {
    background: #f0f2f5;
    overflow-x: hidden;   /* 兜底：防止任何内容横向溢出产生滚动条 */
  }
  .page-shell {
    background: #f0f2f5;
  }
  .page-shell .page-inner {
    max-width: none;
    margin: 0;
    min-height: 100vh;
    background: transparent;
    font-size: 15px;   /* 桌面端正文适度放大 */
  }
}

/* =====================================================
   桌面端左侧固定导航栏（管理类页面使用）
   结构：.page-inner.side-layout > aside.side-nav + div.side-main
   侧边栏内容由 js/sidebar.js 在桌面端渲染，手机端不显示
   ===================================================== */
.side-nav {
  display: none;
}

@media (min-width: 481px) {
  .page-inner.side-layout {
    display: flex;
    align-items: stretch;
  }
  .side-nav {
    display: block;
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    z-index: 50;
  }
  .side-main {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
  }
}

/* 中屏（平板竖屏 481~1023px）：侧边栏适当收窄，给内容区留空间 */
@media (min-width: 481px) and (max-width: 1023px) {
  .side-nav {
    width: 200px;
  }
}

/* 侧边栏内部（参考 test/html/admin.html） */
.side-nav-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Logo 区：白底 + 粉色圆形图标 */
.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: #fff;
  color: #333;
}

.side-brand-icon {
  width: 40px;
  height: 40px;
  background: #ff6b8b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.side-brand-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  display: block;
}

.side-brand-sub {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  display: block;
}

.side-menu {
  flex: 1;
  padding: 0 10px;
  overflow-y: auto;
}

.side-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 5px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.side-menu-item:hover {
  background: #f8f9fa;
}

.side-menu-item.active {
  background: #ebf5ff;
  color: #1a73e8;
  font-weight: bold;
}

.side-menu-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.side-menu-item.danger:hover {
  background: #fff0f0;
  color: #d31616;
}

.side-foot {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  font-size: 12px;
  color: #aaa;
  line-height: 1.6;
}

/* =====================================================
   顶栏（手机端对应小程序原生导航栏 44px；
   桌面端为后台蓝色顶栏 60px，参考 test/html/admin.html）
   ===================================================== */
.nav-header {
  background: #1a6fc4;
  color: #fff;
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-header .nav-title {
  flex: 1;
  text-align: center;
  font-size: 17px;   /* 对应小程序 34rpx 导航栏标题 */
  font-weight: 600;
}

.nav-header .nav-back {
  width: 60px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  padding: 4px 0;
}

.nav-header .nav-back:hover { opacity: 0.85; }

.nav-header .nav-right {
  width: 60px;
  text-align: right;
}

/* 桌面端：蓝色顶栏（60px，吸顶） */
@media (min-width: 481px) {
  .nav-header {
    background: #2475e0;
    height: 60px;
    padding: 0 24px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
  }
  .nav-header .nav-title {
    font-size: 18px;
  }
  .nav-header .nav-back {
    width: auto;
    font-size: 15px;
    opacity: 0.95;
  }
  .nav-header .nav-right {
    width: auto;
  }
}

/* ========== Toast（对应 wx.showToast）========== */
.dsh-toast {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  border-radius: 10px;
  padding: 16px 22px;
  max-width: 75%;
  z-index: 9999;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  animation: dshFadeIn 0.2s ease;
}

.dsh-toast-icon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background: #07c160;
  color: #fff;
  font-size: 20px;
  margin: 0 auto 8px;
}

@keyframes dshFadeIn {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* ========== Modal（对应 wx.showModal）========== */
.dsh-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsh-modal {
  width: 82%;
  max-width: 340px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  animation: dshPop 0.2s ease;
}

@keyframes dshPop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.dsh-modal-title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  padding: 22px 20px 6px;
  color: #1a1a1a;
}

.dsh-modal-content {
  font-size: 14px;
  color: #666;
  text-align: center;
  padding: 12px 20px 22px;
  line-height: 1.6;
  white-space: pre-line;
}

.dsh-modal-btns {
  display: flex;
  border-top: 1px solid #eee;
}

.dsh-modal-btn {
  flex: 1;
  height: 48px;
  border: none;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  color: #1a1a1a;
}

.dsh-modal-btn + .dsh-modal-btn {
  border-left: 1px solid #eee;
}

.dsh-modal-btn:hover { background: #f7f7f7; }

.dsh-modal-confirm { color: #1a6fc4 !important; font-weight: 600; }

/* ========== Loading（对应 wx.showLoading）========== */
.dsh-loading-mask {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsh-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dsh-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #d0e0f0;
  border-top-color: #1a6fc4;
  border-radius: 50%;
  animation: dshSpin 0.8s linear infinite;
}

@keyframes dshSpin {
  to { transform: rotate(360deg); }
}

.dsh-loading-text {
  color: #666;
  font-size: 14px;
}

/* ========== ActionSheet（对应 wx.showActionSheet）========== */
.dsh-actionsheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10002;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.dsh-actionsheet {
  width: 100%;
  max-width: 100%;
  padding: 8px;
  animation: dshSlideUp 0.2s ease;
}

/* 桌面端：ActionSheet 限宽居中 */
@media (min-width: 481px) {
  .dsh-actionsheet {
    max-width: 420px;
  }
}

@keyframes dshSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.dsh-actionsheet-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.dsh-actionsheet-item {
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-size: 16px;
  color: #1a1a1a;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.dsh-actionsheet-item:last-child { border-bottom: none; }
.dsh-actionsheet-item:hover { background: #f7f7f7; }

.dsh-actionsheet-cancel {
  margin-top: 8px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
}

.dsh-actionsheet-cancel:hover { background: #f7f7f7; }

/* =====================================================
   网站备案与联系信息栏（全站统一页脚）
   依据工信部要求展示 ICP 备案号并链接至 beian.miit.gov.cn
   ===================================================== */
.site-footer {
  text-align: center;
  font-size: 12px;
  color: #999;
  line-height: 1.8;
  padding: 12px 16px;
}

.site-footer a {
  color: #666;
  text-decoration: none;
}

.site-footer a:hover {
  color: #2475e0;
  text-decoration: underline;
}

.site-footer-sep {
  margin: 0 6px;
  color: #ccc;
}