/* 引入站酷小薇LOGO体（CDN，推荐） */

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

        body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
          background: #f5f5f5;
          overflow-x: hidden;
          -webkit-tap-highlight-color: transparent;
        }

        @font-face {
          font-family: Bakudai-Regular;
          src: url(https://cdn.jsdelivr.net/gh/max32002/bakudaifont@1.48/webfont/Bakudai-Regular.woff2) format("woff2");

        }

        @font-face {
          font-family: "ZCOOL XiaoWei";
          src: url(./font_5137488_zgdl3q9ukp/ZCOOLXiaoWei-Regular.ttf);
           src: url(./font_5137488_d2jxgd0ikc7/ZCOOLXiaoWei-Regular.ttf);

        }

        @import url("https://fonts.googleapis.cn/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap");

        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }

        /* 页面容器 */
        .page {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 80px;
          /* 底部导航栏高度 */
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          /* iOS平滑滚动 */
          background: #fff;
          z-index: 1;
        }

        .page.active {
          display: block;
          z-index: 10;
        }

        .page:not(.active) {
          overflow: hidden;
        }


        /* 状态栏 */
        .status-bar {
          height: 44px;
          background: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          font-size: 15px;
          font-weight: 600;
          position: sticky;
          top: 0;
          z-index: 100;
        }

        .status-icons {
          display: flex;
          gap: 5px;
          align-items: center;
        }

        /* 底部导航 */
        .tab-bar {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          height: 80px;
          background: #fff;
          border-top: 1px solid rgba(166, 127, 94, 0.7);
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding-bottom: 15px;
          z-index: 1000;
        }

        .tab-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          cursor: pointer;
          color: rgba(16, 16, 16, 0.74);
          font-size: 14px;
          font-weight: 480px;
          transition: color 0.3s;
          flex: 1;
        }

        .tab-item.active {
          color: rgba(166, 127, 94, 0.91);
        }

        .tab-icon {
          width: 26.4px;
          height: 26.4px;
          fill: currentColor;
          border-radius: 4px;
        }

        /* 登录页 */
        .login-page {
          background-image: url(./login-page4.jpg);
          background-size: cover;
          background-position: center;
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 40px;
          color: rgb(148, 119, 115);
          z-index: 100;
        }

        .login-page.active {
          display: flex;
        }

        html,
        body {
          margin: 0;
          padding: 0;
          height: 100%;
          width: 100%;
        }

        .page home-page {
          min-height: 100vh;
          width: 100vw;
          overflow: hidden;
          position: relative;
          padding-bottom: 100px;
          box-sizing: border-box;
          background-color: #FCF9F2;
        }

        .sleep-schedule-container {
          height: 100%;
          overflow-y: auto;
          box-sizing: border-box;
          font-family: "Source Han Serif CN", serif;
        }


        .login-title {
          font-family: Bakudai-Regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
          font-size: 28px;
          margin-bottom: 10px;
          font-weight: 600;
        }

        .login-subtitle {
          transform: translateY(50px) !important;
          font-family: Bakudai-Regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
          font-size: 16px;
          opacity: 0.9;
          margin-bottom: 40px;
        }

        .login-form {
          width: 100%;
          max-width: 320px;
          transform: translateY(30px);
        }

        .input-group {
          margin-bottom: 20px;
        }

        .input-group input {
          width: 100%;
          height: 50px;
          border: none;
          border-radius: 12px;
          padding: 0 20px;
          font-size: 16px;
          background: rgba(255, 255, 255, 0.95);
          outline: none;
        }

        .login-btn {
          width: 100%;
          height: 50px;
          border: none;
          border-radius: 12px;
          background: #fff;
          color: #667eea;
          font-size: 18px;
          font-weight: 600;
          cursor: pointer;
          margin-top: 10px;
          transition: transform 0.2s;
        }

        .login-btn:active {
          transform: scale(0.98);
        }

        .switch-mode {
          text-align: center;
          margin-top: 5px;
          font-size: 14px;
          opacity: 0.9;
          color: rgb(148, 119, 115);
        }
       
        .other-login-btn {
          text-align: center;
          margin-top: 5px;
          font-size: 14px;
          opacity: 0.9;
          color: rgb(148, 119, 115);
        }

        /* 体质测评页 */
        .assessment-page {
          background: #fff;
          min-height: 1000px;
        }

        /*.assessment-progress {
          height: 4px;
          background: #fff;
          border-radius: 2px;
          margin-bottom: 30px;
          overflow: hidden;
        }

        .assessment-progress-bar {
          height: 100%;
          background: #fff;
          width: 0%;
          transition: width 0.3s;
        }*/

        .question-card {
          background: #f8f9fa;
          border-radius: 16px;
          padding: 30px 20px;
          margin-bottom: 20px;
        }

        .question-number {
          color: #2e7d32;
          font-size: 14px;
          margin-bottom: 10px;
          font-weight: 600;
        }

        .question-text {
          font-size: 18px;
          color: #333;
          line-height: 1.6;
          margin-bottom: 25px;
        }

        .option-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .option-item {
          padding: 16px 20px;
          background: #fff;
          border: 2px solid #e0e0e0;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 15px;
        }

        .option-item:hover,
        .option-item.selected {
          border-color: #2e7d32;
          background: #e8f5e9;
        }

        .assessment-result {
          text-align: center;
          padding: 40px 20px;
          background: url('./page-bu/膳食背景.png') no-repeat center top;
          background-size: cover;
          min-height: 100vh;
        }

        .constitution-type {
          font-size: 32px;
          color: #2e7d32;
          margin-bottom: 15px;
          font-weight: 600;
        }

        .constitution-desc {
          font-size: 16px;
          color: #666;
          line-height: 1.8;
          margin-bottom: 30px;
        }

        /* 首页样式 */
        .home-page {
          background: #f8f9fa;
          font-family: "Source Han Serif CN", serif;
        }

        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ccc;
          cursor: pointer;
        }

        .dot.active {
          background: #333;
        }


        .check-in-btn-home {
          margin-top: 15px;
          width: 100%;
          padding: 14px;
          background: #fff;
          color: #2e7d32;
          border: none;
          border-radius: 10px;
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
        }

        .section-card {
          background: #fff;
          margin: 10px;
          border-radius: 12px;
          padding: 15px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
        }

        .section-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }

        .section-more {
          font-size: 13px;
          color: #2e7d32;
        }

        /* 日历样式 */
        .calendar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
        }

        .month-label {
          font-size: 18px;
          font-weight: 600;
        }

        .check-in-tag {
          color: #2e7d32;
          font-size: 14px;
          font-weight: 600;
        }

        .week-days {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        }

        .day-label {
          font-size: 12px;
          color: #666;
          text-align: center;
          flex: 1;
        }

        .day-label.active {
          color: #2e7d32;
          font-weight: 600;
        }

        .calendar-grid {
          display: flex;
          justify-content: space-between;
        }

        .day-cell {
          flex: 1;
          text-align: center;
          padding: 8px 0;
          border-radius: 50%;
          margin: 0 2px;
          cursor: pointer;
        }

        .day-cell.active {
          background: #c8e6c9;
          color: #2e7d32;
        }

        .day-cell.checked::after {
          content: '✓';
          display: block;
          font-size: 8px;
          color: #2e7d32;
          margin-top: -2px;
        }

        .day-number {
          font-size: 16px;
          font-weight: 500;
        }

        .companion-page {
          width: 430px;
          height: 932px;
           overflow: hidden;  /* 新增 */
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          position: relative;
           background-image: url('./page2-background.jpg');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }

        .content-area {
          min-height: 0; 
          flex: 1;
          background: transparent;

          display: flex;
          flex-direction: column;
          align-items: center;
          background-position: center;
          gap: 0px;
          padding: 137px 23px 65px !important;
          box-sizing: border-box;
        }

        .companion-page .mode-btn {
          width: 410px;
          height: 190px;
          border-radius: 11px;
          background-color: rgba(255, 251, 215, 0.05);
          border: none;
          box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.17);
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding: 0 40px;
          gap: 10px;
          cursor: pointer;
          margin: 0;
          overflow: hidden;
         margin-bottom: 20px;
        

        }

        .mode-btn .icon1 {
          width: 150px !important;
          height: 150px !important;
          display: inline-block !important;
        }

        .mode-btn .icon2 {
          width: 190px !important;
          height: 190px !important;
          display: inline-block !important;
        }

        .mode-btn .icon3 {
          width: 162px !important;
          height: 162px !important;
          display: inline-block !important;
        }

        .music-icon {
          width: 38px;
          height: auto;
          position: absolute;
          top: 70px;
          right: 23px;
          z-index: 999;
        }

        .companion-page .mode-btn:last-child {
          margin-bottom: 0;
          background-color: rgba(255, 255, 255, 0.05);
          box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.17);
          margin-bottom: 0px;
        }


        .mode-title-1 {
          font-size: 28px;
          font-weight: 500;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          color: rgba(114, 166, 128, 0.71);
        }

        .mode-title-2 {
          font-size: 28px;
          font-weight: 500;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          color: rgba(166, 127, 94, 0.91);
        }

        .mode-title-3 {
          font-size: 28px;
          font-weight: 500;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          color: #7DA3ED;
        }

        .mode-subtitle {
          display: none;
          /* 暂时隐藏，需要的话可以打开 */
          font-size: 13px;
          color: #999;
          margin-top: 6px;
        }

        /* 状态栏样式（可选） */
        /*.status-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            font-size: 14px;
            color: #333;
        }

        .status-icons {
            display: flex;
            gap: 8px;
        }*/


        /* 睡眠中页面 */
        .sleeping-page {
          background: #1a1a2e;
          color: #fff;
          text-align: center;
          padding-top: 60px;
        }

        .video-background {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          overflow: hidden;
        }

        .video-background video {
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          transform: translate(-50%, -50%);
          object-fit: cover;
        }

        .scene-selector {
          margin: 20px;
          padding: 12px 24px;
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: 20px;
          display: inline-block;
          color: rgba(255, 255, 255, 0.8);
          cursor: pointer;
        }

        .sleep-status {
          font-size: 32px;
          margin: 40px 0;
          font-weight: 300;
          letter-spacing: 2px;
        }

        .sleep-time {
          display: flex;
          justify-content: center;
          align-items: baseline;
          gap: 10px;
          margin-bottom: 60px;
        }

        .time-label {
          color: rgba(255, 255, 255, 0.6);
          font-size: 16px;
        }

        .time-value {
          font-size: 56px;
          font-weight: 200;
          color: #fff;
        }

        .sleep-controls-new {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
          position: fixed;
          bottom: 120px;
          left: 0;
          right: 0;
          padding: 0 30px;
        }

        .sleep-controls-left,
        .sleep-controls-right {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .control-btn {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          border: 1px solid rgba(252, 251, 252, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: rgba(252, 251, 252, 1);
          background: rgba(252, 251, 252, 0.31);
          box-shadow: 2px 2px 6px rgba(252, 251, 252, 1);
          cursor: pointer;
          transition: all 0.3s;
          font-family: 'Source Han Serif CN', serif;
        }

        .control-btn:hover {
          background: rgba(252, 251, 252, 0.2);
        }

        .control-btn.main {
          width: 200px;
          height: 80px;
          border-radius: 50%;
          font-size: 18px;
          color: rgb(142, 153, 236);
          background: rgba(252, 251, 252, 0.76);
          border: 1px solid rgba(252, 251, 252, 0.18);
          box-shadow: 2px 2px 6px rgba(252, 251, 252, 1);
          font-family: 'Source Han Serif CN', serif;
        }


        /* AI助手页面 */

        .page.ai-page {
          font-family: "Source Han Serif CN", serif;
        }

        .ai-title-large {
          display: flex;
          /* 关键：垂直居中对齐 */
          font-size: 28px;
          font-weight: 400;
          color: #8c715b;
          transform: translateY(18px);
        }

        .ai-prefix {
          font-size: 28px;
          line-height: 1;
          /* 如需微调位置 */
          margin-top: 2px;
        }

        .ai-suffix {
          font-size: 28px;
          line-height: 1;
        }

        .sheep-mascot-container {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
        }

        .sheep-image {
          width: 80px;
          height: 80px;
          object-fit: contain;
          margin-top: 5px;
          margin-right: -10px;
        }

        .sheep-emoji {
          font-size: 60px;
          margin-top: 5px;
        }

        .speech-bubble {
          position: relative;
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 16px;
          padding: 12px 15px;
          max-width: 180px;
          margin-bottom: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          position: relative;
        }

        .speech-bubble::after {
          content: '';
          position: absolute;
          bottom: -8px;
          right: 30px;
          width: 0;
          height: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-top: 8px solid #fff;
          filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
        }

        .speech-bubble-text {
          font-size: 13px;
          color: #666;
          line-height: 1.5;
        }

        .today-suggestion-card {
          background: #fff;
          margin: 0 15px 20px;
          border-radius: 16px;
          padding: 20px;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

        .suggestion-card-title {
          font-size: 16px;
          color: #666;
          margin-bottom: 15px;
          font-weight: 500;
        }

        .suggestion-item {
          margin-bottom: 12px;
        }


        .suggestion-content-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 10px;
        }

        .suggestion-desc.simple {
          padding-left: 20px;
          color: #333;
        }

        .suggestion-action-btn {
          background: #f5e6e0;
          color: #8b6f6b;
          border: none;
          padding: 8px 16px;
          border-radius: 16px;
          font-size: 13px;
          cursor: pointer;
          white-space: nowrap;
          transition: all 0.2s;
        }

        .suggestion-action-btn:hover {
          background: #ebd5cd;
        }

        .suggestion-divider {
          height: 1px;
          background: #f0f0f0;
          margin: 12px 0;
        }

        .suggestion-item.warning {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-top: 15px;
        }

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

        .suggestion-item.tip {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-top: 12px;
        }

        .tip-label {
          color: rgb(168, 131, 99);
          font-size: 15px;
          font-weight: 600;
          white-space: nowrap;
        }

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

        .guess-questions-section {
          padding: 0 20px;
          margin-bottom: 100px;
        }

        .questions-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .question-item {
          display: inline-block;
          /* 关键：宽度自适应内容 */
          width: 184px;
          max-width: 100%;
          align-self: flex-start;
          /* 左对齐，不撑满 */
          background: #bbbbbb14;
          /* 灰色填充 */
          border: none;
          /* 去除边框 */
          padding: 12px 18px;
          border-radius: 2px;
          font-size: 15px;
          color: rgb(138, 137, 145);
          cursor: pointer;
          transition: all 0.2s;
          white-space: nowrap;
          /* 不换行 */
          max-width: 90%;
          /* 最大宽度限制 */
          text-align: center;
        }

        .question-item:hover {
          background: #f8f9fa;
          border-color: #e0e0e0;
          transform: translateX(5px);
        }


        .chat-input-new {
          flex: 1;
          height: 44px;
          border: 1px solid #e0e0e0;
          border-radius: 22px;
          padding: 0 18px;
          font-size: 15px;
          outline: none;
          background: #f8f9fa;
          transition: all 0.2s;
        }

        .chat-input-new:focus {
          border-color: #2e7d32;
          background: #fff;
        }

        /* 发消息框容器 - 固定在底部 */
        .chat-input-wrapper {
          position: fixed;
          bottom: 80px;
          left: 0;
          right: 0;
          padding: 10px 15px;
          z-index: 100;
        }

        /* 圆角气泡输入框 */
        .chat-input-container {
          display: flex;
          align-items: center;
          background: #ffffff;
          border-radius: 28px;
          padding: 6px 12px;
          gap: 10px;
          border: 1px solid #bbbbbb;
          box-shadow: 0 2px 6px #00000066;
        }

        /* 输入框样式 */
        .chat-input-field {
          flex: 1;
          border: none;
          background: transparent;
          font-size: 13px;
          color: #101010;
          outline: none;
          height: 24px;
          line-height: 24px;
          font-weight: 700;
          font-family: "Source Han Serif CN", serif;
        }

        .chat-input-field::placeholder {
          color: #999;
        }

        /* 图标按钮样式 */
        .chat-input-container .input-icon {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #101010;
          cursor: pointer;
          border-radius: 50%;
          transition: background 0.2s;
          font-size: 20px;
          font-weight: 600;
        }

        .chat-input-container .input-icon:hover {
          background: rgba(0, 0, 0, 0.05);
        }


        .input-icon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: #666;
          cursor: pointer;
          border-radius: 50%;
          transition: background 0.2s;
        }

        .input-icon:hover {
          background: #f0f0f0;
        }



        /* 商城页面 */
        .shop-page {
          background: #fcf9f2;
          padding-bottom: 20px;
          font-family: "Source Han Serif CN", serif;
        }


        .shop-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 20px;
          background: #fcf9f2;
          position: relative;
        }

        .shop-title {
          font-size: 28px;
          font-weight: 700;
          color: #8c715b;
        }

        .shop-header::after {
          content: '';
          position: absolute;
          bottom: 8px;
          left: 5%;
          right: 7%;
          height: 1px;
          background: #a67f5e26;
        }

        .shop-section-title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 20px;
          font-weight: 700;
          color: #8c715b;
        }

        .search-icon {
          width: 36px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          color: #a67f5ee6;
          cursor: pointer;
        }

        .shop-section {
          margin-bottom: 24px;
          padding: 0 16px;
        }

        .shop-section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          padding: 0 4px;
        }


        .shop-section-title {
          font-size: 20px;
          font-weight: 700;
          color: #a67f5ee6;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .product-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
        }

        .shop-section-arrow {
          color: #8c715b;
          font-size: 20px;
          opacity: 0.6;
        }


        .product-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;
          margin: 30px 0;
        }


        .product-card {
          background: #fff;
          border-radius: 8px;
          overflow: hidden;
          cursor: pointer;
          transition: transform 0.2s;
        }

        .product-card:hover {
          transform: translateY(-2px);
        }

        .product-img {
          width: 100%;
          aspect-ratio: 1;
          background: #f5f5f5;
          border-radius: 8px;
          display: flex;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          align-items: center;
          justify-content: center;
          color: #999;
          font-size: 12px;
          overflow: hidden;
        }

        .product-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .product-img:hover {
          transform: scale(1.02);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }


        .product-info {
          padding: 10px;
        }

        .product-name {
          font-size: 14px;
          color: #101010f2;
          margin-top: 8px;
          padding: 0 4px;
          overflow: hidden;
          cursor: pointer;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          font-weight: lighter;
        }

        .product-price {
          font-size: 14px;
          color: #e53935;
          font-weight: 600;
        }

        .section-desc-wrapper {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .section-desc {
          font-size: 14px;
          color: #72a680;
          opacity: 0.8;
        }

        .section-icon {
          fill: currentColor;
          /* 关键：使用 currentColor 继承父元素文字颜色 */
        }

        .iconfont.icon-abdominal {
          font-size: 22px;
          color: #a67f5ee6;
        }

        .iconfont.icon-ico_yuyueguanli_jiedaiyuyue {
          font-size: 22px;
          color: #a67f5ee6;
        }

        .iconfont.icon-3 {
          font-size: 22px;
          color: #a67f5ee6;
        }


        /* 我的页面 */

        .profile-page {
          /*background: #f8f9fa;*/
          background-image: url("page5/beijing.png") !important;
          background-repeat: no-repeat !important;
          background-size: cover !important;
          background-position: center !important;
          /*min-height: 100vh !important;
          height: 100vh;
          margin: 0 !important;
          padding: 0 !important;*/
          overflow-x:hidden;
        }


        .profile-header {
          /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
          padding: 40px 20px 30px;
          color: #fff;
          position: relative;
        }

        .profile-header-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px 20px 0px 20px;

        }


        .night-mode-toggle {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          font-size: 13px;
          color: #666;
          cursor: pointer;
        }

        .yejian-text {
          font-size: 12px;
          color: #8C715B;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;

        }


        .points-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;


        }

        .points-label {
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-size: 14px;
          color: #8C715B;
        }

        .points-value {
          width: 53px;
          height: 22px;
          border-radius: 18px;
          background-color: rgba(114, 166, 128, 0.12);
          border: 1px solid rgba(166, 127, 94, 0.52);
          box-shadow: 0px 2px 6px 0px rgba(255, 255, 255, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          color: #8C715B;
        }

        .profile-info-main {
          display: flex;
          align-items: center;
          gap: 15px;
        }


        .profile-user-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px 20px 12px 20px;
          /*background: #fff;*/
          margin-bottom: 12px;
          margin-left: 10px;
        }

        .profile-left {
          display: flex;
          align-items: center;
          gap: 12px;
        }


        /*.avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: #f0f0f0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          color: #999;
        }*/

        .avatar {
          width: 86px;
          height: 83px;
          border-radius: 50%;
          object-fit: cover;
          background-color: #FFFFFF;
          border: none;
          box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden
        }

        .avatar-img {
          width: 55px;
          height: 54px;
          object-fit: contain;
          margin-left: 7px;
        }

        .profile-text {
          display: flex;
          margin-left: 10px;
          flex-direction: column;
          gap: 4px;
        }

        .profile-name {
          font-size: 18px;
          font-weight: 400;
          color: #574A40;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        .profile-arrow {
          color: #C2C2C2;
          font-size: 38px;
          margin-left: auto;
          margin-right: 25px;
        }

        .profile-id {
          font-size: 14px;
          opacity: 0.9;
          color: #8C715B;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        .profile-stats {
          display: flex;
          gap: 30px;
          margin-top: 25px;
        }

        .profile-stat {
          text-align: center;
        }

        .stat-number {
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 4px;
        }

        .stat-name {
          font-size: 12px;
          opacity: 0.9;
        }

        .vip-card {

          background-color: rgba(114, 166, 128, 0.12);
          border-radius: 15px 15px 0 0;
          border: 1px solid rgba(166, 127, 94, 0.52);
          box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 1);
          padding: 16px 20px;
          display: flex;
          align-items: center;
          gap: 30px;
          margin: 10px 15px;
          position: relative;
          height: 90px;
          overflow: visible;
        }

        .vip-info h3 {
          font-size: 18px;
          margin-bottom: 6px;
        }

        .vip-info p {
          font-size: 13px;
          opacity: 0.95;
        }

        .vip-btn {
          padding: 10px 20px;
          background: #fff;
          color: #f12711;
          border: none;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
        }

        .vip-level {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
        }

        /*.vip-icon {
          width: 40px;
          height: 40px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
        }*/

        .vip-text {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .vip-title {
          font-size: 18px;
          font-weight: 600;
          color: #574A40;
          font-style: italic;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        .vip-subtitle {
          font-size: 14px;
          font-weight: 600;
          color: #574A40;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        .vip-divider {

          position: absolute !important;
          bottom: -1px;
          left: 50%;
          transform: translateX(-50%);
          width: 150% !important;
          height: 4px !important;
          background-color: rgba(166, 127, 94, 0.13);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          z-index: 10;
        }

        .vip-medal {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
          cursor: pointer;
        }


        /*.medal-icon {
          width: 40px;
          height: 40px;
          background: #e3f2fd;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
        }*/

        .medal-text {

          font-size: 14px;
          font-weight: 600;
          color: #574A40;
          font-style: italic;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          margin-top: -11px;
        }

        /* 开关组容器 */
        .switch-group {
          display: flex;
          flex-direction: column;
          gap: 13px;
          margin: 20px 15px;
        }

        /* 单个开关项容器 */
        .switch-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          /*width: 374px;*/
          height: 46px;
          border-radius: 18px;
          background-color: rgba(114, 166, 128, 0.12);
          border: 1px solid rgba(166, 127, 94, 0.52);
          box-shadow: 0px 2px 6px 0px rgba(255, 255, 255, 1);
        }

        /* 开关文字样式 */
        .switch-label {
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-weight: 600;
          font-size: 18px;
          color: #574A40;
          margin-left: 20px;
        }

        /* 开关组件容器 */
        .switch {
          position: relative;
          display: inline-block;
          width: 37px;
          /* 开关宽度 */
          height: 20px;
          /* 开关高度 */
        }

        /* 隐藏原生 checkbox */
        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        /* 开关滑块（白色圆形） */
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 20px;
          transition: .3s;
        }

        /* 开启状态样式 */
        input:checked+.slider {
          /* 开启轨道：颜色#00E266，透明度48% */
          background-color: rgba(0, 226, 102, 0.48);
        }

        input:checked+.slider:before {
          /* 开启滑块：白色，位移到右侧 */
          transform: translateX(17px);
          background-color: #FFFFFF;
        }

        /* 关闭状态样式 */
        input:not(:checked)+.slider {
          /* 关闭轨道：颜色#E2E2E3，透明度100% */
          background-color: #E2E2E3;
        }

        input:not(:checked)+.slider:before {
          /* 关闭滑块：白色，位移到左侧 */
          transform: translateX(0);
          background-color: #FFFFFF;
        }

        /* 滑块圆形按钮 */
        .slider:before {
          position: absolute;
          content: "";
          height: 16px;
          width: 16px;
          left: 2px;
          bottom: 2px;
          border-radius: 50%;
          transition: .3s;
        }



        .menu-list {
          border-radius: 18px;
          background-color: rgba(255, 251, 215, 0.11);
          margin: 15px 16px;
          box-shadow: 0px 2px 6px 0px rgba(140, 113, 27, 1);
          overflow: hidden;
         /* height:365px;*/
        }

        .menu-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 20px;
          /*border-bottom: 1px solid #BBBBBB;*/
          cursor: pointer;
          transition: background 0.2s;
          position: relative;
        }

        .menu-item:not(:last-child)::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 15px;
          right: 15px;
          height: 1px;
          background-color: #BBBBBB;

        }

        .menu-item:hover {
          background: #fafafa;
        }

        .menu-item:last-child {
          border-bottom: none;
        }

        .menu-left {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .menu-icon {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
        }

        .menu-icon.green {
          background: #e8f5e9;
        }

        .menu-icon.blue {
          background: #e3f2fd;
        }

        .menu-icon.orange {
          background: #fff3e0;
        }

        .menu-icon.purple {
          background: #f3e5f5;
        }

        .menu-icon.red {
          background: #ffebee;
        }

        .menu-text {
          font-size: 14px;
          color: #574A40;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          margin-left: 20px;
        }

        .menu-arrow {
          color: #ccc;
          font-size: 18px;
        }

        /* 熬夜修复模式页面 */
        .repair-page {
          background: #fff;
          padding: 20px;
        }

        .repair-header {
          text-align: center;
          margin-bottom: 40px;
        }

        .repair-title {
          font-size: 22px;
          color: #333;
          margin-bottom: 10px;
          font-weight: 600;
        }

        .repair-subtitle {
          font-size: 14px;
          color: #999;
        }

        .stage-selector {
          display: flex;
          justify-content: space-around;
          margin-bottom: 50px;
        }

        .stage-item {
          text-align: center;
          cursor: pointer;
          transition: transform 0.2s;
        }

        .stage-item:hover {
          transform: translateY(-5px);
        }

        .stage-icon {
          width: 90px;
          height: 90px;
          border-radius: 50%;
          background: #f5f5f5;
          border: 3px solid #e0e0e0;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          transition: all 0.3s;
        }

        .stage-item.active .stage-icon {
          border-color: #2e7d32;
          background: #e8f5e9;
          box-shadow: 0 8px 20px rgba(46, 125, 50, 0.2);
        }

        .stage-label {
          font-size: 14px;
          color: #666;
          font-weight: 500;
        }

        .stage-item.active .stage-label {
          color: #2e7d32;
        }

        .repair-actions {
          background: #f8f9fa;
          border-radius: 20px;
          padding: 25px;
          margin-bottom: 30px;
        }

        .action-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 20px;
          color: #333;
        }

        .action-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .action-item {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 15px;
          background: #fff;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.2s;
        }

        .action-item:hover {
          transform: translateX(5px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .action-num {
          width: 32px;
          height: 32px;
          background: #2e7d32;
          color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 600;
        }

        .action-text {
          flex: 1;
          font-size: 15px;
          color: #333;
        }

        .history-btn {
          width: 100%;
          padding: 18px;
          border: 2px dashed #ddd;
          border-radius: 16px;
          background: #fff;
          font-size: 15px;
          color: #666;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
        }

        .history-btn:hover {
          border-color: #2e7d32;
          color: #2e7d32;
          background: #e8f5e9;
        }

        .progress-section {
          margin-top: 40px;
          padding: 0 10px;
        }

        .progress-label {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          color: #666;
          margin-bottom: 10px;
        }

        .progress-bar {
          height: 8px;
          background: #e0e0e0;
          border-radius: 4px;
          overflow: hidden;
        }

        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #2e7d32 0%, #4caf50 100%);
          width: 0%;
          transition: width 0.5s ease;
          border-radius: 4px;
        }

        /* 动画 */
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .page.active {
          animation: fadeIn 0.3s ease;
        }

        /* 提示消息 */
        .toast {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: rgba(0, 0, 0, 0.8);
          color: #fff;
          padding: 16px 32px;
          border-radius: 8px;
          font-size: 14px;
          z-index: 3000;
          display: none;
        }

        .toast.show {
          display: block;
          animation: fadeIn 0.2s ease;
        }

        /* 加载动画 */
        .loading {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.9);
          display: none;
          align-items: center;
          justify-content: center;
          z-index: 2500;
          flex-direction: column;
          gap: 20px;
        }

        .loading.active {
          display: flex;
        }

        .spinner {
          width: 50px;
          height: 50px;
          border: 4px solid #e0e0e0;
          border-top-color: #2e7d32;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }

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

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

        /* 聊天消息区域 */
        .chat-messages-container {
          height: 300px;
          overflow-y: auto;
          padding: 15px 20px;
          margin-bottom: 10px;
          background: #f8f9fa;
          border-radius: 12px;
          margin: 0 15px 20px;
          scroll-behavior: smooth;
        }

        /* 消息气泡样式 */
        .message {
          display: flex;
          align-items: flex-start;
          margin-bottom: 15px;
          gap: 10px;
        }

        .message.user {
          flex-direction: row-reverse;
        }

        .message-avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: #e8f5e9;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          flex-shrink: 0;
        }

        .message.user .message-avatar {
          background: #b48966;
          color: #fff;
          font-weight: 600;
        }
        .message.user .message-avatar span {
          font-size: 16px;
        }

        .message-content {
          max-width: 70%;
          padding: 12px 16px;
          border-radius: 16px;
          font-size: 14px;
          line-height: 1.6;
          color: #333;
          background: #fff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
          word-wrap: break-word;
        }

        .message.ai .message-content {
          background: #fff;
          border-bottom-left-radius: 4px;
        }

        .message.user .message-content {
          background: #b48966;
          color: #fff;
          border-bottom-right-radius: 4px;
        }

        /* 消息正文容器（可容纳文字气泡 + 图片组） */
        .message-body {
          max-width: 75%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
        }
        .message.user .message-body {
          align-items: flex-end;
        }

        /* 消息内图片组 */
        .ai-msg-images {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          max-width: 260px;
        }
        .message.ai .ai-msg-images { align-self: flex-start; }
        .message.user .ai-msg-images { align-self: flex-end; }

        .ai-msg-image-wrap {
          width: 160px;
          max-width: 100%;
          border-radius: 12px;
          overflow: hidden;
          background: #f3f3f3;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
          border: 1px solid rgba(0, 0, 0, 0.05);
          cursor: zoom-in;
        }
        .message.user .ai-msg-image-wrap {
          border-bottom-right-radius: 4px;
        }
        .message.ai .ai-msg-image-wrap {
          border-bottom-left-radius: 4px;
        }
        .ai-msg-image-wrap img {
          width: 100%;
          height: auto;
          max-height: 260px;
          display: block;
          object-fit: cover;
        }
        .ai-msg-images-multi .ai-msg-image-wrap {
          width: calc(50% - 3px);
        }

        /* 待发送图片预览条 */
        .ai-pending-images {
          display: flex;
          gap: 6px;
          overflow-x: auto;
          padding: 4px 2px;
          -webkit-overflow-scrolling: touch;
        }
        .ai-pending-img-box {
          position: relative;
          width: 56px;
          height: 56px;
          border-radius: 8px;
          overflow: hidden;
          background: #f3f3f3;
          border: 1px solid #e8e0d8;
          flex-shrink: 0;
        }
        .ai-pending-img-box img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .ai-pending-img-close {
          position: absolute;
          top: -4px;
          right: -4px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.55);
          color: #fff;
          font-size: 14px;
          line-height: 16px;
          text-align: center;
          cursor: pointer;
          user-select: none;
        }
        .ai-pending-img-close:hover { background: #d9363e; }

        /* 隐藏猜您想问时的样式调整 */
        .guess-questions-section.hidden {
          display: none;
        }

        /* 顶部标题 */
        .ai-header-simple {
          padding: 20px;
          padding-bottom: 0px;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          ;
        }


        /* 建议框容器 - 相对定位，用于放置羊 */
        .suggestion-box-container {
          margin: 30px 15px 20px;
          position: relative;
          background: #fffbd721;
          border-radius: 13px;
          box-shadow: 0 2px 8px #a67f5e85;
          padding: 10px 0px 16px;
        }

        /* 羊的容器 - 绝对定位在右上角 */
        .sheep-in-box {
          position: absolute;
          top: -30px;
          right: -3px;
          width: 99px;
          height: 99px;
          z-index: 10;
        }

        .sheep-in-box img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        /* 羊的气泡 */
        .sheep-bubble-top {
          position: absolute;
          top: -78px;
          right: 70px;
          background: #fffbd721;
          padding: 10px 32px;
          border-radius: 50%;
          font-size: 12px;
          color: #101010c9;
          z-index: 11;
          min-width: 140px;
          /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); */
          line-height: 1.6;
          text-align: center;
          /* 文字居中 */
          border: 1px solid rgba(214, 208, 194);
          /* 添加细边框 */
          width: 175px;
          /* 固定宽度，确保椭圆形状 */
          height: 80px;
          /* 固定高度，形成扁平椭圆 */
          display: flex;
        }

        .sheep-bubble-top::before {
          content: '';
          position: absolute;
          bottom: 17px;
          right: -3px;
          width: 4px;
          height: 6px;
          background: #fffbd721;
          border: 1px solid rgba(162, 153, 146);
          border-radius: 50%;
          z-index: 12;
        }

        .bubble-close-small {
          position: absolute;
          top: -3px;
          right: 8px;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          color: rgb(195, 194, 192);
          cursor: pointer;
          border: 1px solid rgb(195, 194, 192);
          z-index: 15;
          line-height: 1;
          transition: all 0.2s ease;
        }

        /* 建议框标题 */
        .suggestion-box-title {
          font-size: 20px;
          font-weight: bold;
          color: #a67f5ee6;
          margin-bottom: 16px;
          margin-right: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          text-align: center;
          padding: 0 25px;
        }

        /* 建议项目 */
        .suggestion-row {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          margin: 0 25px;
          /* 保持两边留空（下划线用） */
          padding: 14px 0 8px;
          /* 上下间距，左右由margin控制 */
          position: relative;
          border-bottom: none;
          gap: 4px;
        }

        .suggestion-row::after {
          content: '';
          position: absolute;
          bottom: 5px;
          left: 15px;
          /* 从margin边界开始 */
          right: 52px;
          height: 1px;
          background: #a67f5e80;
        }

        .suggestion-left {
          flex: 0 0 auto;
          /* 关键：不扩展，宽度由内容决定 */
          width: auto;
          /* 根据文字内容自适应 */
          display: flex;
          flex-direction: column;
          gap: 3px;
          /* 标签和描述之间增加间隙 */
          padding-top: 0px;
          padding-left: 12px;
          /* 微调垂直位置 */
        }

        .suggestion-label {
          font-size: 16px;
          font-weight: 800;
          color: #a67f5ee6;
          margin-bottom: 0;
          line-height: 1.4;
          margin-top: 0;
          margin-left: -28px;
          margin-bottom: 2px;
          padding: 0;
        }

        .suggestion-desc {
          font-size: 14px;
          color: #101010f2;
          line-height: 1.5;
          padding-bottom: 2px;
          padding-left: 7px;
        }

        /* 按钮样式 */
        .suggestion-btn {
          font-family: "Source Han Serif CN", serif;
          width: 115px;
          /* 固定长度，确保所有按钮一致（根据最长文字"帮我定个闹钟"调整） */
          padding: 2px 0;
          /* 上下padding，无左右padding */
          border-radius: 10px;
          font-size: 14px;
          border: 1px solid #a67f5e7a;
          cursor: pointer;
          white-space: nowrap;
          text-align: center;
          /* 文字居中 */
          flex-shrink: 0;
          /* 防止被压缩 */
          align-self: flex-start;
          /* 与容器顶部对齐（与描述文字同行） */
          margin-top: 17px;
          /* 向下偏移与描述文字对齐 */
          background-color: rgb(237, 241, 233);
          box-sizing: border-box;
          /* 确保宽度计算包含border */
          /* flex: 1; */
          min-width: 110px;
          margin-left: auto
        }


        .or-text {
          color: #999;
          font-size: 13px;
        }

        /* 今日忌 */
        .warning-row,
        .tip-row {
          display: flex;
          align-items: baseline;
          /* 文字基线对齐 */
          gap: 12px;
          padding: 12px 0px 0px 30px;
          font-size: 15px;
          color: #101010f2;
          line-height: 1.5;
        }

        .warning-label {
          color: rgb(137, 81, 78);
          font-weight: 600;
          white-space: nowrap;
          flex-shrink: 0;
          font-size: 15px;
        }


        .tip-label {
          color: #81C784;
          font-weight: 600;
          white-space: nowrap;
          flex-shrink: 0;
        }

        .shop-link {
          color: rgb(111, 149, 240);
          text-decoration: none;
          margin-left: 5px;
          white-space: nowrap;
        }

        /* 猜您想问 */
        .guess-questions-section {
          margin: 0 15px 20px;
          min-height: 300px;
        }

        .guess-title {
          font-size: 16px;
          color: #10101099;
          margin-bottom: 12px;
          font-weight: 800;
          margin-left: -15px;
        }

        .questions-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        /*新增*/
        /* ===================== 新增：首页熬夜修复模块专属样式 ===================== */
        /* 首页容器基础适配 */
        .home-page {
          width: 100%;
          min-height: 100vh;
          background-color: #f5f5f5;
        }

        /* 熬夜修复模块容器 */
        .home-repair-module {
          width: 100%;
          overflow: hidden;
        }

        /* 1. Banner轮播样式（匹配截图橙红渐变） */
        .repair-banner {
          width: 100%;
          height: 220px;
          background: -webkit-linear-gradient(135deg, #ff9a8b 0%, #ff6a88 100%);
          background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 100%);
          padding: 20px;
          position: relative;
          overflow: hidden;
          color: #fff;
        }

        /* 首页Banner适配 */
        .home-banner {
          height: 200px;
          border-radius: 0;
          margin: 0;
        }

        .home-banner h1 {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 8px;
        }

        .home-banner p {
          font-size: 15px;
          color: rgba(255, 255, 255, 0.9);
        }

        /* Banner轮播指示器 */
        .banner-indicators {
          position: absolute;
          bottom: 16px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 8px;
        }

        .indicator {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.4);
          transition: background 0.2s ease;
        }

        .indicator.active {
          background: #fff;
        }

        .record-card.home-record-card {
          background-image: url('./page1-photos/卷轴新版.png');
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          position: relative;
          aspect-ratio: 3.5 / 1;
          min-height: 140px;
          /*margin: 10px;*/
         /* margin: -69px -17px;    /* 原 -16% -4% 转换 */
  /*padding: 34px 26px;*/
         /*margin: -16% -4%;*/
         margin: -16% -4% -16% -4%;
          padding-bottom: 10px;
          padding: 8% 6%;
          min-height: auto;
          aspect-ratio: 16/8;
          /* 保持卷轴比例，可根据实际图片调整 */
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border: none;
          background-color: transparent;
          box-sizing: border-box;
          height: 100%;
        }

        /* 卷轴边角装饰 */
        .record-card::before,
        .record-card::after {
          content: '';
          position: absolute;
          width: 16px;
          height: 16px;
          background-color: #d4b886;
        }

        .record-card::before {
          top: 0;
          left: 0;
          border-radius: 0 0 8px 0;
        }

        .record-card::after {
          top: 0;
          right: 0;
          border-radius: 0 0 0 8px;
        }


        .record-card.home-record-card .title {
          writing-mode: vertical-rl;
          text-orientation: mixed;
          font-family: "ZCOOL XiaoWei", "站酷小薇LOGO体", sans-serif;
         /* font-size: 20px;*/
          color: #806B5A;
          letter-spacing: 13px;
          position: absolute;
         /* left: 60px;*/
          line-height: 28px;
          margin: 0 auto;
          font-weight: 400;
           left: 13%;          /* 可调整范围：7%-10% */
  font-size: 4.5vw;  /* 可调整范围：4vw-5vw */
        }


        .record-card.home-record-card .record-item {
          display: flex;
          flex: 1;

          flex-direction: column;
          /*gap: 10px;*/
          gap: 1.5vh;
          align-items: center;
          text-align: center;
          justify-content: center;
          height: 100%;
          transform: translateX(15px);
        }

        /* 证型条目 */
        .syndrome-item {

          cursor: pointer;
          transition: color 0.2s;
          font-weight: 400;
          font-family: "ZCOOL XiaoWei", "站酷小薇LOGO体", sans-serif;
          position: relative;
         /* left: 23px;*/
         left:4.5%;
           gap: 0.5vh;
          letter-spacing: -0.5px;
        }

        .syndrome-item:hover {
          color: #8B6B4A;
        }

        .syndrome-label {
          /*font-size: 20px;*/
          font-size: 4.5vw;
          color: #574A40;
          font-weight: 500;
        }

        .syndrome-type {
          /*font-size: 23px;*/
          font-size: 5.35vw;
          font-weight: 400;
          color: #9F1A08;
          font-family: "ZCOOL XiaoWei", "站酷小薇LOGO体", sans-serif;
          position: relative;
          left: -6px;
        }


        .report-item {


          cursor: pointer;
          transition: color 0.2s;
          margin: 0 auto;
          line-height: 60px;
          font-weight: 400;
          font-family: "ZCOOL XiaoWei", "站酷小薇LOGO体", sans-serif;
          position: relative;
          gap: 0.3vh;
          letter-spacing: -0.5px;
        }

        .report-item:hover {
          color: #8B6B4A;
        }

        .report-label {
          /*font-size: 20px;*/
          font-size: 4.5vw;
          color: #574A40;
          font-weight: 500;

        }

        .report-status {
          font-family: "ZCOOL XiaoWei", "站酷小薇LOGO体", sans-serif;
          /*font-size: 23px;*/
          font-size: 5.35vw !important; 
          font-weight: 400;
          color: #9F1A08;
          position: relative;
          left: -10px;
          line-height: 1.2;
        }

        .report-time {
          font-weight: 700;
          font-size: 3.5vw;
          color: #8C715B;
          position: relative;
          left: -10px;

        }

        /* 查看详情提示 */
        .view-detail-tip {
          font-size: 3.5vw;
          color: #8C715B;
          text-align: center;
         /* margin-top: 8px;*/
          font-weight: 400;
          font-family: "ZCOOL XiaoWei", "站酷小薇LOGO体", sans-serif;
          position: relative;
          top: -15px;
          left: -5px;
          margin-top: 0.8vh;
        }

        /* 分享按钮 */
        .share-btn {
          position: absolute;
          top: 20px;
          right: 20px;
          padding: 6px 12px;
          border: none;
          font-size: 12px;
          cursor: pointer;
          transition: background-color 0.2s;
        }

        .share-btn:hover {
          background-color: #6d553a;
        }

        /* 分享弹窗 */
        .share-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          justify-content: center;
          align-items: center;
          z-index: 1000;
        }

        .share-content {
          background-color: #fff;
          padding: 25px;
          border-radius: 16px;
          width: 80%;
          max-width: 300px;
          text-align: center;
        }

        .share-title {
          font-size: 18px;
          color: #333;
          margin-bottom: 20px;
        }

        .share-platforms {
          display: flex;
          justify-content: space-around;
          margin-bottom: 20px;
        }

        .platform-item {
          padding: 10px 15px;
          background-color: #f5f5f5;
          border-radius: 8px;
          cursor: pointer;
          transition: background-color 0.2s;
        }

        .platform-item:hover {
          background-color: #e0e0e0;
        }

        .share-close {
          padding: 8px 20px;
          background-color: #e0e0e0;
          border: none;
          border-radius: 8px;
          cursor: pointer;
        }

        /* 3. 睡眠修复日程安排样式 */
        .schedule-section {
          background-color: #fff;
          border-radius: 12px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        /* 首页日程模块适配 */
        .home-schedule-section {
          margin: 10px;
          padding: 15px;
        }

        .schedule-title {
          text-align: center;
          font-size: 16px;
          color: #333;
          margin-bottom: 15px;
        }

        /* 日历区域 */
        .calendar-header {
          font-size: 20px;
          color: #333;
          margin-bottom: 8px;
        }

        .check-in-tag {
          font-size: 14px;
          color: #2e7d32;
          margin-bottom: 12px;
        }

        .calendar-days {
          display: flex;
          justify-content: space-around;
          margin-bottom: 16px;
        }

        .day-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          cursor: pointer;
        }

        .day-item .num {
          width: 36px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          border-radius: 50%;
          font-size: 16px;
          transition: all 0.2s ease;
        }

        .day-item.active .num {

          background-color: #bbdefb;
          color: #1565c0;
        }

        .day-item.checked .num {
          background-color: #c8e6c9;
          color: #2e7d32;
          position: relative;

        }

        .day-item.checked .num::after {

          position: absolute;
          font-size: 12px;
          bottom: 0;
          right: 0;
          color: #2e7d32;
        }

        .day-item .label {
          font-size: 12px;
          color: #666;
        }


        /* 任务收起/展开样式 */
        .task-content.collapsed {
          max-height: 40px;
          overflow: hidden;
        }

        .task-toggle {
          text-align: right;
          font-size: 14px;
          color: #1565c0;
          margin-top: 8px;
          cursor: pointer;
        }

        /* 全局淡入动画 */
        @-webkit-keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

       /* 新增 */
