/* ==============================================
   撑伞人 — 解忧馆（深色主题，沿用 --jy-* 体系）
   左侧侧边菜单 + 右侧主内容面板
   ============================================== */

:root{
  --jy-bg:#eef4fb;--jy-card:rgba(255,255,255,0.6);--jy-blue:#3E8AD6;
  --jy-text:#1a2a3a;--jy-sub:rgba(20,30,40,0.55);
  --jy-border:rgba(20,30,40,0.1);--jy-amber:#e69340;
  --jy-red:#E53935;--jy-warn-bg:rgba(230,147,64,0.10);--jy-warn-border:rgba(230,147,64,0.25)
}
body{background:var(--jy-bg) url('/assets/bg/bg-jieyou.webp') center/cover no-repeat fixed}
.jy-page{display:flex;min-height:100vh;padding-top:64px}
/* 侧边菜单 */
.jy-side{width:200px;flex-shrink:0;position:fixed;top:64px;left:0;bottom:0;overflow-y:auto;padding:20px 12px;border-right:1px solid var(--jy-border);z-index:40;background:var(--jy-bg)}
.jy-side a{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:8px;font-size:13px;color:var(--jy-sub);text-decoration:none;transition:all 200ms;margin-bottom:2px}
.jy-side a:hover{background:rgba(94, 181, 247,0.06);color:var(--jy-text)}
.jy-side a.active{background:rgba(94, 181, 247,0.12);color:var(--jy-blue);font-weight:600}
/* 主内容 */
.jy-main{flex:1;margin-left:200px;padding:24px 32px 60px;max-width:900px}
.jy-banner{margin-bottom:20px;padding:6px 0;display:flex;align-items:center;justify-content:space-between}
.jy-banner h2{font-size:20px;font-weight:700;color:var(--jy-text)}
.jy-panel{display:none}.jy-panel.active{display:block}
/* 通用卡片 */
.jy-card{background:var(--jy-card);backdrop-filter:blur(8px);border:1px solid var(--jy-border);border-radius:14px;padding:20px;margin-bottom:14px}
.jy-card h3{font-size:15px;font-weight:600;color:var(--jy-text);margin-bottom:8px}
.jy-card p,.jy-card li{font-size:13px;color:var(--jy-sub);line-height:1.8}
/* 免责条 */
.jy-disclaimer{background:var(--jy-warn-bg);border:1px solid var(--jy-warn-border);border-radius:10px;padding:10px 14px;font-size:11px;color:var(--jy-amber);line-height:1.7;margin-bottom:14px}
/* 按钮 */
.jy-btn{padding:9px 20px;border-radius:10px;border:none;font-weight:600;cursor:pointer;font-family:inherit;font-size:13px}
.jy-btn-blue{background:var(--jy-blue);color:#fff}
.jy-btn-ghost{background:transparent;border:1px solid var(--jy-border);color:var(--jy-sub)}
.jy-btn-amber{background:var(--jy-amber);color:#0E1621}
.jy-btn-sm{padding:6px 14px;font-size:12px;border-radius:8px}
/* 自测 */
.scale-select{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.scale-card{background:var(--jy-card);border:1px solid var(--jy-border);border-radius:14px;padding:18px;cursor:pointer;transition:all 200ms}
.scale-card:hover{border-color:rgba(94, 181, 247,0.25);background:rgba(255,255,255,0.06)}
.scale-card h4{font-size:14px;color:var(--jy-text);margin-bottom:4px}
.scale-card p{font-size:11px;color:var(--jy-sub);line-height:1.6}
.test-q{font-size:14px;color:var(--jy-text);line-height:1.8;margin-bottom:14px}
.test-opts{display:flex;gap:8px;flex-wrap:wrap}
.test-opt{padding:9px 18px;border-radius:20px;border:1px solid var(--jy-border);font-size:13px;color:var(--jy-sub);cursor:pointer;background:transparent;transition:all 200ms;font-family:inherit}
.test-opt:hover,.test-opt.sel{background:var(--jy-blue);color:#fff;border-color:var(--jy-blue)}
.test-progress{height:4px;background:var(--jy-border);border-radius:2px;margin-bottom:18px;overflow:hidden}
.test-progress .fill{height:100%;background:var(--jy-blue);transform-origin:left;transform:scaleX(0);transition:transform 300ms}
.test-result{background:rgba(94, 181, 247,0.07);border:1px solid rgba(94, 181, 247,0.15);border-radius:14px;padding:22px;text-align:center}
.test-result .score{font-size:40px;font-weight:700;color:var(--jy-blue);margin-bottom:4px}
.test-result .level{font-size:16px;color:var(--jy-text);margin-bottom:12px}
.test-result.high-risk{background:rgba(229, 57, 53,0.08);border-color:rgba(229, 57, 53,0.25)}
.test-result.high-risk .score{color:var(--jy-red)}
.test-nav{display:flex;justify-content:space-between;margin-top:16px}
/* 练习 */
.practice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.practice-card{background:var(--jy-card);border:1px solid var(--jy-border);border-radius:14px;padding:18px;cursor:pointer;transition:all 200ms}
.practice-card:hover{border-color:rgba(94, 181, 247,0.25);background:rgba(255,255,255,0.06)}
.practice-card .icon{font-size:30px;margin-bottom:8px}
.practice-card h4{font-size:14px;color:var(--jy-text);margin-bottom:4px}
.practice-card p{font-size:11px;color:var(--jy-sub);line-height:1.6}
.practice-step{padding:16px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid var(--jy-border);margin-bottom:12px}
.practice-step h4{font-size:14px;color:var(--jy-text);margin-bottom:8px}
.practice-step p{font-size:13px;color:var(--jy-sub);line-height:1.9}
.practice-nav{display:flex;gap:10px;margin-top:16px}
/* 呼吸练习动画 */
.breath-circle{width:140px;height:140px;border-radius:50%;border:3px solid rgba(94, 181, 247,0.3);margin:20px auto;display:flex;align-items:center;justify-content:center;transition:transform 4s ease, background 4s ease;position:relative}
.breath-circle .label{font-size:16px;color:var(--jy-blue);font-weight:600}
.breath-circle.inhale{transform:scale(1.25);background:rgba(94, 181, 247,0.10)}
.breath-circle.exhale{transform:scale(0.85);background:rgba(94, 181, 247,0.08)}
/* CBT 表单 */
.cbt-field{margin-bottom:14px}
.cbt-field label{display:block;font-size:13px;color:var(--jy-text);margin-bottom:6px;font-weight:600}
.cbt-field textarea{width:100%;min-height:90px;padding:12px 14px;border-radius:10px;border:1px solid var(--jy-border);background:var(--jy-card);color:var(--jy-text);font-size:13px;outline:none;font-family:inherit;resize:vertical;line-height:1.7}
/* 危机资源 */
.crisis-top{background:rgba(229, 57, 53,0.10);border:1px solid rgba(229, 57, 53,0.30);border-radius:14px;padding:20px;margin-bottom:14px;text-align:center}
.crisis-top h3{font-size:17px;color:var(--jy-red);margin-bottom:8px}
.crisis-top p{font-size:13px;color:var(--jy-text);line-height:1.8}
.crisis-hotline{background:var(--jy-card);border:1px solid var(--jy-border);border-radius:12px;padding:16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.crisis-hotline .name{font-size:14px;color:var(--jy-text);font-weight:600}
.crisis-hotline .time{font-size:11px;color:var(--jy-sub);margin-top:2px}
.crisis-hotline .phone{font-size:18px;font-weight:700;color:var(--jy-red);text-decoration:none}
/* 日记 */
.diary-list{display:grid;gap:10px}
.diary-item{background:var(--jy-card);border:1px solid var(--jy-border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all 200ms}
.diary-item:hover{border-color:rgba(94, 181, 247,0.2)}
.diary-item .t{font-size:14px;color:var(--jy-text);font-weight:600;margin-bottom:4px}
.diary-item .d{font-size:11px;color:var(--jy-sub)}
.diary-actions{display:flex;gap:8px;margin-top:10px}
.diary-actions button{padding:7px 16px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;font-size:12px}
.diary-form input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--jy-border);background:var(--jy-card);color:var(--jy-text);font-size:14px;outline:none;font-family:inherit;margin-bottom:10px}
.diary-form textarea{width:100%;min-height:180px;padding:12px 14px;border-radius:10px;border:1px solid var(--jy-border);background:var(--jy-card);color:var(--jy-text);font-size:14px;outline:none;font-family:inherit;resize:vertical;line-height:1.8}
.empty-note{text-align:center;padding:50px 20px;color:var(--jy-sub)}
.empty-note .icon{font-size:40px;margin-bottom:10px}
/* 历史记录 */
.history-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--jy-border);font-size:13px;color:var(--jy-sub)}
.history-row .scale{color:var(--jy-text)}
.history-row .score{font-weight:700;color:var(--jy-blue)}
/* 移动端 */
@media(max-width:768px){
  .jy-side{display:none}
  .jy-main{margin-left:0;padding:16px}
  /* 移动端顶部横滑菜单 */
  .jy-mobile-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:10px}
  .jy-mobile-tabs::-webkit-scrollbar{display:none}
  .jy-mobile-tabs a{flex-shrink:0;padding:8px 14px;border-radius:16px;font-size:12px;color:var(--jy-sub);text-decoration:none;border:1px solid var(--jy-border);white-space:nowrap}
  .jy-mobile-tabs a.active{background:rgba(94, 181, 247,0.12);color:var(--jy-blue);border-color:rgba(94, 181, 247,0.25)}
}
@media(min-width:769px){.jy-mobile-tabs{display:none}}