/* ============================================================
   公众号文章助手专属样式
   来源：原 wdsc/wz.php 内联 <style>，2026-08-11 外置为可缓存文件
   ============================================================ */
.wz-layout { display:grid; grid-template-columns:400px 1fr; gap:20px; }

@media(max-width:900px){ .wz-layout{grid-template-columns:1fr;} }

.wz-panel { background:var(--white);  padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.08); }

.wz-section { margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #eee; }

.wz-section:last-child { border-bottom:none; }

.wz-section-title { font-size:.9rem; font-weight:600; color:#374151; margin-bottom:10px; display:flex; align-items:center; gap:6px; }

.wz-section-title .num { background:#4a90d9; color:var(--white); width:20px; height:20px;  display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; }

.form-group { margin-bottom:12px; }

.form-group label { display:block; font-size:.82rem; color:#555; margin-bottom:4px; }

.form-group textarea, .form-group input, .form-group select {

    width:100%; padding:8px 10px; border:1px solid #ddd;  font-size:.88rem; box-sizing:border-box; }

.form-group textarea:focus, .form-group input:focus, .form-group select:focus {

    outline:none; border-color:#4a90d9; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.length-slider { display:flex; align-items:center; gap:10px; }

.length-slider input[type=range] { flex:1; }

.length-slider .val { font-weight:600; color:#4a90d9; min-width:50px; text-align:right; font-size:.9rem; }

.btn-block { width:100%; margin-bottom:8px; }

.btn-outline { background:transparent; color:#4a90d9; border:1px solid #4a90d9;  padding:8px 16px; font-size:.88rem; cursor:pointer; transition:all .2s; }

.btn-outline:hover { background:var(--primary-50); }

/* 右侧输出 */

.wz-tabs { display:flex; gap:4px; margin-bottom:12px; }

.wz-tab { padding:8px 16px; border:none;  cursor:pointer; font-size:.85rem;

    background:#f3f4f6; color:#666; transition:all .2s; }

.wz-tab.active { background:#4a90d9; color:var(--white); }

.wz-tab:disabled { opacity:.45; cursor:default; }

.wz-output { display:none; min-height:300px; }

.wz-output.active { display:block; }

.loading-box { text-align:center; padding:40px 20px; color:#888; }

.spinner { display:inline-block; width:24px; height:24px; border:3px solid #ddd;

    border-top-color:#4a90d9;  animation:spin .8s linear infinite; vertical-align:middle; margin-right:6px; }

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

.titles-grid { display:flex; flex-direction:column; gap:8px; }

.title-item { padding:12px 14px; border:2px solid #e5e7eb;  cursor:pointer;

    display:flex; align-items:flex-start; gap:10px; transition:all .2s; }

.title-item:hover { border-color:#4a90d9; background:var(--primary-50); }

.title-item.selected { border-color:var(--success); background:#f0fdf4; }

.title-num { background:#4a90d9; color:var(--white); width:22px; height:22px; 

    display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; flex-shrink:0; margin-top:1px; }

.title-item.selected .title-num { background:var(--success); }

.outlines-list { display:flex; flex-direction:column; gap:8px; }

.outline-item { padding:12px 14px; border:2px solid #e5e7eb;  cursor:pointer;

    display:flex; align-items:flex-start; gap:10px; transition:all .2s; }

.outline-item:hover { border-color:#4a90d9; background:var(--primary-50); }

.outline-item.selected { border-color:var(--success); background:#f0fdf4; }

.outline-num { background:#6366f1; color:var(--white); width:22px; height:22px; 

    display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; flex-shrink:0; margin-top:1px; }

.outline-item.selected .outline-num { background:var(--success); }

.outline-content { flex:1; font-size:.83rem; line-height:1.6; color:#374151; }

.outline-check { color:var(--success); opacity:0; font-size:1.1rem; }

.outline-item.selected .outline-check { opacity:1; }

.article-content { background:#f9fafb;  padding:16px; font-size:.88rem;

    line-height:1.9; color:#333; white-space:pre-wrap; word-break:break-word; }

.wz-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

.wz-actions .btn { flex:1; min-width:90px; }

.guide-hint { font-size:.8rem; color:#888; margin-bottom:10px; text-align:center; }

/* 热点话题列表 */

.hot-topics-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }

.hot-topic-item { padding:10px 14px; border:2px solid #e5e7eb;  cursor:pointer;

    display:flex; align-items:flex-start; gap:10px; transition:all .2s; font-size:.85rem; line-height:1.5; }

.hot-topic-item:hover { border-color:#4a90d9; background:var(--primary-50); }

.hot-topic-item.selected { border-color:var(--success); background:#f0fdf4; }

.hot-topic-num { background:#f59e0b; color:var(--white); width:22px; height:22px; 

    display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; flex-shrink:0; margin-top:1px; }

.hot-topic-item.selected .hot-topic-num { background:var(--success); }

.hot-topic-text { flex:1; color:#374151; }

/* Toast */

.wz-toast { position:fixed; bottom:60px; left:50%; transform:translateX(-50%);

    background:#333; color:var(--white); padding:9px 20px;  font-size:.84rem;

    z-index:9999; pointer-events:none; animation:fadeInOut 2.5s forwards; }

.wz-toast.success { background:var(--success); }

.wz-toast.error   { background:var(--danger); }

@keyframes fadeInOut { 0%{opacity:0;transform:translateX(-50%) translateY(6px)} 15%,80%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0} }

/* 覆盖 app-enhance.css 对 .wz-layout 的满铺规则，避免把左侧面板推出视口 */
.wz-layout {
  width:auto !important;
  position:static !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  display:grid !important;
  grid-template-columns:400px 1fr !important;
}
@media(max-width:900px){
  .wz-layout{ grid-template-columns:1fr !important; }
}