.checkin-wrapper {
  width: 100%;
  position:relative;
}

.checkin-scale {
  width: 430px;
  transform-origin: top left;
  will-change: transform;
    
}


        .checkin-container {
          margin:5px auto;
           width: 410px;
          border:1px solid rgba(166, 127, 94, 0.52);
          /*margin-top:10px;*/
          background-color: rgba(255, 251, 215, 0.1);
          height: auto;
          max-height:160px;
          overflow: hidden;
          border-radius: 11px;
          padding: 13px 5px;
          /*width: 95%;
          max-width: 100%;*/
          box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.17);
          display: grid;
          grid-template-rows: auto auto;
          gap: 0;
          justify-content: start;
          overflow: visible;
          /*grid-template-columns:repeat(auto-fit,minmax(40px,1fr));*/
          position: relative;
          z-index: 1;
        }




        .checkin-title {
          margin-top: 55px;
          font-size: 22px;
          color: #A67F5E;
          text-align: center;
          margin-bottom: 15px;

          font-weight: 400;
          font-family: "ZCOOL XiaoWei", "站酷小薇LOGO体", sans-serif;
        }

        /* 网格布局，保证第1天 ↔ 2号 垂直对齐 */
        .calendar-grid-container {
          display: grid;
          grid-template-columns: auto repeat(7, 1fr);
          grid-auto-rows: minmax(40px, auto);
          gap: 5px;
          align-items: stretch;
          margin-bottom: 0px;
          /*14*/
          max-height: 400px;
          overflow-y: hidden;
          justify-items: stretch;
          text-align: center;
          width: 100%;
          padding: 0;
          /*margin-left:2px;
    margin-right:2px;*/
          line-height: 1.1 !important;
          margin-top: -2px !important;
          margin-bottom: -7px !important;
        }

        .calendar-grid-container>* {
          width: 100% !important;
          padding: 0 !important;
          margin: 0 !important;
          text-align: center !important;
          font-size: 12px;

          /*margin-top:-6px;*/
          line-height: 1.1 !important;
          margin-top: -2px !important;
        }

        .calendar-grid-container>*:not(.month-text) {
          margin-left: -6px !important;
        }

        .month-placeholder {
          visibility: hidden;
        }

        .week-tag {
          font-size: 14px;
          color: #101010;
          text-align: center;
          padding: 3px 0;
          position: relative;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          margin-top: 2px !important;
        }


        .week-tag.has-check {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .week-tag.has-check .tag-text {
          /*top:-8px;*/
          /*-10*/
          top: -11px;
          position: relative;
          z-index: 1;
        }

        .week-tag.has-check .check-mark {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -85%);
          font-size: 26px;
          color: rgba(166, 127, 94, 0.2);
          z-index: 2;
          pointer-events: none;
        }


        .month-text {
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-size: 18px;
          color: #101010;
          font-weight: 500;
          white-space: nowrap;
          /*margin-bottom:-10px;*/
          margin-top: -15px !important;
        }

        .date-item {
          flex-shrink: 0;
          min-width: 45px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          min-height: 70px;
          padding: 4px 0;
        }

        /* 今天圆圈样式 */
        .date-item.today .date-circle {
          width: 53px;
          height: 53px;
          border-radius: 50%;
          background-color: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-sizing: border-box;
          padding-top: -10px;
          position: relative;

        }

        /* 用伪元素单独画圆圈背景 */
        .date-item.today .date-circle::after {
          content: "";
          position: absolute;
          z-index: 0;
          /* 放在文字下层 */
          width: 53px;
          height: 53px;
          border-radius: 50%;
          background-color: rgba(166, 127, 94, 0.2);

          /* 核心：只移动这个伪元素 */
          top: 5px;
          /* 往下移5px（正值向下，负值向上） */
          left: 0;
        }

        /* 让文字显示在圆圈上层，不受定位影响 */
        .date-item.today .date-num,
        .date-item.today .date-lunar {
          position: relative;
          z-index: 1;
        }


        .date-item.today .date-num {
          font-size: 20px;
          color: #101010;
          font-weight: 400;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          margin-top: 1px !important;
        }

        .date-item.today .lunar-text {
          font-size: 15px;
          color: #101010;
          margin-top: 10px !important;
        }

        .today-text {
          font-size: 12px;
          color: rgba(166, 127, 94, 0.64);
          margin-top: 8px;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        /* 普通日期 */
        .date-item .date-num {
          font-size: 20px;
          color: #333;
          margin-top: 5px;
        }

        .date-item .lunar-text {
          font-size: 14px;
          color: #101010;
          margin-top: 8px;
        }

        /* 按钮区域 */
        .checkin-btn-area {
          text-align: center;
          width: fit-content;
          margin: 0 auto;
          align-self: end;

        }

        .checkin-btn {
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-size: 18px;
          /*padding: 6px 22px;*/
          width: 119px;
          height: 30px;
          /*border-radius: 20px;*/
          border-radius: 65px;
          border: 1px solid rgba(166, 127, 94, 0.05);
          /*background-color: rgba(166, 127, 94, 0.2) !important;*/
          background-color: rgba(166, 127, 94, 0.27) !important;
          cursor: pointer;
          transition: all 0.2s ease;
          color: #FFFFFF !important;
          margin-top: -4px !important;
          display: block;
        }

        /* 补签按钮 */
        .checkin-btn.makeup {
          color: #fff;
          background-color: #ff6b9d;
        }

        /* 已打卡按钮 */
        .checkin-btn.checked {
          color: #ccc;
          background-color: #f0eeeb;
          cursor: default;
        }

        /* 基础样式修正 */
        .checkin-text {
          font-size: 15px;
          font-weight: 350;
          color: #000;
        }

        .task-title {
          text-align: center;
          font-size: 18px;
          color: #333;
          margin: 20px 0;
        }

        .task-item {
          padding: 16px;
          border-radius: 8px;
          margin-bottom: 12px;
        }

        .task-item.diet {
          background-color: #fff3e0;
        }

        .task-item.tea {
          background-color: #e8f5e9;
        }

        .task-item.massage {
          background-color: #fffde7;
        }

        .task-item h4 {
          font-size: 15px;
          color: #333;
          margin-bottom: 6px;
        }

        .task-content {
          font-size: 14px;
          color: #555;
          display: flex;
          flex-wrap: wrap;
          gap: 16px;
        }

        /* 任务收起/展开样式 */
        .task-content.collapsed {
          max-height: 40px;
          overflow: hidden;
        }

        .task-toggle {
          text-align: right;
          font-size: 14px;
          color: #1565c0;
          margin-top: 8px;
          cursor: pointer;
        }

        /* 轮播容器：100%宽，高度适配你的示例图 */

        .health-carousel {
          width: calc(100% - 20px);
          margin: 10px;
          position: relative;
          overflow: hidden;
          border-radius: 12px;
        }

        .carousel-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .carousel-track {
          display: flex;
          transition: transform 0.5s ease;
          will-change: transform;
        }

        /* 单张幻灯片 */
        .carousel-slide {
          min-width: 100%;
          position: relative;

        }

        /* 关键：图片完整展示，不裁剪 */
        .carousel-slide img {
          width: 100%;
          height: auto;
          display: block;
          object-fit: contain;
        }

        /* 指示点 */
        .carousel-dots {
          position: absolute;
          bottom: 15px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 8px;
          z-index: 10;
          background: rgba(0, 0, 0, 0.2);
          /* 半透明背景确保可见 */
          padding: 4px 8px;
          border-radius: 12px;
        }

        .carousel-dots .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.6);
          cursor: pointer;
        }

        .carousel-dots .dot.active {
          background: #fff;
        }

        .task-toggle {
          text-align: right;
          color: #2e7d32;
          font-size: 12px;
          cursor: pointer;
          margin-top: 5px;
        }


        /* 外层容器 */
        .sleep-schedule-container {
          box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.17) !important;
          background-color: rgba(255, 251, 215, 0.1);
          padding: 15px;
          overflow: hidden;
          margin: 5px 5px;
          margin-bottom: 100px;

          height: 308px;
          /*320*/
          border-radius: 11px;
          padding: 15px 8px;
          /*width: 95%;
          max-width: 95%;*/
           width: 410px;  
          border: 1px solid rgba(166, 127, 94, 0.52);
          margin-top: 10px;
          position: relative;
          z-index: 1;
          margin-left: 10px;
        }

        /* 模块总标题 */
        .sleep-schedule-module-title {
          font-family: "ZCOOL XiaoWei", "站酷小薇LOGO体", sans-serif;
          font-size: 22px;
          color: #A67F5E;
          text-align: center;
          margin-bottom: 15px;
          margin-top: 10px;
          font-weight: 400;
        }

        /* 卡片通用样式 */
        .sleep-schedule-card {
          /*position:sticky;*/
          /*  bottom:150px;*/
          border-radius: 8px;
          padding: 16px 20px;
          margin-bottom: 15px;
          width: 375px;
          height: 83px;
          padding: 13px;
          margin-left: auto;
          margin-right: auto;
        }

        /* 特定背景颜色 */
        .sleep-schedule-card-green {
          background-color: rgba(170, 196, 135, 0.09);
          /* 浅绿背景 */
          border: 2px solid rgba(170, 196, 135, 0.33);
        }

        .sleep-schedule-card-beige {
          background-color: rgba(166, 127, 94, 0.06);
          /* 浅米背景 */
          border: 2px solid rgba(166, 127, 94, 0.19);
        }

        .sleep-schedule-card-yellow {
          background-color: rgba(247, 242, 199, 0.33);
          border: 2px solid rgba(222, 218, 181, 0.91);
        }

        /* 卡片头部 (标题 + 查看详情) */
        .sleep-schedule-card-header {
          margin-top: -12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 2px;
        }

        .sleep-schedule-card-title {
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-size: 16px;
          color: #101010;
          /* 深灰 */
          font-weight: 600;
        }

        .sleep-schedule-card-detail {
          font-size: 14px;
          color: rgba(95, 83, 73, 0.82);
          cursor: pointer;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        /* 卡片内容主体 */
        .sleep-schedule-card-body {

          /*display: flex;*/
          flex-direction: column;
          gap: 10px;
          /* 行间距 */
          display: flex;


        }

        /* 内容行 (文字 | 对勾) */
        .sleep-schedule-info-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          white-space: nowrap;
          width: 100%;
          margin-top: 7px;
        }

        /* 左侧文字 */
        .sleep-schedule-info-text {
          font-size: 16px;
          color: #101010;
          flex: 1;
          /* 占满剩余空间，保证对勾在最右 */
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        /* 对勾按钮 (核心修正：圆形样式) */
        .sleep-schedule-check {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          /* 圆形边框 */
          border: 1.5px solid #A8A8A8;
          /* 灰色边框 */
          color: transparent;
          /* 隐藏默认文字 */
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
        }

        /* 已打卡状态 */
        .sleep-schedule-check.checked {
          background-color: #6A994E;
          /* 绿色背景 */
          border-color: #6A994E;
          color: #FFFFFF;
          /* 白色对勾符号 */
        }
  .sleep-schedule-wrapper {
  width: 100%;
  position: relative;
  margin-bottom: 100px;
}

.sleep-schedule-scale {
  width: 430px;
  transform-origin: top left;
  will-change: transform;
  
}
        /* 弹窗样式 */
        .sleep-schedule-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 100;
        }

        .modal-content {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: #fff;
          border-radius: 20px 20px 0 0;
          padding: 20px;
          padding-bottom: 85px;
          max-height: 80vh;
          overflow-y: auto;
        }

        .modal-close {
          position: absolute;
          top: 15px;
          right: 20px;
          font-size: 24px;
          color: #999;
          cursor: pointer;
        }

        /* 积分提示 Toast */
        .sleep-schedule-toast {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: rgba(0, 0, 0, 0.7);
          color: #fff;
          padding: 10px 20px;
          border-radius: 8px;
          font-size: 14px;
          display: none;
          z-index: 200;
        }

        .sleep-schedule-card-body {
          display: flex;
          /* 启用弹性布局 */
          flex-direction: row;
          /* 强制水平方向 */
          flex-wrap: nowrap;
          /* 禁止换行，必须在一行 */
          gap: 18px;
          /* 控制两行之间的水平间距，可按需调整 */
          align-items: center;
          /* 垂直居中对齐 */
          padding: 8px 0 16px;
          /* 上下内边距，避免贴边 */
          justify-content: center;
        }

        /* 保持每个 info-row 内部文字和单选框在一行 */
        .sleep-schedule-info-row {
          display: flex;
          align-items: center;
          gap: 3px;
          white-space: nowrap;
          /* 防止文字折行 */
        }

        /* 只针对这一行，取消两端对齐，改为紧凑布局 */
        .sleep-schedule-info-row.food-1-row {
          justify-content: flex-start !important;
          /* 让元素从左开始排，不再分散两端 */
          gap: 8px !important;
          /* 文字和按钮的间距，数值越小越近 */
        }

        /* 取消这一行文字的 flex:1，不让它占满空间 */
        .sleep-schedule-info-row.food-1-row .sleep-schedule-info-text {
          flex: unset !important;
          /* 重置 flex 属性 */
          width: auto !important;
          /* 文字只占自己内容宽度 */
        }

        /* 详情页样式 */

        .detail-page {
          font-family: "ZCOOL XiaoWei", "Source Han Serif SC", serif;
          background-image: url('./detail-page/矩形 1@1x.png');
          background-size: cover;
          background-position: center;
        }

        .detail-header {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px 16px;
          /* 与主页面背景色一致 */
          position: sticky;
          /* 状态栏高度 */
          z-index: 99;
          position: relative;
          border-bottom: none;
          /* 确保没有分割线造成脱节 */
          margin-top: 0;
        }

        .header-left {
          display: flex;
          align-items: center;
          gap: 10px;
          position: absolute;
          /* 绝对定位 */
          left: 20px;
          /* 靠左 */
        }

        .back-btn {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          color: rgb(77, 77, 75);
          cursor: pointer;
        }

        .header-title {
          font-size: 20px;
          color: #8c715b;
          font-weight: 100;
          font-family: "ZCOOL XiaoWei", "Source Han Serif SC", serif;
          text-align: center;
          /* 文字居中 */
        }

        .re-diagnose-btn {
          padding: 3px 18px;
          background: #72a6801a;
          border: 1px solid #a67f5e80;
          border-radius: 10px;
          font-size: 13px;
          color: rgb(38, 47, 42);
          font-weight: 800;
          cursor: pointer;
          font-family: "Source Han Serif SC", serif;
          position: absolute;
          /* 绝对定位 */
          right: 10px;
          /* 靠右 */
          top: 10px;
          /* 靠上 */
        }

        .detail-container {
          padding-bottom: 20px;
        }

        /* 我的诊籍卡片 */
        .detail-record-section {
          margin: 15px;
          position: relative;
          padding: 15px;
          margin-bottom: 0;
          margin-left: 10px;
        }

        .detail-scroll-card {
          position: relative;
          border-radius: 12px;
          padding: 25px 20px;
          background: transparent;
          border: none;
          min-height: 450px;
          padding-right: 15px;
        }

        .detail-scroll-card::before {
          content: '';
          position: absolute;
          top: -19px;
          left: 3px;
          width: 100%;
          height: 100%;
          background-image: url('./detail-page/前矩形@1x.png');
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          z-index: 1;
          /* 轻微旋转营造层次感 */
          transform: rotate(3deg) translateY(3px);
          opacity: 0.95;
        }

        /* 上层背景（矩形2 - 主背景） */
        .detail-scroll-card::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
           background-image: url('./detail-page/前矩形@1x.png');
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          z-index: 2;
        }

        .detail-scroll-card>* {
          position: relative;
          z-index: 3;
        }


        /* 用户信息 */
        .detail-user-info {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 15px;
          margin-top: 10px;
          padding: 0 15px;
        }

        .detail-avatar {
          width: 66px;
          height: 66px;
          border-radius: 50%;
          background: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 1px 6px #00000066;
        }

        .detail-user-details {
          flex: 1;
        }

        .detail-user-row {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 2px;
          font-size: 14px;
          font-weight: 800;
          color: #574a40;
          font-family: "Source Han Serif SC", serif;
        }

        .birth-row {
          margin-top: 10px;
          padding-top: 10px;
        }



        .detail-edit-img {
          width: 30px;
          height: 30px;
          cursor: pointer;
          object-fit: contain;
          margin-top: 23px;
          margin-right: 16px;
        }

        .detail-constitution-tag {
          position: absolute;
          top: 50px;
          right: 20px;
          color: #9f1a08cc;
          font-size: 14px;
          font-family: "Source Han Serif SC", serif;
          font-weight: 700;
          background: transparent;
          border: none;
          padding: 0;
          margin-right: 20px;
        }

        .underline-text {
          border-bottom: 1px solid rgb(234, 210, 204);
          padding-bottom: -1px;
        }

        .edit-icon-wrapper {
          display: flex;
          justify-content: flex-end;
          /* 右对齐 */
          width: 100%;
        }

        /* 体质结果 */
        .detail-constitution-result {
          text-align: center;
          margin: 15px 10px;
          position: relative;
        }

        .detail-result-label {
          font-size: 14px;
          font-weight: 800;
          color: #574a40;
          margin-bottom: 5px;
          font-family: "Source Han Serif SC", serif;
        }

        .detail-result-type {
          font-size: 26px;
          color: #9f1a08cc;
          font-weight: 700;
          font-family: "Source Han Serif SC", serif;
        }

        /* 信息表格 */
        .detail-info-table {
          width: 100%;
          margin: 20px 10px;
          padding: 0 10px;
          margin-bottom: 10px;
        }

        .detail-info-row {
          display: flex;
          margin-bottom: 15px;
          align-items: center;
          justify-content: flex-start;
        }

        .detail-info-label {
          width: 85px;
          color: #574a40;
          font-size: 18px;
          font-weight: 800;
          flex-shrink: 0;
          line-height: 1.6;
          font-family: "Source Han Serif SC", serif;
          text-align: left;
          padding-right: 10px;
          padding-left: 20px;
          white-space: nowrap;
        }

        .detail-info-content {
          flex: 1;
          color: #574a40;
          font-size: 12px;
          line-height: 1.6;
          font-family: "Source Han Serif SC", serif;
          text-align: center;
          margin-right: 45px;
          font-weight: 800;
        }

        /* 中医调理 */
        .detail-treatment-section {
          margin: 25px 15px;
          padding: 0;
          background: transparent;
          border: none;
          border-radius: 0;
          text-align: left;
          margin-top: 10px;
          margin-left: 3px;
          margin-bottom: 10px;
        }

        .detail-treatment-label {
          font-size: 14px;
          color: #574a40;
          font-weight: 800;
          margin-bottom: -1px;
          font-family: "Source Han Serif SC", serif;
        }

        .detail-treatment-title {
          color: #9f1a08cc;
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 8px;
          font-family: "Source Han Serif SC", serif;
          text-align: center;
          padding-left: 20px;
        }

        .detail-treatment-desc {
          color: #8c715b;
          font-size: 12px;
          font-weight: 600;
          font-family: "Source Han Serif SC", serif;
          text-align: center;
          padding-left: 24px;
        }

        /* 生活建议 */
        .detail-advice-section {
          margin: 25px 15px;
          padding: 0;
          background: transparent;
          border: none;
          margin-left: 3px;
          margin-top: 10px;
          margin-bottom: 0;
        }

        .detail-advice-title {
          font-size: 14px;
          color: #574a40;
          font-weight: 800;
          font-family: "Source Han Serif SC", serif;
        }

        .detail-advice-content {
          font-size: 12px;
          color: #8c715b;
          line-height: 1.8;
          border-radius: 8px;
          font-family: "Source Han Serif SC", serif;
          text-align: center;
          padding-top: 2px;
          padding-left: 40px;
          font-weight: 600;
        }

        .detail-unlock-tip {
          text-align: center;
          color: #538dffb2;
          font-size: 12px;
          margin-top: 2px;
          cursor: pointer;
          font-family: "Source Han Serif SC", serif;
        }

        /* ========== 睡眠报告样式========== */

        .sleep-report-section {
          background: transparent;
          padding: 15px 20px;
          margin: 15px;
          border-radius: 12px;
          margin-top: -8px;
          padding-top: 0;
          margin-bottom: 0;
        }

        /* 头部区域 */
        .sleep-report-header {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 10px;
        }

        .sleep-report-left {
          display: flex;
          align-items: center;
          gap: 30px;
          margin-right: 15px;
        }

        /* 左侧床图标 - 你自己替换图片 */
        .sleep-icon-img {
          width: 48px;
          height: 48px;
          object-fit: contain;
        }

        /* 标题和日期 */
        .sleep-report-title {
          display: flex;
          align-items: baseline;
          gap: 8px;
          padding-top: 5px;
        }

        .title-text {
          font-size: 24px;
          color: #574a40;
          font-weight: 700;
          font-family: "Source Han Serif SC", serif;
          letter-spacing: 1px;
        }

        .date-text {
          font-size: 24px;
          color: #538dffa6;
          /* 蓝色日期 */
          font-weight: 400;
          font-family: "Source Han Serif SC", serif;
          letter-spacing: 1px;
        }

        /* 右侧编辑图标 - 你自己替换图片 */
        .edit-icon-img {
          width: 24px;
          height: 24px;
          object-fit: contain;
          cursor: pointer;
        }

        /* 分隔线 */
        .header-divider {
          height: 1px;
          background: #8c715bd9;
          margin: -10px 10px 0 10px;
        }

        /* 两个圆环容器 */
        .sleep-score-container {
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          gap: 0;
          padding: 0 10px;
        }

        .score-item {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        /* 上方标签 */
        .score-label-top {
          font-size: 16px;
          color: #574a40;
          font-family: "Source Han Serif SC", serif;
          text-align: center;
          padding-top: 7px;
          font-weight: 780;
        }

        /* 圆环容器 */
        .score-circle {
          position: relative;
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* 圆环背景图片 - 你自己替换 */
        .circle-bg {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: contain;
          z-index: 1;
        }

        /* 圆环内的数值 */
        .score-value {
          position: relative;
          z-index: 2;
          font-size: 28px;
          color: #101010;
          font-weight: 600;
          font-family: none;
        }

        /* 下方标签 */
        .score-label-bottom {
          font-size: 18px;
          color: #9f1a08cc;
          font-weight: 600;
          font-family: "Source Han Serif SC", serif;
        }

        .score-label-bottom.red {
          color: #C45C48;
        }

        /* ========== 睡眠时长区域 ========== */

        .sleep-duration-section {
          margin-top: -1px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 15px;
        }

        /* 时间范围 1:00 - - 8:36 */
        .sleep-time-range {
          font-size: 36px;
          color: #574a40;
          font-weight: 800;
          font-family: "Source Han Serif SC", serif;
          letter-spacing: 2px;
        }

        /* 睡眠时长卡片 */
        .duration-card {
          width: 80%;
          background: #72a6801a;
          border-radius: 10px;
          padding: 13px 25px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid #a67f5e80;
          box-shadow: 0 2px 4px #a67f5e80;
        }

        .duration-label {
          font-size: 16px;
          color: #574a40;
          font-weight: 600;
          font-family: "Source Han Serif SC", serif;
        }

        .duration-value {
          font-size: 16px;
          color: #574a40;
          font-weight: 600;
          font-family: "Source Han Serif SC", serif;
        }

        /* ========== 四个睡眠阶段圆环（纯净圆环版）========== */

        .sleep-stages-row {
          display: flex;
          justify-content: center;
          margin-top: 10px;
          padding: 0 10px;
          gap: 25px;
        }

        .stage-circle-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-shrink: 0;
        }

        /* 圆环容器 */
        .clean-ring {
          position: relative;
          width: 70px;
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* SVG */
        .clean-ring-svg {
          position: absolute;
          width: 82%;
          height: 100%;
          transform: rotate(0deg);
        }

        /* 底层灰色轨道 */
        .track-bg {
          stroke: transparent;
          stroke-width: 10;
        }

        /* 上层绿色填充 - 同半径，细线条，不覆盖边框 */
        .track-fill {
          stroke: #72a680;
          stroke-width: 6;
          stroke-linecap: butt;
          transition: stroke-dashoffset 0.5s ease;
        }

        /* 圆环内的百分比数值 */
        .clean-ring-text {
          position: relative;
          z-index: 2;
          font-size: 16px;
          color: #101010;
          font-weight: 600;
          font-family: serif;
        }

        /* 下方文字标签 */
        .stage-name {
          font-size: 12px;
          color: #574a40;
          font-family: "Source Han Serif SC", serif;
          text-align: center;
          white-space: nowrap;
        }

        /* 添加内外边框 */
        .clean-ring::before,
        .clean-ring::after {
          content: '';
          position: absolute;
          border-radius: 50%;
          border: 1px solid rgb(209, 208, 206);
          pointer-events: none;
        }

        .clean-ring::before {
          width: 54px;
          height: 54px;
        }

        .clean-ring::after {
          width: 40px;
          height: 40px;
        }

        /* 睡眠数据网格样式 */
        .sleep-data-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          /* 两列等宽 */
          gap: 12px 0px;
          /* 卡片间距 */
          margin: 15px;
          padding: 0 5px;
          margin-left: 31px;
        }

        /* 数据卡片基础样式 */
        .data-card {
          background: #fffbd71a;
          border-radius: 10px;
          padding: 14px 12px;
          box-shadow: 0 2px 8px #a67f5e80;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 49px;
          width: 173px;
        }

        /* 数据行 */
        .data-row {
          display: flex;
          align-items: baseline;
          flex-wrap: wrap;
        }

        /* 标签文字 */
        .data-label {
          font-size: 16px;
          color: #574a40;
          font-family: "Source Han Serif SC", serif;
          font-weight: 600;
        }

        /* 子标签（如"脉象"） */
        .sub-label {
          font-size: 12px;
          color: #9f1a08cc;
          font-weight: 600;
          padding-left: 9px;
        }

        /* 数值 */
        .data-value {
          font-size: 16px;
          color: #574a40;
          font-family: "Source Han Serif SC", serif;
          font-weight: 600;
        }

        /* 编辑图标 - 右下角 */
        .edit-icon {
          position: absolute;
          right: 10px;
          bottom: 8px;
          width: 19px;
          height: 19px;
        }

        .edit-icon img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        /* 状态标签 - 右上角 */
        .status-badge {
          position: absolute;
          top: -6px;
          right: -11px;
          width: 41px;
          height: 26px;
          padding: 0;
          border-radius: 50%;
          font-size: 16px;
          color: #72a680e6;
          font-family: "Source Han Serif SC", serif;
          font-weight: 800;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          flex-shrink: 0;
          box-shadow: 0 1px 4px #a67f5e80;
        }


        /* 心率图标 */
        .heart-icon {
          position: absolute;
          right: 10px;
          bottom: 8px;
          width: 22px;
          height: 22px;
        }

        .heart-icon img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        /* 相机图标 */
        .camera-icon {
          position: absolute;
          right: 10px;
          bottom: 8px;
          width: 19px;
          height: 19px;
        }

        .camera-icon img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        /* 对比昨日和建议区块 */
        .comparison-section,
        .advice-section {
          margin: 20px 15px;
        }

        /* 标题样式 */
        .section-title {
          font-size: 18px;
          font-family: "Source Han Serif SC", serif;
          font-weight: 700;
        }

        .section-title.red {
          color: #9f1a08cc;
        }

        .section-title.green {
          font-size: 16px;
          color: #72a680e6;
          font-weight: 700;
        }

        /* 对比昨日盒子 - 浅红色背景 */
        .comparison-box {
          background: #a67f5e0d;
          border-radius: 12px;
          padding: 10px 26px;
          width: 400px;
          height: 64px;
        }

        .comparison-text {
          font-size: 14px;
          color: #9f1a08cc;
          font-family: "Source Han Serif SC", serif;
          line-height: 1.5;
          margin: 0;
          font-weight: 600;
        }

        /* 建议盒子 - 浅绿色背景 */
        .advice-box {
          background: #72a6801a;
          border-radius: 12px;
          padding: 10px 26px;
          width: 400px;
          height: 64px;
        }

        .advice-text {
          font-size: 14px;
          color: #72a680;
          font-family: "Source Han Serif SC", serif;
          line-height: 1.5;
          margin: 0;
          font-weight: 600;
        }

        .page-background {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          pointer-events: none;
        }

        .page-background img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        /* 页面内容容器 */
        .page-content {
          position: relative;
          z-index: 1;
          background: transparent;
        }

        /* 渐变盒子容器 */
        .gradient-box {
          position: relative;
          border-radius: 16px;
          overflow: hidden;
          min-height: 80px;
        }

        .gradient-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 0;
        }

        .comparison-content,
        .advice-content {
          position: relative;
          z-index: 1;
          padding: 16px 18px;
        }


        /* 带背景的文字盒子 - 复用原有 detail-info-content */
        .detail-info-content.bg-box {
          background-image: url('./detail-page/渐变椭圆1.png');
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          padding: 12px 16px;
          border-radius: 12px;
          min-height: 60px;
        }

        /* 症状部分用不同背景图 */
        .detail-info-content.bg-box.symptom {
          background-image: url('./detail-page/渐变椭圆2.png');
        }

        .detail-info-content.with-bg {
          background-image: url('./detail-page/渐变椭圆1.png');
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          padding: 10px 15px;
        }

        /* 调整内部文字对齐 */
        .detail-info-content.bg-box p {
          text-align: center;
          margin: 0 0 4px 0;
          line-height: 1.8;
        }

        .detail-info-content.bg-box p:last-child {
          margin-bottom: 0;
        }

        /*膳食疗补详情页*/

        .page.sleep-report-detail-page1 {
          background-image: url('page-bu/膳食背景.png');
          background-size: cover;
          padding: 15px !important;
          
          line-height: 1.8;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-weight: 500;
        }

        .page.sleep-report-detail-page2 {
          background-image: url('page-bu/茶饮背景.png');
            background-size: cover;
            padding: 15px;
            line-height: 1.8;
             font-family: "Noto Serif SC", "Source Han Serif SC", serif;
             font-weight: 500;
        }
       
        .header11 {
          display: flex;
          align-items: center;
          /* 垂直居中 */
          justify-content: space-between;
          /* 左右分布，标题自动居中 */
          padding: 12px 16px;
          /* 上下左右内边距 */
          width: 100%;
          box-sizing: border-box;
        }

        /* 返回按钮（左侧） */
        .back-btn11 {
          width: 28px;
          height: 28px;
          cursor: pointer;
        }

        .back-btn11 img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          /* 保持图片比例 */
        }

        /* 页面标题（居中） */
        .page-title11 {
          font-size: 23px;
          color: #8C715B;
          font-weight: 650;
          text-align: center;
        }

        /* 右侧占位元素（和返回按钮等宽，保证标题居中） */
        .placeholder11 {
          width: 28px;
          height: 28px;
        }

        /* 章节标题（带竖线） */
        .section-title11 {
          font-size: 18px;
          font-weight: 600;
          margin: 20px 0 10px;
          padding-left: 10px;
          border-left: 5px solid #8C715B;
          color: #795D47;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        /* 章节内容 */
        .section-content11 {
          padding: 0 15px;
          font-size: 14px;
          color: #8C715B;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        /* 原料列表 */
        .raw-item11 {
          margin-bottom: 8px;
          font-size: 14px;
          color: #8C715B;
        }

        .raw-desc11 {
          font-size: 14px;
          color: rgba(159, 71, 8, 0.6);
          padding-left: 10px;

        }

        /* 可选配料 */
        .optional-item11 {
          margin-bottom: 8px;
        }

        .optional-note11 {
          font-size: 15px;
          color: #b08968;
        }

        /* 步骤列表 */
        .step-item11 {
          margin-bottom: 10px;
        }

        /* 功效模块 */
        .efficacy-item11 {
          margin-bottom: 8px;
          font-weight: 500;
          font-size: 14px;

          color: #8C715B;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        .efficacy-subtitle11 {
          font-size: 14px;
          font-weight: 500;
          color: rgba(159, 71, 8, 0.6);
          margin-bottom: 5px;
        }

        /* 剂量列表 */
        .dosage-item11 {
          margin-bottom: 8px;
          font-weight: 500;
          font-size: 14px;
          color: #8C715B;
        }


        /* 出处文本 */
        .source-item11 {
          margin-bottom: 8px;
          font-weight: 500;
          font-size: 12px;
          color: #8C715B;
        }

        .divider111 {
          border-bottom: 1px solid rgba(166, 127, 94, 0.13);
          width: 100%;
          text-align: center;
          margin: 16px auto;
        }

        .text-underline11 {
          text-decoration: underline;
          text-decoration-color: #8C715B;
        }

        /*茶饮调理详情*/
        .tea-card-header {
          display: flex;
          gap: 40px;
          margin-bottom: 20px;
          align-items: flex-start;
        }

        .tea-card-img {
          width: 155px;
          height: 147px;
          object-fit: cover;
          border-radius: 8px;

        }

        .tea-card-info {
          flex: 1;
        }

        .tea-card-name {
          color: #795D47;
          font-size: 18px;

          font-weight: 600;
          margin-bottom: 10px;

        }

        .tea-card-desc {
          font-size: 14px;
          color: #795D47;
          margin-bottom: 15px;
        }

        .tea-card-tag {
          font-size: 18px;
          color: rgba(159, 26, 8, 0.6);
          margin-bottom: 15px;
          font-weight: 500;
          margin-left: -25px;
          transform: translateY(8px);
        }

        .yijian {
          margin-top: -3px;
        }

        .tea-buy-btn {
          display: block;
          width: 169px;
          height: 41px;
          line-height: 45px;
          border-radius: 18px;
          text-align: center;
          background-color: rgba(114, 166, 128, 0.12);
          color: #684C35;
          border: 1px solid rgba(166, 127, 94, 0.52);
          box-shadow: 0px 2px 6px rgba(255, 255, 255, 1);
          text-decoration: none;
          font-size: 20px;
          transform: translateY(15px);
        }

        /* 模块标题样式 */
        .tea-section-title {
          font-size: 18px;
          font-weight: 600;
          margin: 20px 0 10px;
          padding-left: 10px;
          border-left: 5px solid #8C715B;
          color: #795D47;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        /* 列表内容样式 */
        .tea-section-content {
          padding: 0 15px;
          font-size: 14px;
          color: #8C715B;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        .tea-section-content p {
          margin: 8px 0;
        }

        .tea-section-content ol {
          padding-left: 20px;
        }

       
        /* 验证码输入组 */
        .code-group {
          display: flex;
          gap: 10px;
        }

        .code-group input {
          flex: 1;
        }

        .send-code-btn {
          height: 50px;
          padding: 0 16px;
          border: none;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.95);
          color: #667eea;
          font-size: 14px;
          cursor: pointer;
          white-space: nowrap;
          flex-shrink: 0;
        }

        .send-code-btn:disabled {
          color: #999;
          cursor: not-allowed;
        }

        .toast {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0.8);
          padding: 16px 32px;
          border-radius: 12px;
          background: rgba(0, 0, 0, 0.75);
          color: #fff;
          font-size: 14px;
          z-index: 9999;
          opacity: 0;
          transition: all 0.3s;
          pointer-events: none;
        }

        .toast.show {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
        }

        .loading-mask {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: none;
          justify-content: center;
          align-items: center;
          z-index: 9998;
        }

        .loading-mask.show {
          display: flex;
        }

        .loading-spinner {
          width: 40px;
          height: 40px;
          border: 3px solid rgba(255, 255, 255, 0.3);
          border-top-color: #fff;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }

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

        /* ========== 微信登录新增样式 ========== */
        .other-login-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 320px;
          height: 44px;
          margin-top: 20px;
          border: none;
          background: transparent;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s;
        }

        .other-login-btn:hover {
          opacity: 0.8;
        }

        .other-login-btn .arrow {
          margin-left: 6px;
          transition: transform 0.3s;
        }

        .other-login-btn.expanded .arrow {
          transform: rotate(180deg);
        }

        .wechat-login-container {
          width: 100%;
          max-width: 320px;
          margin-top: 12px;
          overflow: hidden;
          max-height: 0;
          opacity: 0;
          transition: all 0.3s ease;
        }

        .wechat-login-container.show {
          max-height: 100px;
          opacity: 1;
        }

        .wechat-login-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 50px;
          border: none;
          border-radius: 12px;
          background: #07C160;
          color: #fff;
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
        }

        .wechat-login-btn:hover {
          background: #06AD56;
        }

        .wechat-login-btn:active {
          transform: scale(0.98);
        }

        .wechat-login-btn .wechat-icon {
          width: 24px;
          height: 24px;
          margin-right: 10px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088-.181-.013-.362-.027-.547-.033h-.06zm-2.353 2.461c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z'/%3E%3C/svg%3E");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
    
        .loading {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .loading.show {
      display: flex;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    /* 分隔线 */
    .divider {
      display: flex;
      align-items: center;
      margin: 25px 0;
      opacity: 0.6;
    }

    .divider-line {
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.5);
    }

    .divider-text {
      padding: 0 15px;
      font-size: 13px;
    }

    /*体制测评*/
    /* 中医睡眠体质测评 - 样式模块 */
/* 已有类名保持不变，新增类名使用 tcm- 前缀 */

/* ==================== 已有样式（保持兼容） ==================== */




/* ==================== 新增样式（tcm- 前缀） ==================== */
 .assessment-page {
          background: #fff;
          min-height: 1000px;
          padding-bottom: 50px;
           display: flex;
  flex-direction: column;
        }
.page.assessment-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 50px; /* 底部留白，防止按钮被遮挡 */
}

/* 问题卡片 */
.tcm-question-card {
   /*background: #f8f9fa;*/
      
          border-radius: 16px;
          padding: 30px 20px;
          margin-bottom: 20px;
}


@keyframes tcm-slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tcm-question-number {
   color: #574A40;
   font-size: 16px;
   margin-bottom: 15px;
   font-weight: 400;
  font-family: "Noto Serif SC", "Source Han Serif SC", serif;
  text-align:center;
  position:relative;
  top:-20px;
}

.tcm-question-text {
  margin-top:30px;
   font-size: 20px !important;
    color: #574A40;
   line-height: 1.6;
   margin-bottom: 40px !important;
   font-family: "Noto Serif SC", "Source Han Serif SC", serif;

}

.tcm-option-list {
  margin-top:10px;
  display: flex;
          flex-direction: column;
          gap: 16px;
}

.tcm-option-item {
  font-family: "Noto Serif SC", "Source Han Serif SC", serif;
   padding: 8px 10px !important;
          background-color:rgba(114,166,128,0.12);
          border: 1px solid rgba(166,127,94,0.52);
          box-shadow:0 2px 6px rgba(255,255,255,1);
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 20px !important;
          color:#574A40;
          line-height:1.6;
}

.tcm-option-item:hover {
  border-color: #2e7d32;
          background: #e8f5e9;
}

.tcm-option-item.selected {
 border-color: #2e7d32;
          background: #e8f5e9;
}

/* 分组标题 */
.tcm-section-header {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #E8F1FB, #EDE9FE);
  border-radius: 8px;
}

.tcm-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #4A90D9;
}

