/* ===== assets/css/10-polish.css | v1.26 首页排版美化层（纯样式：不动结构、不动逻辑）=====
   改前：标语条独占一行、顶栏拥挤（「开源广场」被切成「开源」）、右栏大片空白、
        左栏几条状态条描边深浅不一。
   改后：顶栏更有呼吸感、标签页不再截断、右栏空态收成居中卡片、左栏状态条统一成一套卡片。
   回退：删掉 pages/layout/head.html 里引用本文件的那一行即可，其余文件不受影响。 */

:root{
  --pol-gold:#d9a06b; --pol-gold-2:#e2a458; --pol-line:#2d2720; --pol-line-2:#3a332a;
  --pol-txt:#f0e9d8; --pol-mut:#9a8f7a; --pol-mut-2:#8a7f6a;
}

/* 1) 顶栏：更舒展、主次更清楚 ------------------------------------------------ */
.ad-topbar{
  padding:12px 20px; gap:16px;
  background:linear-gradient(180deg,#221c16 0%,#1b1611 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.32);
}
.ad-logo{
  width:40px; height:40px; border-radius:11px;
  box-shadow:0 6px 16px rgba(217,160,107,.30), inset 0 0 0 1px rgba(255,255,255,.08);
}
.ad-title{ font-size:21px; letter-spacing:1.4px; }
.ad-ver{ font-size:11.5px; color:#8f8574; }

/* 标签页：整条居中 + 右侧渐隐（放得下就看不出来）＋ 选中态金色下划线 */
.ad-maintabs{
  flex:1 1 auto; justify-content:center; gap:2px; padding:0 4px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),rgba(0,0,0,.28) 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),rgba(0,0,0,.28) 100%);
}
.ad-maintab{
  padding:8px 12px; font-size:13.5px; border-radius:9px; color:#a2977f;
  transition:color .15s, background .15s, border-color .15s;
}
.ad-maintab:hover{ color:#f0e9d8; background:#241e18; border-color:transparent; }
.ad-maintab.active{
  color:#ffd778; background:#2a231b; border-color:#3f3628;
  box-shadow:inset 0 -2px 0 var(--pol-gold);
}

/* 右侧按钮：收一号、边框更轻 */
.ad-topbtns{ gap:7px; }
.ad-topbtn{
  padding:6px 11px; font-size:12.5px; border-radius:8px;
  background:#241e18; border-color:#37302a; transition:.15s;
}
.ad-topbtn:hover{ background:#2e2620; border-color:var(--pol-gold); color:#fff; }
.ad-topbtn.red{ background:#7a2f22; border-color:#a03a27; }
.ad-topbtn.red:hover{ background:#8d3627; border-color:#c04a32; }
.ad-ver-badge{
  background:#241e18; border:1px solid #4a4136; border-radius:999px;
  color:#d9cbb2; font-size:11.5px; padding:2px 9px; letter-spacing:.4px;
}

/* 2) 主体：留白节奏 + 统一细滚动条 ------------------------------------------- */
.ad-body{ padding:18px 20px 20px; gap:18px; }
.ad-left{ width:420px; gap:12px; }
.ad-left::-webkit-scrollbar, .ad-body2::-webkit-scrollbar{ width:9px; }
.ad-left::-webkit-scrollbar-thumb, .ad-body2::-webkit-scrollbar-thumb{
  background:#332b23; border-radius:99px; border:2px solid transparent; background-clip:content-box;
}
.ad-left::-webkit-scrollbar-thumb:hover, .ad-body2::-webkit-scrollbar-thumb:hover{
  background:#453a2e; background-clip:content-box;
}

/* 卡片：同一套圆角/描边/投影 */
.ad-descbox, .ad-right, .ad-setrow, #aiTrialBar{
  border-radius:12px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.ad-right{ background:linear-gradient(180deg,#1f1a15 0%,#1b1712 100%); }
.ad-right .ad-head{ padding:11px 16px; background:#221c16; color:#d9cbb2; letter-spacing:.2px; }
.ad-right .ad-head .hb{ background:#241e18; border-color:#37302a; color:#d3c8b4; transition:.15s; }
.ad-right .ad-head .hb:hover{ border-color:var(--pol-gold); color:#fff; }
.ad-right .ad-head .hb.blue{ background:#1d3a5c; border-color:#2f5b8c; color:#cfe4ff; }
.ad-right .ad-head .hb.yellow{ background:#332a12; border-color:#7a5f22; color:#ffd778; }
.ad-right .ad-head .hb.x{ background:transparent; border-color:#3a332a; color:#8f8574; }
.ad-right .ad-head .hb.x:hover{ background:#5a231b; border-color:#8a3a27; color:#ffd6cc; }
.ad-right .ad-body2{ padding:16px 18px; }

/* 3) 左栏：状态条 / 设置行统一成同一套卡片 ----------------------------------- */
#aiTrialBar{
  background:#201b15 !important; border:1px solid #3a332a !important;
  margin-top:10px !important; padding:9px 12px !important; font-size:12.5px !important;
}
.ad-setrow{ margin-top:10px; padding:9px 12px; background:#201b15; gap:9px; font-size:12.5px; color:#bfb49c; }
.ad-setrow select{ background:#171410; border-color:#37302a; }
.ad-mini{ border-color:#37302a; }
.ad-toolbtn{ border-radius:9px; transition:.15s; }
.ad-toolbtn:hover{ background:#312821; }

/* 4) 右栏空态：把一句灰字变成居中卡片（真出代码时这块自动消失）--------------- */
#aiResult > .tip{
  display:block; max-width:640px; margin:11vh auto 0; padding:38px 40px 32px;
  text-align:center; color:#a99c84; font-size:14px; line-height:1.9;
  background:linear-gradient(180deg,#1c1813 0%,#191510 100%);
  border:1px dashed #3a332a; border-radius:16px;
}
#aiResult > .tip::before{ content:"\1F916"; display:block; font-size:46px; line-height:1; margin-bottom:16px; opacity:.92; }
#aiResult > .tip::after{
  content:"\2460 选类型\3000 \2461 中文描述需求\3000 \2462 提交给AI，代码实时出现在这里";
  display:block; margin-top:16px; padding-top:14px; border-top:1px solid var(--pol-line);
  color:var(--pol-mut-2); font-size:12px;
}

/* 5) 收尾：底部工具行、右下机器人 */
.ad-tools{ background:#1b1712; }
.ad-bot{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); }

/* 窄屏：标签页优先让位（避免导航被切字）*/
@media (max-width:1400px){
  .ad-maintabs{ justify-content:flex-start; }
  .ad-maintab{ padding:8px 10px; font-size:13px; }
  .ad-topbtn{ padding:6px 9px; font-size:12px; }
  .ad-left{ width:390px; }
}
@media (max-width:1180px){ .ad-title{ font-size:19px; } .ad-ver{ display:none; } }