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

:root{
  --pol-gold:#e0b054; --pol-gold-2:#e6b95f; --pol-line:rgba(224,176,84,.18); --pol-line-2:rgba(224,176,84,.26);
  --pol-txt:#fbf3e4; --pol-mut:#99886a; --pol-mut-2:#8a7a5e;
}

/* 1) 顶栏：更舒展、主次更清楚 ------------------------------------------------ */
.ad-topbar{
  padding:12px 20px; gap:16px;
  background:linear-gradient(180deg,#181309 0%,#0b0905 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.32);
  flex-wrap:wrap; row-gap:6px;   /* ★v3.13：标签放不下时整条顶栏允许换行（见下面 .ad-maintabs 注释） */
}
.ad-logo{
  width:40px; height:40px; border-radius:11px;
  box-shadow:0 6px 16px rgba(224,176,84,.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:#8c7c63; }

/* 标签页：整条居中 + 右侧渐隐（放得下就看不出来）＋ 选中态金色下划线 */
.ad-maintabs{
  flex:1 1 auto; justify-content:flex-start; gap:2px; padding:0 4px; min-width:0;
  /* ★v3.13 修「管理员后台排版都挡住了」：
     原来这里靠「横向滚动 + 隐藏滚动条 + 整条居中」—— 标签一多就两头被裁，
     而且居中布局下左边那截**永远滚不到**（截图里第一个标签只剩「网加密」就是这个）。
     改成：放得下就一行居中，放不下就自动换行到第二行，全部可见可点。
     顺带去掉右侧那层渐隐遮罩（它会把最后一个标签的字也压暗）。 */
  flex-wrap:wrap; overflow:visible; row-gap:2px;
}
.ad-maintab{
  padding:8px 11px; font-size:13px; border-radius:9px; color:#a1917a;
  transition:color .15s, background .15s, border-color .15s;
}
.ad-maintab:hover{ color:#fbf3e4; background:#1a140b; border-color:transparent; }
.ad-maintab.active{
  color:#f4d488; background:#1c170d; border-color:rgba(224,176,84,.24);
  box-shadow:inset 0 -2px 0 var(--pol-gold);
}

/* 右侧按钮：收一号、边框更轻；标签换行时按钮组始终靠右（★v3.13） */
.ad-topbtns{ gap:7px; margin-left:auto; }
.ad-topbtn{
  padding:6px 11px; font-size:12.5px; border-radius:8px;
  background:#1a140b; border-color:rgba(224,176,84,.22); transition:.15s;
}
.ad-topbtn:hover{ background:rgba(224,176,84,.18); border-color:var(--pol-gold); color:#fff; }
.ad-topbtn.red{ background:#7a2f22; border-color:#a03a27; }
.ad-topbtn.red:hover{ background:#8d3627; border-color:#a9752c; }
.ad-ver-badge{
  background:#1a140b; border:1px solid rgba(224,176,84,.30); border-radius:999px;
  color:#e3d6b8; 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:rgba(224,176,84,.20); border-radius:99px; border:2px solid transparent; background-clip:content-box;
}
.ad-left::-webkit-scrollbar-thumb:hover, .ad-body2::-webkit-scrollbar-thumb:hover{
  background:rgba(224,176,84,.26); 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,#171208 0%,#141009 100%); }
.ad-right .ad-head{ padding:11px 16px; background:#181309; color:#e3d6b8; letter-spacing:.2px; }
.ad-right .ad-head .hb{ background:#1a140b; border-color:rgba(224,176,84,.22); color:#dbcfb6; 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:#0f0c08; border-color:#6b5525; color:#f4d488; }
.ad-right .ad-head .hb.x{ background:transparent; border-color:rgba(224,176,84,.26); color:#8c7c63; }
.ad-right .ad-head .hb.x:hover{ background:#5a231b; border-color:#8a3a27; color:#ffd6cc; }
.ad-right .ad-body2{ padding:16px 18px; }

/* 3) 左栏：状态条 / 设置行统一成同一套卡片 ----------------------------------- */
#aiTrialBar{
  background:#171208 !important; border:1px solid rgba(224,176,84,.26) !important;
  margin-top:10px !important; padding:9px 12px !important; font-size:12.5px !important;
}
.ad-setrow{ margin-top:10px; padding:9px 12px; background:#171208; gap:9px; font-size:12.5px; color:#c7b9a0; }
.ad-setrow select{ background:#0b0905; border-color:rgba(224,176,84,.22); }
.ad-mini{ border-color:rgba(224,176,84,.22); }
.ad-toolbtn{ border-radius:9px; transition:.15s; }
.ad-toolbtn:hover{ background:rgba(224,176,84,.18); }

/* 4) 右栏空态：把一句灰字变成居中卡片（真出代码时这块自动消失）--------------- */
#aiResult > .tip{
  display:block; max-width:640px; margin:11vh auto 0; padding:38px 40px 32px;
  text-align:center; color:#a5967f; font-size:14px; line-height:1.9;
  background:linear-gradient(180deg,#15110a 0%,#100d08 100%);
  border:1px dashed rgba(224,176,84,.26); 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;
}
/* ★v2.41 英文版提示（CSS content 不是文本节点，词典翻不到，这里按语言各写一份） */
html[lang="en"] #aiResult > .tip::after{
  content:"\2460 Pick a type\3000 \2461 Describe your requirement\3000 \2462 Click Submit to AI \2014 the code appears here";
}

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

/* 6) ★v2.65：被禁用的按钮要看得出来（未开通「EA 加密 / 在线授权」时按钮会禁掉）。
   之前没有这条通用样式，禁用后看着和能用一模一样，客户会以为点了没反应。 */
.btn:disabled, button:disabled{
  opacity:.5; cursor:not-allowed; filter:grayscale(.4); box-shadow:none;
}

/* 窄屏：标签页优先让位（避免导航被切字）*/
@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; } }

/* ============================================================================
 * ★v3.10 工作台对齐「11 号方案 · 竖分屏 + 代码预览」
 *   用户口径：「工作台20_11_竖分屏加代码预览.png 改成这种吧」
 *   只调版式与质感：左栏每一组功能都变成独立的圆角面板（分组更清楚、留白更松），
 *   右栏加一条「生成结果」标题条。**不改任何 id / onclick / 显示逻辑**，
 *   所以会员条、算力行这些 JS 控制显示的元素照旧（隐藏时整块不出现）。
 * ========================================================================== */
.ad-left{ width:400px; gap:13px; }

/* 左栏直接子元素 = 一张面板（渐变底 + 细金边 + 内高光 + 投影） */
.ad-left > *{
  background:linear-gradient(180deg,#171208,#120e09);
  border:1px solid rgba(224,176,84,.14);
  border-radius:14px;
  padding:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03);
}
/* 本身不占版面的两个（隐藏的按钮行 / 锁定提示）不要被套上卡片 */
.ad-left > .ad-tabs, .ad-left > #aiLockHint2{ background:none; border:0; box-shadow:none; padding:0; }
/* 会员条 / 试用条：保留它们自己的底色语义，只统一圆角与内距 */
.ad-left > #aiVipBar, .ad-left > #aiTrialBar{
  padding:10px 13px !important; border-radius:12px !important;
}
.ad-left > #aiVipBar{ background:linear-gradient(180deg,#1b1509,#140f08) !important;
                      border-color:rgba(224,176,84,.30) !important; }
.ad-left > #aiTrialBar{ background:linear-gradient(180deg,#171208,#120e09) !important;
                        border-color:rgba(224,176,84,.20) !important; }
/* 设置行（算力 / 高级智能）也当一张面板 */
.ad-left > .ad-setrow{ margin-top:0; }
/* 工具行原来写死了 padding:0（内联），这里补回面板内距，否则按钮贴着边 */
.ad-left > .ad-tools{ padding:12px 14px !important; }
.ad-left > .ad-selectrow{ padding:14px !important; }

/* 需求输入框：面板内的输入区再淡一层，层次更清楚 */
.ad-left .ad-descbox textarea{ background:#0d0a06; border:1px solid rgba(224,176,84,.20); border-radius:11px; }
.ad-left .ad-descbox textarea:focus{ border-color:#e0b054; box-shadow:0 0 0 3px rgba(224,176,84,.12); outline:none; }

/* 右栏：标题条 */
.ad-rt-title{ font-size:13px; font-weight:800; color:#e3d6b8; letter-spacing:.4px; white-space:nowrap; }
.ad-rt-sub{ font-size:12px; color:#99886a; white-space:nowrap; }
.ad-right{ border-radius:14px !important; box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); }
.ad-right .ad-head{ background:linear-gradient(180deg,#1a140b,#15110a); border-bottom:1px solid rgba(224,176,84,.12); }

/* ===== ★v3.11：导航栏「EA破解」页（内容后台可设）+ 后台编辑区 =====
   用户口径：「网站导航栏增加一个EA破解，里面内容可以在后台自己设置」
   只加样式，不动结构；回退删掉本段即可。 */
.crack-head { display:flex; gap:12px; align-items:flex-start; }
.crack-head-l { flex:1 1 auto; min-width:0; }
.crack-head-r { flex:0 0 auto; }
.crack-intro { margin-top:8px; color:#cbbda0; font-size:13px; line-height:1.95; max-width:820px; }
.crack-intro p { margin:0 0 6px; }
.crack-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:14px; margin-top:16px; }
.crack-item { display:flex; flex-direction:column; overflow:hidden; border-radius:14px;
              background:linear-gradient(180deg,#171208,#120e09);
              border:1px solid rgba(224,176,84,.18); box-shadow:0 14px 34px rgba(0,0,0,.38); }
.crack-item:hover { border-color:rgba(224,176,84,.34); }
.crack-img { display:block; width:100%; max-height:190px; object-fit:cover; background:#0d0a06; }
.crack-item-b { flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:12px 14px 14px; }
.crack-item-t { font-size:14.5px; font-weight:800; color:#f0e2c4; line-height:1.5; }
.crack-item-d { font-size:12.5px; color:#bdb094; line-height:1.85; }
.crack-item-d p { margin:0 0 4px; }
.crack-link { align-self:flex-start; margin-top:2px; }
.crack-empty { padding:14px 0; }
.crack-foot { margin-top:16px; padding-top:12px; color:#99886a; font-size:12.5px; line-height:1.95;
              border-top:1px dashed rgba(224,176,84,.16); }
.crack-foot p { margin:0 0 5px; }
/* 后台「内容设置」里的编辑区 */
.crack-ed-title { margin:6px 0 8px; font-size:13px; font-weight:800; color:#e3d6b8; }
.crack-ed { margin-bottom:10px; padding:10px 12px; border:1px dashed rgba(224,176,84,.20);
            border-radius:12px; background:rgba(224,176,84,.02); }
.crack-ed-hd { display:flex; align-items:center; gap:6px; margin-bottom:8px; color:#e3d6b8; font-size:13px; }
.crack-ta { width:360px; min-height:62px; resize:vertical; line-height:1.7; }
.crack-ed-img { width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid rgba(224,176,84,.25); }
.crack-ed-none { width:56px; text-align:center; color:#8a7a5e; font-size:12px; }