/* 图片上传区域 */
.tcm-image-upload-section {
  padding: 20px;
  background: white;
  margin: 0 20px 20px 20px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding-bottom: 20px;
 
}

.tcm-image-upload-section .tcm-section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1F2937;
}

.tcm-section-desc {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 20px;
}

.tcm-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.tcm-upload-box {
  position: relative;
  aspect-ratio: 1;
  border: 2px dashed #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.tcm-upload-box:hover {
  border-color: #4A90D9;
  background: #E8F1FB;
}

.tcm-upload-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}

.tcm-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcm-upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.tcm-upload-text {
  font-size: 14px;
  color: #6B7280;
}

.tcm-submit-btn {
  width: 100%;
  height: 50px;
  /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
  background-color:#2e7d32;
  border:1px solid rgba(166,127,94,0.52);
  box-shadow:0 2px 6px rgba(255,255,255,1);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  font-family: "Noto Serif SC", "Source Han Serif SC", serif;
}

.tcm-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.tcm-submit-btn:disabled {
  background: #E5E7EB;
  cursor: not-allowed;
  transform: none;
}

/* 测评完成卡片 */
.tcm-assessment-result {
   text-align: center;
          padding: 40px 20px;
}

.tcm-constitution-type {
  
        font-size: 32px;
          color: #2e7d32;
          margin-bottom: 15px;
          font-weight: 600;
}

