@charset "utf-8";
/* 向日葵远程 · 问答广场（社区问答风 / 青绿主题，与 xrkb 粉色折叠卡片风区分） */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;font-size:14px;color:#1f2a2a;background:#eef4f3}
a{text-decoration:none;color:inherit}
ul,li{list-style:none}
img,svg{vertical-align:middle;max-width:100%}

/* 顶栏 */
.qhd{background:#0d9488;color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(13,148,136,.25)}
.qhd_in{max-width:1180px;margin:0 auto;height:60px;display:flex;align-items:center;padding:0 20px}
.qhd_logo{display:flex;align-items:center;font-size:18px;font-weight:bold;color:#fff}
.qhd_logo img{height:30px;border-radius:7px;margin-right:9px}
.qhd_nav{margin-left:38px;display:flex;gap:26px}
.qhd_nav a{font-size:15px;color:#d7f2ee}
.qhd_nav a:hover,.qhd_nav a._on{color:#fff;font-weight:bold}
.qhd_btn{margin-left:auto;background:#f59e0b;color:#fff;padding:8px 20px;border-radius:20px;font-size:14px}
.qhd_btn:hover{opacity:.92}

/* 主体两栏 */
.qwrap{max-width:1180px;margin:0 auto;padding:22px 20px;display:flex;gap:22px;align-items:flex-start}
.qside{width:210px;flex-shrink:0;position:sticky;top:78px}
.qside_box{background:#fff;border:1px solid #e3ecea;border-radius:12px;padding:14px 12px;margin-bottom:16px}
.qside_t{font-size:13px;color:#0d9488;font-weight:bold;margin:0 0 8px 6px}
.qside a{display:block;padding:8px 10px;border-radius:8px;font-size:13px;color:#4b5a58}
.qside a:hover,.qside a._on{background:#e6f5f3;color:#0d9488}
.qside a em{float:right;font-style:normal;color:#9fb0ad}
.qmain{flex:1;min-width:0}

/* 页头 */
.qhero{background:#fff;border:1px solid #e3ecea;border-radius:14px;padding:22px 24px;margin-bottom:16px}
.qhero h1{font-size:24px;color:#123;margin-bottom:8px}
.qhero p{font-size:14px;color:#5c6b69;line-height:1.8}
.qsearch{margin-top:16px;display:flex;max-width:520px;border:2px solid #0d9488;border-radius:10px;overflow:hidden}
.qsearch input{flex:1;border:0;outline:none;height:42px;padding:0 16px;font-size:14px;font-family:inherit}
.qsearch span{width:72px;background:#0d9488;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* 问答帖 */
.qa_post{background:#fff;border:1px solid #e3ecea;border-radius:14px;padding:20px 22px;margin-bottom:14px;transition:box-shadow .2s}
.qa_post:hover{box-shadow:0 6px 22px rgba(13,148,136,.10)}
.qa_head{display:flex;align-items:flex-start;gap:10px}
.qa_badge{flex-shrink:0;width:24px;height:24px;border-radius:6px;background:#0d9488;color:#fff;font-size:14px;font-weight:bold;display:flex;align-items:center;justify-content:center;margin-top:2px}
.qa_title{font-size:17px;color:#12312e;line-height:1.5;font-weight:600}
.qa_tags{margin:10px 0 0 34px;display:flex;flex-wrap:wrap;gap:7px}
.qa_tag{font-size:12px;color:#0d9488;background:#e6f5f3;border-radius:12px;padding:3px 11px}

/* 回答区：左作者条 + 正文 + 右示意图 */
.qa_ans{margin:14px 0 0 34px;display:flex;gap:18px;align-items:flex-start}
.qa_ans_l{flex:1;min-width:0}
.qa_author{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.qa_avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#0d9488,#5eead4);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qa_who{font-size:13px;color:#0d9488;font-weight:600}
.qa_who small{color:#9fb0ad;font-weight:normal;margin-left:6px}
.qa_body{font-size:14px;color:#3d4a48;line-height:1.95}
.qa_pts{margin:11px 0 0;padding:12px 14px;background:#f5faf9;border-left:3px solid #0d9488;border-radius:0 8px 8px 0}
.qa_pts li{font-size:13px;color:#4b5a58;line-height:1.8;padding-left:16px;position:relative}
.qa_pts li:before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:#f59e0b}
.qa_fig{flex:0 0 180px;width:180px}
.qa_fig .box{width:100%;height:112px;border:1px solid #e3ecea;border-radius:10px;overflow:hidden;background:#f5faf9}
.qa_fig .box svg{width:100%;height:100%}
.qa_fig figcaption{font-size:12px;color:#9fb0ad;text-align:center;margin-top:6px}

/* 帖脚 meta */
.qa_meta{margin:14px 0 0 34px;padding-top:12px;border-top:1px dashed #e9efee;display:flex;align-items:center;gap:18px;font-size:12px;color:#9fb0ad}
.qa_meta .up{color:#0d9488;font-weight:600}
.qa_meta .solved{color:#12a150;font-weight:600}
.qa_meta .kw{margin-left:auto;color:#c2cecc}

/* 翻页 */
.qpager{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:24px 0 8px}
.qpager a,.qpager span{min-width:36px;height:36px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;border:1px solid #d9e6e3;border-radius:8px;background:#fff;color:#4b5a58}
.qpager a:hover{border-color:#0d9488;color:#0d9488;background:#f0faf8}
.qpager .cur{background:#0d9488;border-color:#0d9488;color:#fff;font-weight:bold}
.qpager .dot{border:0;background:none;min-width:16px;padding:0}

/* 索引分类卡 */
.qcatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.qcat{background:#fff;border:1px solid #e3ecea;border-radius:14px;padding:18px;transition:.2s}
.qcat:hover{box-shadow:0 8px 24px rgba(13,148,136,.12);transform:translateY(-2px)}
.qcat .ico{width:100%;height:82px;border-radius:9px;overflow:hidden;background:#f5faf9;border:1px solid #eef4f3;margin-bottom:12px}
.qcat .ico svg{width:100%;height:100%}
.qcat h3{font-size:16px;color:#12312e;margin-bottom:4px}
.qcat:hover h3{color:#0d9488}
.qcat .cnt{font-size:12px;color:#9fb0ad}

.qnote{background:#fff;border:1px solid #e3ecea;border-radius:12px;padding:16px 18px;margin:22px 0 10px;font-size:13px;color:#5c6b69;line-height:1.9}
.qnote b{color:#12312e}
.qempty{display:none;text-align:center;padding:40px;color:#9fb0ad}

.qfoot{background:#123b38;color:#89a29e;text-align:center;padding:26px 20px;margin-top:30px}
.qfoot a{color:#b7cfca;margin:0 10px;font-size:13px}
.qfoot a:hover{color:#fff}
.qfoot p{font-size:12px;line-height:2;margin-top:8px}

@media(max-width:1000px){
  .qwrap{flex-direction:column}
  .qside{width:100%;position:static;display:flex;flex-wrap:wrap;gap:8px}
  .qside_box{flex:1;min-width:200px}
  .qcatgrid{grid-template-columns:1fr}
  .qa_ans{flex-direction:column}
  .qa_fig{width:100%;flex-basis:auto}
  .qa_fig .box{height:150px}
}