.tcm-syndrome-type {
  font-size: 32px;
          color: #2e7d32;
          margin-bottom: 15px;
          font-weight: 600;
          font-size: 16px;
          color: #666;
          line-height: 1.8;
          margin-bottom: 30px;
}

/* Loading */
.tcm-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.tcm-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: #4A90D9;
  border-radius: 50%;
  animation: tcm-spin 1s linear infinite;
}

@keyframes tcm-spin {
  to {
    transform: rotate(360deg);
  }
}

.tcm-loading-text {
  margin-top: 16px;
  font-size: 14px;
  color: #6B7280;
}

/* Toast */
.tcm-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 3000;
  transition: transform 0.3s ease;
}

.tcm-toast.show {
  transform: translateX(-50%) translateY(0);
}

/* 响应式 */
@media (max-width: 640px) {
  .tcm-question-text {
    font-size: 16px;
  }
  
  .tcm-upload-grid {
    grid-template-columns: 1fr;
  }
}
        
/* 诊断页面卡片样式 - 删除伪元素 */
        .diagnosis-card::before,
        .diagnosis-card::after {
          content: none !important;
          display: none !important;
        }
      
        /* 诊断页面卡片背景图拉宽填满 */
        .record-card.home-record-card.diagnosis-card {
          background-size: 100% 100% !important;
          background-position: center !important;
          width: 100vw !important;
          margin-left: calc(-50vw + 50%) !important;
        }

        /* 诊断页面卡片的record-item右边距 */
        .record-card.home-record-card.diagnosis-card .record-item {
          margin-right: 2px;
        }
/*意见反馈*/
        .page.yijianfankui{
          /*background-color: rgba(252,249,242,0.3);*/
          background: #FCF9F2; 
           z-index: 100000 !important; 
          background-size: cover;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-weight: 500;
        }
         .submit-btn {
            
            width:180px;
            height: 43px;
            margin-top: 24px;
            background-color:#EAF1EC;
            border: 1px solid rgba(166,127,94,0.52);
            border-radius: 57px;
            color: #574A40;
            font-family: "Noto Serif SC", "Source Han Serif SC", serif;
            font-size: 20px;
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s;
            display:flex;
            opacity:1;
            align-items:center;
            justify-content:center;
            position:fixed;
            left:50%;
            bottom:100px;
            transform:translateX(-50%);
        }
        
        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
         #toast111 {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 12px 24px;
            border-radius: 20px;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1000;
        }
        
        #toast111.show {
            opacity: 1;
        }
        .page-title12 {
             font-size: 16px;
             color: #795D47;
             font-weight: 650;
             text-align: center;
         }
          /* 反馈内容区域 */
         .feedback-content {
             padding: 20px 16px;
         }
         
         /* 输入区域 */
         .input-section {
             margin-bottom: 24px;
             background-color: #EAF1EC;
             border-radius: 8px;
             border:1px solid rgba(166,127,94,0.52);
              outline:none;
             
         }
         
         .textarea-wrapper {
             background-color: #E8F0EC;
             border-radius: 12px;
             padding: 16px;
             position: relative;
         }
         
         .feedback-textarea {
             width: 100%;
             min-height: 180px;
             border: none;
             outline: none;
             background: transparent;
             font-family: "Noto Serif SC", "Source Han Serif SC", serif;
             font-size: 15px;
             color: #333;
             resize: none;
             line-height: 1.6;
         }
         
         .feedback-textarea::placeholder {
             color: #574A40;
             font-size:14px;
         }
         
         .char-count {
             text-align: right;
             font-size: 14px;
             color: rgba(140,113,91,0.98);
             margin-top: 8px;
             font-weight:400;
             font-family: -apple-system, BlinkMacSystemFont, sans-serif;
         }
         
         /* 联系方式区域 */
         .contact-section {
             margin-top: 20px;
             
         }
         
         .contact-label {
             display: block;
             color: #574A40;
             font-size:12px;
             
             margin-bottom: 12px;
             font-family: "Noto Serif SC", "Source Han Serif SC", serif;
         }
         
         .contact-input {
             width: 100%;
             height: 48px;
             
             
             outline: none;
             border-radius: 12px;
             padding: 0 16px;
             font-family: "Noto Serif SC", "Source Han Serif SC", serif;
             font-size: 15px;
             color: #333;
             background-color: #EAF1EC;
             border-radius: 8px;
             border:1px solid rgba(166,127,94,0.52);
             
         }
         
         .contact-input::placeholder {
             color: #574A40;
             font-size:12px;
         }
          /*问卷结果卷轴*/
          .tcm-scroll-container {
  position: relative;
 
  margin: 20px;
  top:40%;
   font-family: "Noto Serif SC", "Source Han Serif SC", serif !important;
}

.tcm-scroll {


          background-image: url('./page1-photos/卷轴新版.png');
          background-size: 100% 120%;
          background-position: center;
          background-repeat: no-repeat;
          position: relative;
          aspect-ratio: 3.5 / 1;
          min-height: 140px;
          /*margin: 10px;*/
         /*margin: -69px -17px;    /* 原 -16% -4% 转换 */
  /*padding: 34px 26px;*/
         /*margin: -16% -4%;*/
        
          padding-bottom: 10px;
          padding: 8% 6%;
          min-height: auto;
          aspect-ratio: 16/8;
          /* 保持卷轴比例，可根据实际图片调整 */
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border: none;
          background-color: transparent;
          box-sizing: border-box;
          height: 100%;
        
  /*position: relative;
  background-position: center center;
  width:100%;
  height:auto;
   background-image: url('./page1-photos/卷轴新版.png');
          background-size: 100% 120%;
          background-position: center;
          background-repeat: no-repeat;
          position: relative;
         
          
         
          
         
        
        
          /* 保持卷轴比例，可根据实际图片调整 */
         /* box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border: none;
          background-color: transparent;
          box-sizing: border-box;
          height: 100%;
/* 修复：删除重复/冲突的aspect-ratio和min-height，统一尺寸设置 */
      /* aspect-ratio: 3.5 / 1; */
      /* min-height: 140px; */
      /* padding-bottom: 10px; */
      /* min-height: auto; */
      /* aspect-ratio: 16/8; */
       /* 修复：新增合理的比例和最小高度，保证背景图显示 */
      /*aspect-ratio: 16/9;
      min-height: 280px;
      /* 修复：新增内边距，让内容不贴卷轴边缘 */
      /*padding: 30px 20px;
      */
     
 
}

/* 卷轴内容 */
.tcm-scroll-content {
  position: relative;
  z-index: 2;
  text-align: center;
    width: 80%;
}

/* 我的诊籍标题 */
.tcm-diagnosis-title {
  font-size: 20px;
  font-weight: 650 !important;
  color: #4A4A4A;
  margin-bottom: 30px;
  letter-spacing: 13px;
   font-family: "Noto Serif SC", "Source Han Serif SC", serif !important;
}

/* 体质和证型信息 */
.tcm-diagnosis-item {
  margin-bottom: 20px;
  line-height: 1.8;
    font-family: "Noto Serif SC", "Source Han Serif SC", serif !important;
}

.tcm-diagnosis-label {
  font-size: 16px;
  color: #666666;
  font-weight: 500;
   font-family: "Noto Serif SC", "Source Han Serif SC", serif !important;
}

.tcm-diagnosis-value {
  font-size: 18px;
  color: #8B3A3A;
  font-weight: 650;
  font-family: "Noto Serif SC", "Source Han Serif SC", serif !important;

}

/* 引导按钮 */
.tcm-guide-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 20px auto 40px;
  padding: 14px 24px;
  background: white;
  border: 1.5px solid #E0E0E0;
  border-radius: 25px;
  font-size: 14px;
  color: #4A90D9;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.tcm-guide-btn:hover {
  border-color: #4A90D9;
  box-shadow: 0 2px 8px rgba(74, 144, 217, 0.2);
}

           
       
        

       
         .page.yijianfankui {
          background-color: rgba(252, 249, 242, 0.3);
          z-index: 100;
        }

        .page-title12 {
          font-size: 16px;
          color: #795D47;
          font-weight: 650;
          text-align: center;
        }

        /* 反馈内容区域 */
        .feedback-content {
          padding: 20px 16px;
        }

        /* 输入区域 */
        .input-section {
          margin-bottom: 24px;
          background-color: #EAF1EC;
          border-radius: 8px;
          border: 1px solid rgba(166, 127, 94, 0.52);
          outline: none;

        }

        .textarea-wrapper {
          background-color: #E8F0EC;
          border-radius: 12px;
          padding: 16px;
          position: relative;
        }

        .feedback-textarea {
          width: 100%;
          min-height: 180px;
          border: none;
          outline: none;
          background: transparent;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-size: 15px;
          color: #333;
          resize: none;
          line-height: 1.6;
        }

        .feedback-textarea::placeholder {
          color: #574A40;
          font-size: 14px;
        }

        .char-count {
          text-align: right;
          font-size: 14px;
          color: rgba(140, 113, 91, 0.98);
          margin-top: 8px;
          font-weight: 400;
          font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        }

        /* 联系方式区域 */
        .contact-section {
          margin-top: 20px;

        }

        .contact-label {
          display: block;
          color: #574A40;
          font-size: 12px;

          margin-bottom: 12px;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
        }

        .contact-input {
          width: 100%;
          height: 48px;


          outline: none;
          border-radius: 12px;
          padding: 0 16px;
          font-family: "Noto Serif SC", "Source Han Serif SC", serif;
          font-size: 15px;
          color: #333;
          background-color: #EAF1EC;
          border-radius: 8px;
          border: 1px solid rgba(166, 127, 94, 0.52);

        }

        .contact-input::placeholder {
          color: #574A40;
          font-size: 12px;
        }

        /* ==================== 陪伴页面响应式布局 ==================== */
        
        /* 小屏幕手机适配 (375px - 414px) */
        @media screen and (max-width: 414px) {
          .companion-page {
            width: 100% !important;
            height: 100vh !important;
            max-width: 100% !important;
            background-size: cover !important;
            background-position: center center !important;
          }

          .content-area {
            padding: 100px 16px 50px !important;
            gap: 0px;
            background: transparent !important;
          }

          .companion-page .mode-btn {
            width: 95% !important;
            height: 160px !important;
            padding: 0 30px !important;
            margin-bottom: 15px !important;
          }

          .mode-btn .icon1 {
            width: 120px !important;
            height: 120px !important;
          }

          .mode-btn .icon2 {
            width: 150px !important;
            height: 150px !important;
          }

          .mode-btn .icon3 {
            width: 130px !important;
            height: 130px !important;
          }

          .mode-title-1,
          .mode-title-2,
          .mode-title-3 {
            font-size: 24px !important;
          }

          .music-icon {
            width: 32px !important;
            top: 60px !important;
            right: 16px !important;
          }
        }

        /* 中等屏幕手机适配 (415px - 430px) */
        @media screen and (min-width: 415px) and (max-width: 430px) {
          .companion-page {
            width: 100% !important;
            height: 100vh !important;
            max-width: 430px !important;
            margin: 0 auto !important;
            background-size: cover !important;
            background-position: center center !important;
          }

          .content-area {
            padding: 120px 20px 60px !important;
            background: transparent !important;
          }

          .companion-page .mode-btn {
            width: 95% !important;
            height: 175px !important;
            padding: 0 35px !important;
            margin-bottom: 18px !important;
          }

          .mode-btn .icon1 {
            width: 135px !important;
            height: 135px !important;
          }

          .mode-btn .icon2 {
            width: 170px !important;
            height: 170px !important;
          }

          .mode-btn .icon3 {
            width: 145px !important;
            height: 145px !important;
          }

          .mode-title-1,
          .mode-title-2,
          .mode-title-3 {
            font-size: 26px !important;
          }

          .music-icon {
            width: 35px !important;
            top: 65px !important;
            right: 20px !important;
          }
        }

        /* 大屏幕手机适配 (431px - 767px) */
        @media screen and (min-width: 431px) and (max-width: 767px) {
          .companion-page {
            width: 100% !important;
            height: 100vh !important;
            max-width: 100% !important;
            background-size: cover !important;
            background-position: center center !important;
          }

          .content-area {
            padding: 130px 24px 70px !important;
            background: transparent !important;
          }

          .companion-page .mode-btn {
            width: 90% !important;
            max-width: 500px !important;
            height: 180px !important;
            margin-bottom: 20px !important;
          }

          .mode-btn .icon1 {
            width: 140px !important;
            height: 140px !important;
          }

          .mode-btn .icon2 {
            width: 180px !important;
            height: 180px !important;
          }

          .mode-btn .icon3 {
            width: 155px !important;
            height: 155px !important;
          }

          .music-icon {
            width: 36px !important;
            top: 68px !important;
            right: 24px !important;
          }
        }

        /* 平板设备适配 (768px - 1024px) */
        @media screen and (min-width: 768px) and (max-width: 1024px) {
          .companion-page {
            width: 100% !important;
            height: 100vh !important;
            max-width: 768px !important;
            margin: 0 auto !important;
            background-size: cover !important;
            background-position: center center !important;
          }

          .content-area {
            padding: 150px 40px 80px !important;
            background: transparent !important;
          }

          .companion-page .mode-btn {
            width: 80% !important;
            max-width: 600px !important;
            height: 200px !important;
            padding: 0 50px !important;
            margin-bottom: 25px !important;
          }

          .mode-btn .icon1 {
            width: 160px !important;
            height: 160px !important;
          }

          .mode-btn .icon2 {
            width: 200px !important;
            height: 200px !important;
          }

          .mode-btn .icon3 {
            width: 175px !important;
            height: 175px !important;
          }

          .mode-title-1,
          .mode-title-2,
          .mode-title-3 {
            font-size: 32px !important;
          }

          .music-icon {
            width: 42px !important;
            top: 75px !important;
            right: 40px !important;
          }
        }

        /* 桌面端适配 (1025px以上) */
        @media screen and (min-width: 1025px) {
          .companion-page {
            width: 430px !important;
            height: 932px !important;
            margin: 0 auto !important;
            position: relative !important;
            left: auto !important;
            right: auto !important;
            background-size: cover !important;
            background-position: center center !important;
          }

          body {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            min-height: 100vh !important;
            background-color: #f0f0f0 !important;
          }

          .content-area {
            padding: 137px 23px 65px !important;
            background: transparent !important;
          }

          .companion-page .mode-btn {
            width: 410px !important;
            height: 190px !important;
            padding: 0 40px !important;
          }

          .mode-btn .icon1 {
            width: 150px !important;
            height: 150px !important;
          }

          .mode-btn .icon2 {
            width: 190px !important;
            height: 190px !important;
          }

          .mode-btn .icon3 {
            width: 162px !important;
            height: 162px !important;
          }

          .mode-title-1,
          .mode-title-2,
          .mode-title-3 {
            font-size: 28px !important;
          }

          .music-icon {
            width: 38px !important;
            top: 70px !important;
            right: 23px !important;
          }
        }

        /* 底部导航栏响应式适配 */
        @media screen and (max-width: 430px) {
          .tab-bar {
            width: 100% !important;
            left: 0 !important;
            right: 0 !important;
          }
        }

        @media screen and (min-width: 431px) and (max-width: 767px) {
          .tab-bar {
            width: 100% !important;
            left: 0 !important;
            right: 0 !important;
          }
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) {
          .tab-bar {
            width: 100% !important;
            max-width: 768px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
          }
        }

        @media screen and (min-width: 1025px) {
          .tab-bar {
            width: 430px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
          }
        }

        /* 横屏模式适配 */
        @media screen and (max-height: 500px) and (orientation: landscape) {
          .companion-page {
            height: 100vh !important;
            min-height: 500px !important;
            background-size: cover !important;
            background-position: center center !important;
          }

          .content-area {
            padding: 60px 16px 40px !important;
            flex-direction: row !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            gap: 10px !important;
            background: transparent !important;
          }

          .companion-page .mode-btn {
            width: 45% !important;
            height: 120px !important;
            margin-bottom: 10px !important;
          }

          .mode-btn .icon1 {
            width: 80px !important;
            height: 80px !important;
          }

          .mode-btn .icon2 {
            width: 100px !important;
            height: 100px !important;
          }

          .mode-btn .icon3 {
            width: 90px !important;
            height: 90px !important;
          }

          .mode-title-1,
          .mode-title-2,
          .mode-title-3 {
            font-size: 18px !important;
          }

          .music-icon {
            top: 45px !important;
          }
        }
        /* 导航按钮容器 */
.tcm-nav-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 上一题按钮 */
.tcm-prev-btn {
  background: #F3F4F6;
  color: #6B7280;
  border-radius: 10px;
  border:1px solid rgba(166,127,84,0.52);
}

.tcm-prev-btn:hover {
  background: #E5E7EB;
}

.tcm-prev-btn:active {
  background: #D1D5DB;
}

/* 下一题/开始测评按钮 */
.tcm-next-btn {
  border-radius: 10px;
  background: #EAF1EC;
  border:1px solid rgba(166,127,84,0.52);
  color: #574A40;
}
.tcm-next-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.tcm-next-btn:active {
  transform: translateY(0);
  opacity: 0.95;
}
/* 开始测评按钮 */
.tcm-start-btn {
  background: linear-gradient(135deg, #A67F5E, #8B6B4D);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(166, 127, 94, 0.3);
}

.tcm-start-btn:hover {
  box-shadow: 0 6px 16px rgba(166, 127, 94, 0.4);
}
.tcm-toast-noplan {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
   background: rgba(0,0,0,0.7);
            color: white;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 15px;
   
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    pointer-events: none;
}

.tcm-toast-noplan.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
       /* 修复文字换行和按钮布局 */
.suggestion-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.suggestion-left {
  flex: 1;
  min-width: 0;  /* 关键：允许flex子项收缩 */
}

.suggestion-desc {
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  line-height: 1.6;
  max-width: 100%;
}

.suggestion-btn {
  flex-shrink: 0;  /* 按钮不收缩 */
  white-space: nowrap;  /* 按钮文字不换行 */
}