:root{--bg:#f4f6fa;--card:#fff;--border:#eaeef4;--border-strong:#dde3ec;--text:#0f172a;--text2:#475569;--text3:#94a3b8;--primary:#3b82f6;--primary-dark:#2563eb;--success:#10b981;--warn:#f59e0b;--danger:#ef4444;--purple:#8b5cf6;--radius:14px;--radius-sm:8px;--shadow-sm:0 1px 2px rgba(15,23,42,.04);--shadow:0 4px 16px rgba(15,23,42,.06)}
*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;transition:.2s}
button:disabled{opacity:.4;cursor:not-allowed}

/* ============ 顶部横幅广告 ============ */
.ad-top-banner{background:linear-gradient(90deg,#eef4ff 0%,#e8efff 50%,#f3efff 100%);border-bottom:1px solid #dbe4fb;position:relative;z-index:45;font-size:13px}
.ad-top-inner{max-width:1100px;margin:0 auto;padding:9px 56px 9px 20px;display:flex;align-items:center;justify-content:center;gap:22px;position:relative}
.ad-left{display:flex;align-items:center;gap:12px;min-width:0}
.ad-icon{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(59,130,246,.3)}
.ad-icon-blue{background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);box-shadow:0 4px 10px rgba(59,130,246,.3)}
.ad-text{display:flex;flex-direction:column;gap:2px;line-height:1.3;min-width:0}
.ad-title{font-size:13.5px;font-weight:700;color:#1e3a8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-title-blue{color:#1e3a8a}
.ad-sub{font-size:11.5px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-sub-blue{color:#475569}
.ad-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:7px 16px;border-radius:20px;background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;box-shadow:0 4px 12px rgba(59,130,246,.35);transition:.2s}
.ad-btn-blue{background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);box-shadow:0 4px 12px rgba(59,130,246,.35)}
.ad-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.45)}
.ad-btn-arrow{font-size:13px;transition:transform .2s}
.ad-btn:hover .ad-btn-arrow{transform:translateX(3px)}
.ad-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:rgba(59,130,246,.12);color:#3b82f6;font-size:16px;line-height:1;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;transition:.2s}
.ad-close:hover{background:rgba(59,130,246,.25)}

/* ============ 底部横幅广告 ============ */
.ad-bottom-banner{background:linear-gradient(90deg,#eef4ff 0%,#e8efff 50%,#f3efff 100%);border-top:1px solid #dbe4fb;border-bottom:1px solid #dbe4fb;margin-top:24px}
.ad-bottom-inner{max-width:1100px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;justify-content:center;gap:22px}

/* ============ 来访 IP 统计 ============ */
.visit-stats{background:#0f172a;color:#cbd5e1;padding:18px 20px;font-size:12.5px}
.visit-stats-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}
.vs-item{display:flex;align-items:center;gap:6px;padding:4px 18px;border-right:1px solid #334155;white-space:nowrap}
.vs-item:last-child{border-right:none}
.vs-label{color:#64748b;font-size:11.5px}
.vs-value{color:#e2e8f0;font-weight:600;font-variant-numeric:tabular-nums}
.vs-time .vs-value{color:#10b981}

/* ============ 顶部导航 ============ */
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:50;box-shadow:var(--shadow-sm)}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);display:flex;align-items:center;justify-content:center;font-size:20px}
.brand-title{font-size:16px;font-weight:700;white-space:nowrap}
.brand-sub{font-size:11px;color:var(--text3)}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-btn{padding:8px 14px;border-radius:9px;font-size:13px;font-weight:500;color:var(--text2);background:#f5f7fa;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.tb-btn:hover{background:#eef2f7;color:var(--text)}
.tb-btn.primary{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.28)}
.user-box{display:flex;align-items:center;gap:8px;padding-left:12px;margin-left:6px;border-left:1px solid var(--border)}
.user-name{font-size:13px;color:var(--text2);font-weight:500;text-decoration:none;padding:5px 8px;border-radius:7px;display:inline-flex;align-items:center;gap:4px}
.user-name:hover{background:#eef2ff;color:#3b82f6}
.user-upgrade{padding:7px 12px;border-radius:8px;background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);color:#fff;font-size:12.5px;font-weight:600;border:none;cursor:pointer;white-space:nowrap}
.user-vip{padding:6px 10px;border-radius:8px;background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.user-admin,.user-logout{padding:7px 10px;border-radius:8px;background:#f1f5f9;color:var(--text2);font-size:12.5px;font-weight:500;border:1px solid var(--border);cursor:pointer}
.user-admin:hover{background:#e2e8f0}
.user-logout:hover{background:#fee2e2;color:#dc2626}

/* ============ 主布局（撑满屏幕） ============ */
.main-grid{max-width:2200px;margin:20px auto;padding:0 20px;display:grid;grid-template-columns:360px minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.col-mid,.col-right{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.col-mid > .card,.col-right > .card{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* ============ 卡片 ============ */
.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-sm);overflow:hidden;transition:.25s}
.col-left .card{flex-shrink:0}
.card:hover{box-shadow:var(--shadow)}
.card-head{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:13.5px;font-weight:600;background:linear-gradient(180deg,#fbfcfe 0%,#f7f9fc 100%);border-bottom:1px solid var(--border);flex-shrink:0}
.card-head .arrow{font-size:11px;color:var(--text3);transition:transform .25s}
.card.collapsed .arrow{transform:rotate(-90deg)}
.card.collapsed .card-body{display:none}
.card-body{padding:14px 16px}

/* ============ 稿件管理 ============ */
.article-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;margin-left:4px;border-radius:10px;background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);color:#fff;font-size:10.5px;font-weight:700;line-height:1}
.article-list{max-height:200px;overflow-y:auto;padding:0;margin-bottom:12px;display:flex;flex-direction:column;gap:4px}
.article-empty{padding:26px 16px;text-align:center;color:var(--text3);font-size:12px;line-height:1.7;background:linear-gradient(180deg,#fbfcfe 0%,#f5f8fc 100%);border:1px dashed var(--border-strong);border-radius:10px}
.article-item{display:flex;align-items:center;gap:8px;padding:9px 8px 9px 14px;border-radius:9px;cursor:pointer;background:#fafbfd;border:1px solid transparent}
.article-item:hover{background:#f0f7ff;border-color:#dbeafe}
.article-item.active{background:linear-gradient(135deg,#eff6ff 0%,#f0f7ff 100%);border-color:#bfdbfe}
.article-item .art-info{flex:1;min-width:0}
.article-item .art-name{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.article-item.active .art-name{color:var(--primary);font-weight:600}
.article-item .art-meta{font-size:10.5px;color:var(--text3)}
.article-item .art-del{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text3);opacity:0;flex-shrink:0;cursor:pointer;border:none;background:transparent}
.article-item:hover .art-del{opacity:1}
.article-item .art-del:hover{background:#fee2e2;color:#dc2626}
.article-actions{display:grid;grid-template-columns:1fr 36px 36px;gap:6px}
.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;border:none;color:#fff;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)}
.action-btn-icon{width:36px;height:36px;border-radius:9px;background:#f1f5f9;color:var(--text2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer}
.action-btn-icon:hover{background:#e0f2fe;color:var(--primary)}

/* ============ 快捷语法 ============ */
.qs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qs-btn{padding:8px 4px;border:1px solid var(--border);border-radius:7px;background:#fafbfd;font-size:11px;color:var(--text2);text-align:center;cursor:pointer;white-space:nowrap}
.qs-btn:hover{background:#eff6ff;border-color:#bfdbfe;color:var(--primary)}

/* ============ 主题 ============ */
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.theme-btn{padding:8px 4px;border:2px solid var(--border);border-radius:9px;cursor:pointer;font-size:11px;text-align:center;background:#fff;color:var(--text2)}
.theme-btn.active{border-color:var(--primary);background:#f0f7ff;color:var(--primary);font-weight:600}
.theme-dot{display:block;width:18px;height:18px;border-radius:50%;margin:0 auto 4px}

/* ============ 颜色 ============ */
.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.color-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;background:#fafbfd;border:1px solid var(--border);border-radius:9px;font-size:11px;color:var(--text3)}
.color-item input[type=color]{width:44px;height:32px;border:none;border-radius:6px;cursor:pointer;background:transparent}

/* ============ 控件 ============ */
.ctrl{margin-bottom:12px}
.ctrl-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text2);margin-bottom:6px}
.ctrl-label .val{font-size:11px;color:var(--primary);font-weight:600;background:#eff6ff;padding:2px 7px;border-radius:10px}
.ctrl input[type=range]{width:100%;height:4px;border-radius:2px;background:#e2e8f0;-webkit-appearance:none;outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:grab}
.ctrl select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:12.5px;background:#fafbfd;outline:none}

/* ============ 按钮 ============ */
.btn{padding:8px 12px;border-radius:8px;font-size:12px;font-weight:500;color:#fff;background:var(--primary);cursor:pointer;border:none}
.btn.sm{padding:6px 10px;font-size:11.5px}
.btn.gray{background:#e2e8f0;color:var(--text2)}
.btn.warn{background:var(--warn)}

/* ============ 工具 ============ */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tool-grid + .tool-grid{margin-top:8px}
.tool-btn{height:40px;padding:0 8px;border-radius:9px;font-size:11.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;border:none;cursor:pointer;color:#fff;background:var(--primary)}
.tool-btn.gray{background:#f1f5f9;color:var(--text2);border:1px solid var(--border)}
.tool-btn.purple{background:var(--purple)}
.tool-btn.teal{background:#14b8a6}
.tool-btn.pink{background:#ec4899}
.tool-btn.warn{background:var(--warn)}
.tool-btn.dark{background:#475569}

/* ============ 编辑 / 预览 ============ */
.editor-tools{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--border);background:#fafbfd;flex-shrink:0}
#mdInput{flex:1;min-height:0;width:100%;padding:18px 20px;font-size:14.5px;line-height:1.75;border:none;outline:none;resize:none;color:var(--text);background:#fff;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
#preview{flex:1;min-height:0;padding:22px 26px;overflow-y:auto;background:#fff}
.editor-foot{flex-shrink:0;padding:10px 16px;border-top:1px solid var(--border);background:linear-gradient(180deg,#fafbfd 0%,#f6f8fb 100%);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--text3)}
.foot-item{display:inline-flex;align-items:center;gap:5px;padding:0 10px;border-right:1px solid var(--border-strong);white-space:nowrap}
.foot-item:last-child{border-right:none;padding-right:0}
.foot-item b{color:var(--primary);font-weight:700}

/* ============ 语法帮助 ============ */
.syntax-help{font-size:12px;line-height:1.9;color:var(--text2)}
.syntax-help code{display:inline-block;background:#f1f5f9;border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;color:#db2777;margin:1px 2px}

/* ============ 检查结果 ============ */
.check-result{padding:11px 14px;border-radius:8px;font-size:12.5px;line-height:1.7;margin-top:10px}
.check-ok{background:#ecfdf5;border-left:3px solid var(--success);color:#065f46}
.check-warn{background:#fffbeb;border-left:3px solid var(--warn);color:#78350f}
.check-err{background:#fef2f2;border-left:3px solid var(--danger);color:#7f1d1d}

/* ============ Toast ============ */
.toast{position:fixed;top:24px;left:50%;transform:translate(-50%,-30px);background:#0f172a;color:#fff;padding:11px 22px;border-radius:10px;font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:.28s;z-index:999999;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-success{background:var(--success)}
.toast-warn{background:var(--warn)}
.toast-error{background:var(--danger)}

/* ============ 升级弹窗 ============ */
.upgrade-modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:999999;align-items:center;justify-content:center;padding:20px}
.upgrade-modal.show{display:flex}
.upgrade-card{background:#fff;border-radius:18px;padding:28px 24px;max-width:420px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(15,23,42,.3)}
.upgrade-card .ico{width:64px;height:64px;margin:0 auto 14px;border-radius:16px;background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);display:flex;align-items:center;justify-content:center;font-size:32px}
.upgrade-card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:#0f172a}
.upgrade-card .sub{font-size:13.5px;color:#64748b;line-height:1.7;margin-bottom:16px}
.upgrade-card .price{font-size:28px;font-weight:800;color:#f59e0b;margin:10px 0 18px}
.upgrade-card .price small{font-size:14px;font-weight:500;color:#94a3b8;margin-left:4px}
.upgrade-btns{display:flex;gap:10px;flex-direction:column}
.upgrade-btn{padding:13px;border-radius:11px;font-size:14.5px;font-weight:600;border:none;cursor:pointer}
.upgrade-btn.primary{background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);color:#fff}
.upgrade-btn.gray{background:#f1f5f9;color:#475569}

/* ============ 手机预览弹窗 ============ */
.phone-modal{display:none;position:fixed;inset:0;z-index:9998;align-items:center;justify-content:center;padding:24px}
.phone-modal.show{display:flex}
.phone-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65)}
.phone-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%}
.phone-bar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:rgba(255,255,255,.12);border-radius:30px;color:#fff;font-size:13px}
.phone-bar .close{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;cursor:pointer}
.phone-bar .hint{opacity:.7;font-size:11.5px}
.phone-frame{position:relative;width:375px;height:720px;max-height:calc(100vh - 120px);background:#0f172a;border-radius:44px;padding:14px}
.phone-screen{width:100%;height:100%;background:#fff;border-radius:32px;overflow:auto;padding:32px 16px 24px}

/* ============ 响应式 ============ */
@media (max-width:1500px){
  .main-grid{grid-template-columns:340px minmax(0,1fr)}
  .col-right{grid-column:1 / -1}
}
@media (max-width:1100px){
  .main-grid{grid-template-columns:1fr;padding:0 12px}
  .brand-sub{display:none}
}
@media (max-width:760px){
  .ad-top-inner,.ad-bottom-inner{padding:8px 44px 8px 12px;gap:12px;flex-wrap:wrap;justify-content:flex-start}
  .ad-icon{width:28px;height:28px;font-size:15px;border-radius:8px}
  .ad-title{font-size:12.5px}
  .ad-sub{display:none}
  .ad-btn{padding:6px 12px;font-size:11.5px}
  .ad-close{right:8px;width:22px;height:22px;font-size:14px}
  .vs-item{padding:4px 10px;font-size:11.5px}
}.vs-icp{
  color:#e2e8f0;
  text-decoration:none;
  transition:.2s;
  border-bottom:1px dashed #475569;
}/* ============ 版权 & 备案行 ============ */
.copyright-bar{
  background:#0a0f1c;
  color:#64748b;
  text-align:center;
  padding:16px 20px;
  font-size:12px;
  line-height:1.8;
  border-top:1px solid #1e293b;
}
.icp-link{
  color:#94a3b8;
  text-decoration:none;
  transition:.2s;
  border-bottom:1px dashed #475569;
  padding-bottom:1px;
}
.icp-link:hover{
  color:#60a5fa;
  border-bottom-color:#60a5fa;
}
/* ============ 联系我们 ============ */
.contact-bar{
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  padding:22px 20px;
}
.contact-inner{
  max-width:1100px;
  margin:0 auto;
}
.contact-title{
  font-size:13.5px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:6px;
}
.contact-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px 20px;
}
.contact-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:#475569;
}
.ci-label{
  flex-shrink:0;
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  background:#e0e7ff;
  color:#3730a3;
  font-weight:600;
  font-size:11.5px;
}
.ci-value{ color:#0f172a; }
.ci-link{ color:#3b82f6; text-decoration:none; }
.ci-link:hover{ text-decoration:underline; }

/* ============ 版权 & 备案行 ============ */
.copyright-bar{
  background:#0a0f1c;
  color:#64748b;
  text-align:center;
  padding:16px 20px;
  font-size:12px;
  line-height:1.8;
  border-top:1px solid #1e293b;
}
.icp-link{
  color:#94a3b8;
  text-decoration:none;
  transition:.2s;
  border-bottom:1px dashed #475569;
  padding-bottom:1px;
}
.icp-link:hover{
  color:#60a5fa;
  border-bottom-color:#60a5fa;
}

@media (max-width:760px){
  .contact-list{ grid-template-columns:1fr; }
}
/* ============ 快速模板按钮 ============ */
.tb-btn-tpl{
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(249,115,22,.3);
}
.tb-btn-tpl:hover{ filter:brightness(1.06); color:#fff; }

/* ============ 快速模板弹窗 ============ */
.tpl-modal{display:none;position:fixed;inset:0;z-index:99997;align-items:center;justify-content:center;padding:24px}
.tpl-modal.show{display:flex}
.tpl-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65)}
.tpl-wrap{
  position:relative;z-index:1;
  background:#fff;border-radius:18px;
  width:100%;max-width:960px;max-height:88vh;
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(15,23,42,.3);
  overflow:hidden;
}
.tpl-head{
  padding:20px 24px;border-bottom:1px solid #eaeef4;
  display:flex;align-items:flex-start;justify-content:space-between;
  background:linear-gradient(180deg,#fbfcfe 0%,#f7f9fc 100%);
}
.tpl-title{font-size:17px;font-weight:700;color:#0f172a}
.tpl-sub{font-size:12.5px;color:#94a3b8;margin-top:4px}
.tpl-close{
  width:32px;height:32px;border-radius:50%;
  background:#f1f5f9;color:#64748b;
  font-size:18px;line-height:1;cursor:pointer;border:none;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;flex-shrink:0;
}
.tpl-close:hover{background:#e2e8f0;color:#0f172a}

.tpl-body{flex:1;overflow-y:auto;padding:20px 24px}
.tpl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;
}
.tpl-card{
  background:#fff;border:1.5px solid #eaeef4;border-radius:14px;
  padding:18px 16px;cursor:pointer;transition:.22s;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.tpl-card:hover{
  border-color:#3b82f6;
  background:linear-gradient(180deg,#f8fbff 0%,#eff6ff 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(59,130,246,.15);
}
.tpl-card-icon{
  width:48px;height:48px;border-radius:13px;
  background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:10px;
}
.tpl-card-name{font-size:14.5px;font-weight:700;color:#0f172a;margin-bottom:3px}
.tpl-card-desc{font-size:11.5px;color:#94a3b8;line-height:1.4;min-height:32px}
.tpl-card-btn{
  margin-top:12px;font-size:12px;color:#3b82f6;font-weight:600;
  opacity:0;transition:.2s;
}
.tpl-card:hover .tpl-card-btn{opacity:1}

.tpl-foot{
  padding:14px 24px;border-top:1px solid #eaeef4;
  background:#fafbfd;font-size:12px;color:#64748b;text-align:center;
}

@media (max-width:760px){
  .tpl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .tpl-card{padding:14px 10px}
  .tpl-card-icon{width:40px;height:40px;font-size:20px}
  .tpl-card-name{font-size:13px}
  .tpl-card-desc{display:none}
}
/* ============ 稿件管理卡片里的"快速模板"按钮 ============ */
.card-tpl-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  border-radius:20px;
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);
  color:#fff;
  font-size:11.5px;
  font-weight:600;
  border:none;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(249,115,22,.3);
  transition:.2s;
  white-space:nowrap;
  font-family:inherit;
}
.card-tpl-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(249,115,22,.45);
  filter:brightness(1.04);
}
.card-tpl-btn:active{ transform:translateY(0); }
/* ============ 游客状态栏 ============ */
.user-guest-tip{
  font-size:12.5px;
  color:#94a3b8;
  padding:5px 8px;
}
.user-login-btn{
  padding:7px 14px;
  border-radius:8px;
  background:#f1f5f9;
  color:#475569;
  font-size:12.5px;
  font-weight:600;
  border:1px solid #e2e8f0;
  cursor:pointer;
  transition:.2s;
}
.user-login-btn:hover{ background:#e2e8f0; color:#0f172a; }
.user-register-btn{
  padding:7px 14px;
  border-radius:8px;
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(59,130,246,.3);
  transition:.2s;
}
.user-register-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* ============ 游客引导弹窗 ============ */
.guest-modal{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.7);
  z-index:999999;
  align-items:center;justify-content:center;
  padding:20px;
  animation:fadeIn .2s;
}
.guest-modal.show{ display:flex; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.guest-card{
  background:#fff;border-radius:20px;
  padding:32px 28px;
  max-width:460px;width:100%;
  text-align:center;
  box-shadow:0 32px 80px rgba(15,23,42,.35);
  animation:popIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{ from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }

.guest-ico{
  width:76px;height:76px;
  margin:0 auto 16px;
  border-radius:20px;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:38px;
  box-shadow:0 8px 24px rgba(251,191,36,.4);
}
.guest-title{
  font-size:19px;font-weight:700;
  color:#0f172a;margin-bottom:10px;
  line-height:1.4;
}
.guest-sub{
  font-size:13.5px;color:#64748b;
  line-height:1.7;margin-bottom:20px;
}
.guest-sub b{ color:#3b82f6; }

.guest-benefits{
  background:#f8fafc;
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:18px;
  text-align:left;
}
.guest-benefit{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:#475569;
  line-height:1.6;
  padding:6px 0;
}
.guest-benefit + .guest-benefit{
  border-top:1px dashed #e2e8f0;
  margin-top:6px;
  padding-top:10px;
}
.guest-benefit .gb-ico{
  font-size:16px;line-height:1;flex-shrink:0;
  margin-top:1px;
}
.guest-benefit b{ color:#0f172a;font-weight:700; }

.guest-price{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:12px 0 20px;
  border-top:1px dashed #e2e8f0;
}
.gp-label{
  font-size:12px;color:#94a3b8;
}
.gp-num{
  font-size:24px;font-weight:800;
  color:#f59e0b;
}
.gp-num small{
  font-size:13px;font-weight:500;
  color:#94a3b8;margin-left:2px;
}

.guest-btns{
  display:flex;flex-direction:column;gap:10px;
}
.guest-btn{
  padding:13px 20px;
  border-radius:11px;
  font-size:14px;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
}
.guest-btn.primary{
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  color:#fff;
  box-shadow:0 6px 20px rgba(59,130,246,.4);
}
.guest-btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(59,130,246,.5);
}
.guest-btn.secondary{
  background:#eff6ff;
  color:#3b82f6;
  border:1.5px solid #bfdbfe;
}
.guest-btn.secondary:hover{ background:#dbeafe; }
.guest-btn.gray{
  background:#f8fafc;
  color:#94a3b8;
  font-size:13px;
  padding:10px 16px;
}
.guest-btn.gray:hover{ background:#f1f5f9;color:#64748b; }

/* 手机端 */
@media (max-width:560px){
  .guest-card{ padding:24px 20px; }
  .guest-title{ font-size:17px; }
  .guest-ico{ width:64px;height:64px;font-size:32px;margin-bottom:12px; }
}
/* ============ 快速模板按钮 ============ */
.card-tpl-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  border-radius:20px;
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);
  color:#fff;
  font-size:11.5px;
  font-weight:600;
  border:none;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(249,115,22,.3);
  transition:.2s;
  white-space:nowrap;
  font-family:inherit;
}
.card-tpl-btn:hover{ transform:translateY(-1px); box-shadow:0 5px 12px rgba(249,115,22,.45); }
.card-tpl-btn-blue{
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  box-shadow:0 3px 8px rgba(59,130,246,.3);
}
.card-tpl-btn-blue:hover{ box-shadow:0 5px 12px rgba(59,130,246,.45); }

/* ============ 我的模板列表 ============ */
.my-tpl-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
  max-height:200px;
  overflow-y:auto;
}
.my-tpl-empty{
  padding:22px 12px;
  text-align:center;
  color:#94a3b8;
  font-size:12px;
  line-height:1.7;
  background:linear-gradient(180deg,#fbfcfe 0%,#f5f8fc 100%);
  border:1px dashed #dde3ec;
  border-radius:10px;
}
.my-tpl-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px 9px 12px;
  border-radius:9px;
  background:#fafbfd;
  border:1px solid transparent;
  cursor:pointer;
  transition:.15s;
}
.my-tpl-item:hover{
  background:#f0f7ff;
  border-color:#dbeafe;
}
.my-tpl-item .my-tpl-name{
  flex:1;
  font-size:12.5px;
  color:#0f172a;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.my-tpl-item .my-tpl-del{
  width:20px;
  height:20px;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:#94a3b8;
  opacity:0;
  cursor:pointer;
  border:none;
  background:transparent;
  transition:.15s;
}
.my-tpl-item:hover .my-tpl-del{ opacity:1; }
.my-tpl-item .my-tpl-del:hover{ background:#fee2e2;color:#dc2626; }

.my-tpl-actions{ margin-top:6px; }
.action-btn-gray{
  width:100%;
  height:36px;
  border-radius:9px;
  background:#f1f5f9;
  color:#475569;
  border:1px solid #eaeef4;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  transition:.15s;
}
.action-btn-gray:hover{ background:#e2e8f0; color:#0f172a; }

/* ============ 模板弹窗（美工版） ============ */
.tpl-modal{display:none;position:fixed;inset:0;z-index:99997;align-items:center;justify-content:center;padding:24px}
.tpl-modal.show{display:flex}
.tpl-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(4px)}
.tpl-wrap{
  position:relative;z-index:1;
  background:#fff;border-radius:20px;
  width:100%;max-width:1080px;max-height:90vh;
  display:flex;flex-direction:column;
  box-shadow:0 32px 80px rgba(15,23,42,.35);
  overflow:hidden;
}
.tpl-head{
  padding:22px 28px 16px;border-bottom:1px solid #eaeef4;
  display:flex;align-items:flex-start;justify-content:space-between;
  background:linear-gradient(135deg,#f8fbff 0%,#eff6ff 100%);
}
.tpl-head-left{flex:1;min-width:0}
.tpl-head-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tpl-title{font-size:18px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:6px}
.tpl-sub{font-size:13px;color:#64748b;margin-top:5px;line-height:1.5}
.tpl-tab-btn{
  padding:7px 14px;
  border-radius:20px;
  background:#fff;
  border:1.5px solid #bfdbfe;
  color:#3b82f6;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}
.tpl-tab-btn:hover{ background:#eff6ff; }
.tpl-tab-btn.active{ background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%); color:#fff; border-color:transparent; }
.tpl-close{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);
  color:#64748b;font-size:20px;line-height:1;cursor:pointer;border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;
}
.tpl-close:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca;transform:rotate(90deg)}

/* 分类 Tab */
.tpl-cats{
  display:flex;align-items:center;gap:6px;
  padding:14px 28px;border-bottom:1px solid #eaeef4;
  background:#fff;overflow-x:auto;
}
.tpl-cat{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:20px;
  background:#f8fafc;border:1.5px solid transparent;
  font-size:13px;color:#64748b;font-weight:500;
  cursor:pointer;transition:.2s;white-space:nowrap;
}
.tpl-cat:hover{background:#eff6ff;color:#3b82f6}
.tpl-cat.active{
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(59,130,246,.3);
}

/* 主体 */
.tpl-body{flex:1;overflow-y:auto;padding:22px 28px}
.tpl-group{display:none}
.tpl-group.active{display:block;animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.tpl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.tpl-card{
  background:#fff;border:1.5px solid #eaeef4;border-radius:16px;
  overflow:hidden;cursor:pointer;transition:.25s;
  display:flex;flex-direction:column;
}
.tpl-card:hover{
  border-color:#3b82f6;
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(59,130,246,.15);
}
.tpl-card-thumb{
  height:100px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.tpl-card-emoji{font-size:42px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.08))}
.tpl-hot-tag{
  position:absolute;top:8px;right:8px;
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  color:#fff;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:10px;
  box-shadow:0 3px 8px rgba(239,68,68,.4);
}
.tpl-card-info{padding:14px 14px 8px}
.tpl-card-name{font-size:14.5px;font-weight:700;color:#0f172a;margin-bottom:3px}
.tpl-card-desc{font-size:11.5px;color:#94a3b8;line-height:1.4;min-height:16px}
.tpl-card-use{
  margin:8px 14px 14px;
  padding:8px 0;
  text-align:center;
  font-size:12px;color:#3b82f6;font-weight:600;
  border-radius:8px;
  background:#eff6ff;
  transition:.2s;
}
.tpl-card:hover .tpl-card-use{
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  color:#fff;
}

/* 我的模板空状态 */
.tpl-empty-mine{
  padding:60px 24px;text-align:center;
}
.tpl-empty-ico{font-size:56px;line-height:1;margin-bottom:16px;opacity:.5}
.tpl-empty-title{font-size:15px;font-weight:700;color:#475569;margin-bottom:8px}
.tpl-empty-desc{font-size:12.5px;color:#94a3b8;line-height:1.7}
.tpl-empty{padding:60px;text-align:center;color:#94a3b8;font-size:13px}

/* 底部 */
.tpl-foot{
  padding:14px 28px;border-top:1px solid #eaeef4;
  background:linear-gradient(180deg,#fafbfd 0%,#f6f8fb 100%);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.tpl-foot-tip{font-size:12px;color:#64748b}
.tpl-foot-tip b{color:#0f172a}
.tpl-foot-btn{
  padding:8px 16px;border-radius:9px;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#fff;font-size:12.5px;font-weight:600;
  border:none;cursor:pointer;transition:.2s;
  box-shadow:0 3px 8px rgba(16,185,129,.3);
}
.tpl-foot-btn:hover{ transform:translateY(-1px); box-shadow:0 5px 12px rgba(16,185,129,.45); }

/* 手机端 */
@media (max-width:760px){
  .tpl-wrap{max-height:95vh;border-radius:16px}
  .tpl-head{padding:16px 18px 12px}
  .tpl-cats{padding:10px 18px;gap:4px}
  .tpl-cat{padding:6px 12px;font-size:12px}
  .tpl-body{padding:16px 18px}
  .tpl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .tpl-card-thumb{height:80px}
  .tpl-card-emoji{font-size:34px}
  .tpl-card-info{padding:10px 10px 6px}
  .tpl-card-name{font-size:13px}
  .tpl-card-desc{display:none}
  .tpl-card-use{margin:6px 10px 10px;padding:6px 0;font-size:11.5px}
  .tpl-foot{padding:12px 18px}
  .tpl-foot-tip{font-size:11px;flex:1;min-width:100%}
}
/* ============ 我的内容：Tab 切换 ============ */
.my-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  background:#f1f5f9;
  border-radius:10px;
  margin-bottom:12px;
}
.my-tab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px 10px;
  border-radius:7px;
  font-size:12.5px;
  font-weight:600;
  color:#64748b;
  cursor:pointer;
  transition:.2s;
  user-select:none;
}
.my-tab:hover{ color:#0f172a; }
.my-tab.active{
  background:#fff;
  color:#3b82f6;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
}
.my-tab-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:#e2e8f0;
  color:#64748b;
  font-size:10.5px;
  font-weight:700;
  line-height:1;
}
.my-tab.active .my-tab-count{
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  color:#fff;
}
.my-panel{ display:none; }
.my-panel.active{ display:block; animation:fadeIn .2s; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
/* ============ 工具栏分组 ============ */
.tb-group{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  background:#f8fafc;
  border-radius:10px;
  border:1px solid #eaeef4;
}
.tb-group-label{
  font-size:10.5px;
  color:#94a3b8;
  font-weight:700;
  letter-spacing:.5px;
  margin-right:2px;
}

/* ============ 帮助弹窗 ============ */
.help-modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.65);z-index:999998;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.help-modal.show{display:flex}
.help-card{background:#fff;border-radius:18px;max-width:600px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(15,23,42,.35);animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.help-head{padding:20px 24px;border-bottom:1px solid #eaeef4;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f8fbff 0%,#eff6ff 100%)}
.help-title{font-size:17px;font-weight:700;color:#0f172a}
.help-close{width:32px;height:32px;border-radius:50%;background:#fff;color:#64748b;font-size:18px;line-height:1;cursor:pointer;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;transition:.2s}
.help-close:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca;transform:rotate(90deg)}
.help-body{flex:1;overflow-y:auto;padding:20px 24px}
.help-section{margin-bottom:22px}
.help-section:last-child{margin-bottom:0}
.help-section-title{font-size:13px;font-weight:700;color:#0f172a;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f1f5f9}
.help-kbd-list{display:flex;flex-direction:column;gap:8px}
.help-kbd-item{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#475569;padding:8px 12px;background:#f8fafc;border-radius:8px}
.help-kbd-item kbd{display:inline-block;padding:2px 7px;background:#fff;border:1px solid #dde3ec;border-radius:5px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#334155;box-shadow:0 1px 0 #dde3ec;margin:0 1px}
.help-steps{display:flex;flex-direction:column;gap:12px}
.help-step{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.7;color:#475569}
.help-step b{color:#0f172a}
.hs-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(59,130,246,.3)}
.help-syntax{display:flex;flex-wrap:wrap;gap:6px}
.help-syntax code{display:inline-block;background:#f1f5f9;border:1px solid #eaeef4;border-radius:5px;padding:3px 8px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#db2777}

/* ============ AI 弹窗 ============ */
.ai-modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.65);z-index:999998;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.ai-modal.show{display:flex}
.ai-card{background:#fff;border-radius:18px;max-width:640px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(15,23,42,.35);animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
.ai-head{padding:20px 24px;border-bottom:1px solid #eaeef4;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f3e8ff 0%,#e9d5ff 100%)}
.ai-title{font-size:17px;font-weight:700;color:#0f172a}
.ai-close{width:32px;height:32px;border-radius:50%;background:#fff;color:#64748b;font-size:18px;cursor:pointer;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;transition:.2s}
.ai-close:hover{background:#fee2e2;color:#dc2626;transform:rotate(90deg)}
.ai-body{padding:20px 24px;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.ai-hint{font-size:13px;color:#64748b;line-height:1.7;background:#faf5ff;padding:10px 14px;border-radius:8px;border-left:3px solid #8b5cf6}
.ai-textarea{flex:1;min-height:220px;padding:14px;border:1.5px solid #eaeef4;border-radius:10px;font-size:13.5px;line-height:1.7;resize:vertical;outline:none;font-family:inherit;background:#fafbfd;transition:.2s}
.ai-textarea:focus{border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 4px rgba(139,92,246,.1)}
.ai-actions{display:flex;gap:10px;justify-content:flex-end}
.ai-btn{padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:600;border:none;cursor:pointer;transition:.2s;font-family:inherit}
.ai-btn.primary{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);color:#fff;box-shadow:0 4px 12px rgba(139,92,246,.3)}
.ai-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(139,92,246,.4)}
.ai-btn.primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ai-btn.gray{background:#f1f5f9;color:#475569}
.ai-btn.gray:hover{background:#e2e8f0}

@media (max-width:760px){
  .tb-group-label{display:none}
  .tb-group{padding:3px 6px}
}
/* ============ 编辑器：背景语法提示 ============ */
.editor-wrap{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
}
.editor-hint{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:18px 20px;
  pointer-events:none;   /* 不响应鼠标，不挡输入 */
  user-select:none;
  z-index:0;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12.5px;
  line-height:1.9;
  color:transparent;
  overflow:hidden;
}
.editor-hint .hint-title{
  font-size:13px;
  font-weight:700;
  color:transparent;
  margin-bottom:10px;
}
.editor-hint .hint-line{
  color:transparent;
  margin-bottom:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.editor-hint code{
  display:inline-block;
  background:transparent;
  color:transparent;
  padding:0 4px;
  margin-right:6px;
}

/* 当 textarea 为空时，背景提示"显现"（通过 textarea 透明 + 背景层显现） */
#mdInput{
  position:relative;
  z-index:1;
  background:transparent !important;   /* 让编辑器背景透明，露出 hint 层 */
}

/* 真正想"以背景显示"时的样式 —— 用滤镜让提示很淡 */
#mdInput:placeholder-shown ~ .editor-hint{
  /* 空的时候 */
}
/* ============ 编辑器：语法提示水印 ============ */
.editor-wrap{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  overflow:hidden;
}

/* 水印层：绝对定位，不接收鼠标，颜色极淡 */
.editor-hint{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  padding:22px 24px;
  pointer-events:none;
  user-select:none;
  z-index:0;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12.5px;
  line-height:1.95;
  color:#c7d2e0;          /* 很淡的灰蓝 */
  overflow:hidden;
  white-space:pre-wrap;
}
.editor-hint .hint-title{
  font-size:12.5px;
  font-weight:700;
  color:#b8c3d6;
  margin-bottom:10px;
}
.editor-hint code{
  display:inline-block;
  background:transparent;
  color:#c7d2e0;
  padding:0;
  margin-right:8px;
}
/* ============ 顶部栏：logo 和用户区同行 ============ */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  background:#fff;
  border-bottom:1px solid #eaeef4;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  position:sticky;
  top:0;
  z-index:50;
  flex-wrap:wrap;
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* ============ 功能工具栏：独立一行 ============ */
.toolbar-row{
  background:#fafbfd;
  border-bottom:1px solid #eaeef4;
  padding:8px 24px;
  position:sticky;
  top:65px;   /* 顶栏高度，可视情况调 */
  z-index:49;
}
.toolbar-inner{
  max-width:2200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
/* ============ 全局：去掉链接下划线 ============ */
.topbar a,
.topbar-actions a,
.user-box a,
.user-name,
.user-login-btn,
.user-register-btn{
  text-decoration:none !important;
}
.user-name:hover,
.user-login-btn:hover,
.user-register-btn:hover{
  text-decoration:none !important;
}

/* ============ 顶部栏布局 ============ */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  background:#fff;
  border-bottom:1px solid #eaeef4;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  position:sticky;
  top:0;
  z-index:50;
  flex-wrap:nowrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:nowrap;
}

/* ============ 功能工具栏 ============ */
.toolbar-row{
  background:#fafbfd;
  border-bottom:1px solid #eaeef4;
  padding:8px 24px;
  position:sticky;
  top:65px;
  z-index:49;
}
.toolbar-inner{
  max-width:2200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
/* ============================================================
   顶部栏 & 工具栏
   ============================================================ */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 24px;
  background:#fff;
  border-bottom:1px solid #eaeef4;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  position:sticky;
  top:0;
  z-index:50;
  flex-wrap:nowrap;
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}
.brand-logo{
  width:40px;height:40px;border-radius:11px;
  background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(59,130,246,.28);
}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-title{font-size:16px;font-weight:700;color:#0f172a;white-space:nowrap;line-height:1.2}
.brand-sub{font-size:11px;color:#94a3b8;white-space:nowrap;line-height:1.2}

.topbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:nowrap}
.user-box{
  display:flex;align-items:center;gap:8px;
  padding-left:14px;margin-left:4px;border-left:1px solid #eaeef4;
  flex-wrap:nowrap;
}
.user-guest-tip{font-size:12.5px;color:#94a3b8;padding:5px 4px;white-space:nowrap}
.user-login-btn{
  padding:8px 16px;border-radius:10px;background:#f1f5f9;color:#475569;
  font-size:13px;font-weight:600;border:1px solid #e2e8f0;cursor:pointer;
  transition:.2s;text-decoration:none;white-space:nowrap;font-family:inherit;
}
.user-login-btn:hover{background:#e2e8f0;color:#0f172a}
.user-register-btn{
  padding:8px 16px;border-radius:10px;
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer;
  transition:.2s;text-decoration:none;white-space:nowrap;font-family:inherit;
  box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.user-register-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.4)}
.user-name{
  font-size:13px;color:#475569;font-weight:600;text-decoration:none;
  padding:6px 10px;border-radius:8px;white-space:nowrap;transition:.2s;
}
.user-name:hover{background:#eef2ff;color:#3b82f6}
.user-upgrade{
  padding:8px 14px;border-radius:10px;
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);
  color:#fff;font-size:12.5px;font-weight:600;border:none;cursor:pointer;
  white-space:nowrap;font-family:inherit;
  box-shadow:0 4px 12px rgba(249,115,22,.28);
}
.user-vip{
  padding:7px 12px;border-radius:10px;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  color:#fff;font-size:12px;font-weight:700;white-space:nowrap;
}
.user-admin,.user-logout{
  padding:8px 12px;border-radius:10px;background:#f1f5f9;color:#475569;
  font-size:12.5px;font-weight:600;border:1px solid #eaeef4;cursor:pointer;
  white-space:nowrap;font-family:inherit;transition:.2s;
}
.user-admin:hover{background:#e2e8f0;color:#0f172a}
.user-logout:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}

.toolbar-row{
  background:linear-gradient(180deg,#fafbfd 0%,#f6f8fb 100%);
  border-bottom:1px solid #eaeef4;
  padding:10px 24px;
  position:sticky;
  top:65px;
  z-index:49;
  box-shadow:0 1px 2px rgba(15,23,42,.02);
}
.toolbar-inner{
  max-width:2200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.tb-group{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;background:#fff;border-radius:11px;
  border:1px solid #eaeef4;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.tb-group-primary{
  border-color:#dbeafe;
  background:linear-gradient(180deg,#f8fbff 0%,#eff6ff 100%);
}
.tb-group-label{
  font-size:10.5px;color:#94a3b8;font-weight:700;letter-spacing:.5px;
  padding-right:4px;border-right:1px solid #eaeef4;margin-right:4px;
  text-transform:uppercase;
}
.tb-btn{
  padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:#475569;background:transparent;border:none;cursor:pointer;
  transition:.2s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;font-family:inherit;
}
.tb-btn:hover{background:#f1f5f9;color:#0f172a}
.tb-btn.primary{
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
  color:#fff;
  box-shadow:0 3px 10px rgba(59,130,246,.3);
}
.tb-btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(59,130,246,.4);
}
/* ============ 强制显示品牌 logo ============ */
.topbar .brand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}
.topbar .brand-logo {
  display: flex !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%) !important;
  color: #fff !important;
  border-radius: 11px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}
.topbar .brand-text,
.topbar .brand-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.topbar .brand-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}
/* ============================================================
   顶栏（简化版：logo + 汉堡菜单）
   ============================================================ */
.topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:12px 20px !important;
  background:#fff !important;
  border-bottom:1px solid #eaeef4 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  flex-wrap:nowrap !important;
}
.brand{display:flex !important;align-items:center !important;gap:12px !important;flex:1 1 auto !important;min-width:0 !important}
.brand-logo{
  width:40px !important;height:40px !important;min-width:40px !important;flex-shrink:0 !important;
  border-radius:11px !important;
  background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%) !important;
  color:#fff !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:20px !important;
  box-shadow:0 4px 12px rgba(59,130,246,.28) !important;
}
.brand-text{display:flex !important;flex-direction:column !important;gap:2px !important;min-width:0 !important}
.brand-title{font-size:16px !important;font-weight:700 !important;color:#0f172a !important;white-space:nowrap !important;line-height:1.2 !important}
.brand-sub{font-size:11px !important;color:#94a3b8 !important;white-space:nowrap !important;line-height:1.2 !important}

.topbar-right{display:flex !important;align-items:center !important;gap:10px !important;flex:0 0 auto !important}
.topbar-user{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  padding:6px 12px !important;border-radius:20px !important;
  background:#f1f5f9 !important;color:#475569 !important;
  font-size:13px !important;font-weight:600 !important;
  text-decoration:none !important;white-space:nowrap !important;
  transition:.2s !important;
}
.topbar-user:hover{background:#e2e8f0 !important;color:#0f172a !important}
.topbar-user-icon{font-size:14px !important}
.topbar-user-name{max-width:90px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
.topbar-vip{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:26px !important;height:26px !important;border-radius:50% !important;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%) !important;
  font-size:13px !important;
}

/* ============================================================
   汉堡菜单按钮
   ============================================================ */
.hamburger-btn{
  width:42px !important;
  height:42px !important;
  border-radius:11px !important;
  background:#f8fafc !important;
  border:1px solid #eaeef4 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  cursor:pointer !important;
  transition:.2s !important;
  padding:0 !important;
  flex-shrink:0 !important;
}
.hamburger-btn:hover{background:#eff6ff !important;border-color:#bfdbfe !important}
.hamburger-btn span{
  display:block !important;
  width:18px !important;
  height:2px !important;
  background:#475569 !important;
  border-radius:2px !important;
  transition:.2s !important;
}
.hamburger-btn:hover span{background:#3b82f6 !important}

/* ============================================================
   抽屉菜单
   ============================================================ */
.drawer-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.5) !important;
  z-index:998 !important;
  opacity:0 !important;
  visibility:hidden !important;
  transition:.3s !important;
  backdrop-filter:blur(2px) !important;
}
.drawer-overlay.show{
  opacity:1 !important;
  visibility:visible !important;
}

.drawer{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:360px !important;
  max-width:92vw !important;
  background:#fff !important;
  z-index:999 !important;
  box-shadow:-8px 0 32px rgba(15,23,42,.15) !important;
  transform:translateX(100%) !important;
  transition:transform .3s cubic-bezier(.4,0,.2,1) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.drawer.show{transform:translateX(0) !important}

.drawer-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:16px 20px !important;
  border-bottom:1px solid #eaeef4 !important;
  background:linear-gradient(135deg,#f8fbff 0%,#eff6ff 100%) !important;
  flex-shrink:0 !important;
}
.drawer-brand{display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important}
.drawer-brand .brand-logo{width:36px !important;height:36px !important;min-width:36px !important;font-size:18px !important;border-radius:10px !important}
.drawer-brand .brand-title{font-size:14px !important}
.drawer-brand .brand-sub{font-size:10.5px !important}

.drawer-close{
  width:32px !important;height:32px !important;border-radius:50% !important;
  background:#fff !important;color:#64748b !important;
  font-size:18px !important;line-height:1 !important;
  cursor:pointer !important;border:1px solid #e2e8f0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  transition:.2s !important;flex-shrink:0 !important;
  padding:0 !important;
}
.drawer-close:hover{background:#fee2e2 !important;color:#dc2626 !important;border-color:#fecaca !important}

.drawer-body{
  flex:1 !important;
  overflow-y:auto !important;
  padding:16px 16px 24px !important;
  -webkit-overflow-scrolling:touch !important;
}

/* 用户区 */
.drawer-section{margin-bottom:20px !important}
.drawer-section:last-child{margin-bottom:0 !important}
.drawer-section-title{
  font-size:11px !important;
  color:#94a3b8 !important;
  font-weight:700 !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  padding:0 8px 8px !important;
}

/* 游客 */
.drawer-user-guest{
  display:flex !important;align-items:center !important;gap:12px !important;
  padding:14px !important;border-radius:12px !important;
  background:linear-gradient(135deg,#eff6ff 0%,#f3e8ff 100%) !important;
  margin-bottom:12px !important;
}
.drawer-guest-icon{font-size:28px !important;line-height:1 !important}
.drawer-guest-title{font-size:14px !important;font-weight:700 !important;color:#0f172a !important}
.drawer-guest-sub{font-size:11.5px !important;color:#64748b !important;line-height:1.4 !important;margin-top:2px !important}

.drawer-user-actions{display:flex !important;flex-direction:column !important;gap:8px !important}

.drawer-btn-primary{
  width:100% !important;
  padding:12px !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:600 !important;
  border:none !important;
  cursor:pointer !important;
  box-shadow:0 4px 12px rgba(59,130,246,.3) !important;
  font-family:inherit !important;
  transition:.2s !important;
}
.drawer-btn-primary:hover{transform:translateY(-1px) !important}

.drawer-btn-secondary{
  width:100% !important;
  padding:11px !important;
  border-radius:10px !important;
  background:#f1f5f9 !important;
  color:#475569 !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  border:1px solid #e2e8f0 !important;
  cursor:pointer !important;
  font-family:inherit !important;
  transition:.2s !important;
  text-align:center !important;
  text-decoration:none !important;
}
.drawer-btn-secondary:hover{background:#e2e8f0 !important;color:#0f172a !important}

.drawer-btn-upgrade{
  width:100% !important;
  padding:12px !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:600 !important;
  border:none !important;
  cursor:pointer !important;
  font-family:inherit !important;
  box-shadow:0 4px 12px rgba(249,115,22,.3) !important;
  margin-bottom:8px !important;
}

.drawer-btn-danger{
  width:100% !important;
  padding:11px !important;
  border-radius:10px !important;
  background:#fef2f2 !important;
  color:#dc2626 !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  border:1px solid #fecaca !important;
  cursor:pointer !important;
  font-family:inherit !important;
  transition:.2s !important;
}
.drawer-btn-danger:hover{background:#fee2e2 !important}

/* 已登录用户信息 */
.drawer-user-info{
  display:flex !important;align-items:center !important;gap:12px !important;
  padding:14px !important;border-radius:12px !important;
  background:#f8fafc !important;
  margin-bottom:12px !important;
}
.drawer-user-avatar{
  width:48px !important;height:48px !important;border-radius:14px !important;
  background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%) !important;
  color:#fff !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:20px !important;font-weight:700 !important;
  flex-shrink:0 !important;
}
.drawer-user-meta{flex:1 !important;min-width:0 !important}
.drawer-user-name{font-size:15px !important;font-weight:700 !important;color:#0f172a !important}
.drawer-user-role{margin-top:4px !important}
.role-badge{
  display:inline-block !important;
  padding:2px 8px !important;
  border-radius:10px !important;
  font-size:11px !important;
  font-weight:600 !important;
}
.role-admin{background:#eff6ff !important;color:#2563eb !important}
.role-member{background:#fef3c7 !important;color:#92400e !important}
.role-free{background:#f1f5f9 !important;color:#64748b !important}

/* 菜单列表 */
.drawer-list{display:flex !important;flex-direction:column !important;gap:2px !important}
.drawer-item{
  display:flex !important;align-items:center !important;gap:12px !important;
  padding:12px 14px !important;
  border-radius:10px !important;
  font-size:14px !important;
  color:#475569 !important;
  font-weight:500 !important;
  cursor:pointer !important;
  transition:.15s !important;
  text-decoration:none !important;
}
.drawer-item:hover{background:#eff6ff !important;color:#3b82f6 !important}
.drawer-item .di-icon{font-size:18px !important;flex-shrink:0 !important;width:22px !important;text-align:center !important}
.drawer-item .di-text{flex:1 !important;min-width:0 !important}
.drawer-item .di-arrow{font-size:18px !important;color:#cbd5e1 !important;flex-shrink:0 !important}
.drawer-item:hover .di-arrow{color:#3b82f6 !important}
.drawer-item .di-badge{
  flex-shrink:0 !important;
  padding:2px 8px !important;
  border-radius:8px !important;
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:700 !important;
}

/* 抽屉底部 */
.drawer-foot{
  padding:16px 20px !important;
  text-align:center !important;
  font-size:11.5px !important;
  color:#94a3b8 !important;
  border-top:1px solid #f1f5f9 !important;
  flex-shrink:0 !important;
}

/* 手机端 */
@media (max-width: 768px){
  .topbar{padding:10px 12px !important;gap:8px !important}
  .brand-logo{width:32px !important;height:32px !important;min-width:32px !important;font-size:16px !important}
  .brand-title{font-size:13.5px !important}
  .brand-sub{display:none !important}
  .topbar-user-name{max-width:70px !important;font-size:12px !important}
  .hamburger-btn{width:38px !important;height:38px !important}
  .hamburger-btn span{width:16px !important}
  .drawer{width:88vw !important}
}

/* 汉堡按钮打开状态 */
.hamburger-btn.active span:nth-child(1){transform:translateY(6px) rotate(45deg) !important}
.hamburger-btn.active span:nth-child(2){opacity:0 !important}
.hamburger-btn.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg) !important}
/* ============================================================
   顶栏：桌面端完整 / 手机端简化为 logo + 汉堡
   ============================================================ */
.topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:12px 20px !important;
  background:#fff !important;
  border-bottom:1px solid #eaeef4 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  flex-wrap:nowrap !important;
}
.brand{display:flex !important;align-items:center !important;gap:12px !important;flex:0 0 auto !important;min-width:0 !important}
.brand-logo{
  width:40px !important;height:40px !important;min-width:40px !important;
  border-radius:11px !important;
  background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%) !important;
  color:#fff !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:20px !important;
  box-shadow:0 4px 12px rgba(59,130,246,.28) !important;
}
.brand-text{display:flex !important;flex-direction:column !important;gap:2px !important;min-width:0 !important}
.brand-title{font-size:16px !important;font-weight:700 !important;color:#0f172a !important;white-space:nowrap !important;line-height:1.2 !important}
.brand-sub{font-size:11px !important;color:#94a3b8 !important;white-space:nowrap !important;line-height:1.2 !important}

/* 桌面端工具栏：居中显示 */
.topbar-desktop-tools{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
.topbar-desktop-tools .tb-group{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:5px 10px !important;
  background:#fff !important;
  border-radius:11px !important;
  border:1px solid #eaeef4 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03) !important;
}
.topbar-desktop-tools .tb-group-primary{
  border-color:#dbeafe !important;
  background:linear-gradient(180deg,#f8fbff 0%,#eff6ff 100%) !important;
}
.topbar-desktop-tools .tb-btn{
  padding:7px 12px !important;
  border-radius:8px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  color:#475569 !important;
  background:transparent !important;
  border:none !important;
  cursor:pointer !important;
  transition:.2s !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  font-family:inherit !important;
}
.topbar-desktop-tools .tb-btn:hover{background:#f1f5f9 !important;color:#0f172a !important}
.topbar-desktop-tools .tb-btn.primary{
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%) !important;
  color:#fff !important;
  box-shadow:0 3px 10px rgba(59,130,246,.3) !important;
}
.topbar-desktop-tools .tb-btn.primary:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 5px 14px rgba(59,130,246,.4) !important;
}

/* 桌面端用户区 */
.topbar-right{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex:0 0 auto !important;
}
.topbar-user-desktop{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding-left:14px !important;
  border-left:1px solid #eaeef4 !important;
  flex-wrap:nowrap !important;
}
.user-login-btn{
  padding:8px 14px;border-radius:10px;background:#f1f5f9;color:#475569;
  font-size:13px;font-weight:600;border:1px solid #e2e8f0;cursor:pointer;
  transition:.2s;text-decoration:none;white-space:nowrap;font-family:inherit;
}
.user-login-btn:hover{background:#e2e8f0;color:#0f172a}
.user-register-btn{
  padding:8px 14px;border-radius:10px;
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer;
  transition:.2s;text-decoration:none;white-space:nowrap;font-family:inherit;
  box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.user-register-btn:hover{transform:translateY(-1px)}
.user-name{
  font-size:13px;color:#475569;font-weight:600;text-decoration:none;
  padding:6px 10px;border-radius:8px;white-space:nowrap;transition:.2s;
}
.user-name:hover{background:#eef2ff;color:#3b82f6}
.user-upgrade{
  padding:8px 12px;border-radius:10px;
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);
  color:#fff;font-size:12.5px;font-weight:600;border:none;cursor:pointer;
  white-space:nowrap;font-family:inherit;
  box-shadow:0 4px 12px rgba(249,115,22,.28);
}
.user-vip{
  padding:7px 10px;border-radius:10px;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  color:#fff;font-size:12px;font-weight:700;white-space:nowrap;
}
.user-admin,.user-logout{
  padding:8px 10px;border-radius:10px;background:#f1f5f9;color:#475569;
  font-size:12.5px;font-weight:600;border:1px solid #eaeef4;cursor:pointer;
  white-space:nowrap;font-family:inherit;transition:.2s;
}
.user-admin:hover{background:#e2e8f0;color:#0f172a}
.user-logout:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}

/* 手机端右侧区域：默认隐藏 */
.topbar-mobile-right{display:none !important;align-items:center;gap:8px !important}
.topbar-user-mobile{
  font-size:12.5px;color:#475569;font-weight:600;
  max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 汉堡按钮：默认隐藏（桌面端） */
.hamburger-btn{
  width:42px;height:42px;border-radius:11px;
  background:#f8fafc;border:1px solid #eaeef4;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:pointer;transition:.2s;padding:0;
  flex-shrink:0;
}
.hamburger-btn:hover{background:#eff6ff;border-color:#bfdbfe}
.hamburger-btn span{display:block;width:18px;height:2px;background:#475569;border-radius:2px;transition:.2s}
.hamburger-btn:hover span{background:#3b82f6}

/* ============================================================
   抽屉菜单样式（桌面端不显示，手机端才滑出）
   ============================================================ */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.5);
  z-index:998;opacity:0;visibility:hidden;transition:.3s;
  backdrop-filter:blur(2px);
}
.drawer-overlay.show{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:360px;max-width:92vw;
  background:#fff;z-index:999;
  box-shadow:-8px 0 32px rgba(15,23,42,.15);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.drawer.show{transform:translateX(0)}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid #eaeef4;
  background:linear-gradient(135deg,#f8fbff 0%,#eff6ff 100%);flex-shrink:0;
}
.drawer-brand{display:flex;align-items:center;gap:10px;min-width:0}
.drawer-brand .brand-logo{width:36px;height:36px;min-width:36px;font-size:18px;border-radius:10px}
.drawer-brand .brand-title{font-size:14px}
.drawer-brand .brand-sub{font-size:10.5px}
.drawer-close{
  width:32px;height:32px;border-radius:50%;
  background:#fff;color:#64748b;font-size:18px;line-height:1;
  cursor:pointer;border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;transition:.2s;
  padding:0;flex-shrink:0;
}
.drawer-close:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}

.drawer-body{flex:1;overflow-y:auto;padding:16px 16px 24px;-webkit-overflow-scrolling:touch}
.drawer-section{margin-bottom:20px}
.drawer-section:last-child{margin-bottom:0}
.drawer-section-title{
  font-size:11px;color:#94a3b8;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;padding:0 8px 8px;
}
.drawer-user-guest{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;
  background:linear-gradient(135deg,#eff6ff 0%,#f3e8ff 100%);margin-bottom:12px;
}
.drawer-guest-icon{font-size:28px;line-height:1}
.drawer-guest-title{font-size:14px;font-weight:700;color:#0f172a}
.drawer-guest-sub{font-size:11.5px;color:#64748b;line-height:1.4;margin-top:2px}
.drawer-user-actions{display:flex;flex-direction:column;gap:8px}
.drawer-btn-primary,.drawer-btn-secondary,.drawer-btn-upgrade,.drawer-btn-danger{
  width:100%;padding:12px;border-radius:10px;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:.2s;text-align:center;text-decoration:none;
}
.drawer-btn-primary{
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);color:#fff;border:none;
  box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.drawer-btn-secondary{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;padding:11px;font-size:13.5px}
.drawer-btn-secondary:hover{background:#e2e8f0}
.drawer-btn-upgrade{
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);color:#fff;border:none;
  box-shadow:0 4px 12px rgba(249,115,22,.3);margin-bottom:8px;
}
.drawer-btn-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;padding:11px;font-size:13.5px}
.drawer-btn-danger:hover{background:#fee2e2}
.drawer-user-info{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;
  background:#f8fafc;margin-bottom:12px;
}
.drawer-user-avatar{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;flex-shrink:0;
}
.drawer-user-meta{flex:1;min-width:0}
.drawer-user-name{font-size:15px;font-weight:700;color:#0f172a}
.drawer-user-role{margin-top:4px}
.role-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.role-admin{background:#eff6ff;color:#2563eb}
.role-member{background:#fef3c7;color:#92400e}
.role-free{background:#f1f5f9;color:#64748b}
.drawer-list{display:flex;flex-direction:column;gap:2px}
.drawer-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  font-size:14px;color:#475569;font-weight:500;cursor:pointer;transition:.15s;
  text-decoration:none;
}
.drawer-item:hover{background:#eff6ff;color:#3b82f6}
.drawer-item .di-icon{font-size:18px;flex-shrink:0;width:22px;text-align:center}
.drawer-item .di-text{flex:1;min-width:0}
.drawer-item .di-arrow{font-size:18px;color:#cbd5e1;flex-shrink:0}
.drawer-item:hover .di-arrow{color:#3b82f6}
.drawer-item .di-badge{
  flex-shrink:0;padding:2px 8px;border-radius:8px;
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);
  color:#fff;font-size:10px;font-weight:700;
}
.drawer-foot{
  padding:16px 20px;text-align:center;font-size:11.5px;color:#94a3b8;
  border-top:1px solid #f1f5f9;flex-shrink:0;
}

.hamburger-btn.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger-btn.active span:nth-child(2){opacity:0}
.hamburger-btn.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   手机端：切换布局
   ============================================================ */
@media (max-width: 768px){
  .topbar{padding:10px 12px !important;gap:8px !important}
  .brand-logo{width:32px !important;height:32px !important;min-width:32px !important;font-size:16px !important}
  .brand-title{font-size:13.5px !important}
  .brand-sub{display:none !important}

  /* 隐藏桌面端工具栏和用户区 */
  .topbar-desktop-tools{display:none !important}
  .topbar-user-desktop{display:none !important}

  /* 显示手机端右侧 */
  .topbar-mobile-right{display:flex !important}

  /* 显示汉堡按钮 */
  .hamburger-btn{display:flex !important}

  .drawer{width:88vw !important}
}
/* 工单红点 */
.tb-btn-ticket{position:relative}
.tb-ticket-dot{
  position:absolute;top:4px;right:6px;
  width:8px;height:8px;border-radius:50%;
  background:#ef4444;box-shadow:0 0 0 2px #fff;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.3);opacity:.7}
}

/* 手机端抽屉里的工单角标 */
.drawer-item .di-badge{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%) !important;
  animation:pulse 2s infinite;
}
/* ============ 工单弹窗 ============ */
.tk-modal{display:none;position:fixed;inset:0;z-index:99998;align-items:center;justify-content:center;padding:20px}
.tk-modal.show{display:flex}
.tk-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px)}
.tk-card{position:relative;z-index:1;background:#fff;border-radius:18px;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(15,23,42,.3);overflow:hidden;animation:tkPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes tkPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.tk-head{padding:16px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f8fbff 0%,#eff6ff 100%);flex-shrink:0}
.tk-title{font-size:15.5px;font-weight:700;color:#0f172a}
.tk-close{width:32px;height:32px;border-radius:50%;background:#fff;color:#64748b;font-size:18px;line-height:1;cursor:pointer;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;transition:.2s}
.tk-close:hover{background:#fee2e2;color:#dc2626;transform:rotate(90deg)}
.tk-body{flex:1;overflow-y:auto;padding:18px 20px 22px}
.tk-view{display:block}
.tk-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-height:400px;overflow-y:auto}
.tk-empty{padding:40px 20px;text-align:center;color:#94a3b8}
.tk-empty-icon{font-size:48px;opacity:.4;margin-bottom:10px}
.tk-empty-title{font-size:14px;font-weight:700;color:#475569;margin-bottom:4px}
.tk-empty-desc{font-size:12.5px;color:#94a3b8}
.tk-item{padding:12px 14px;border-radius:10px;background:#f8fafc;border:1px solid #eaeef4;cursor:pointer;transition:.15s}
.tk-item:hover{background:#eff6ff;border-color:#bfdbfe}
.tk-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.tk-item-title{flex:1;font-size:13.5px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-item-preview{font-size:12px;color:#64748b;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-item-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#94a3b8}
.tk-status{padding:2px 8px;border-radius:8px;font-weight:600;font-size:10.5px}
.tk-status.pending{background:#fef3c7;color:#92400e}
.tk-status.replied{background:#ecfdf5;color:#065f46}
.tk-status.closed{background:#f1f5f9;color:#64748b}
.tk-unread-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15);animation:pulseBubble 2s infinite}
.tk-field{margin-bottom:16px}
.tk-field > label{display:block;font-size:13px;color:#475569;font-weight:600;margin-bottom:8px}
.tk-req{color:#ef4444}
.tk-field input[type=text],.tk-field textarea{width:100%;padding:10px 14px;border:1.5px solid #eaeef4;border-radius:10px;font-size:13.5px;color:#0f172a;background:#fafbfd;outline:none;font-family:inherit;line-height:1.6;transition:.2s}
.tk-field input:focus,.tk-field textarea:focus{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.1)}
.tk-field textarea{resize:vertical;min-height:120px}
.tk-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.tk-type{cursor:pointer;position:relative}
.tk-type input{position:absolute;opacity:0;pointer-events:none}
.tk-type span{display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 8px;border-radius:9px;border:1.5px solid #eaeef4;background:#fafbfd;font-size:12px;font-weight:600;color:#64748b;transition:.2s;user-select:none}
.tk-type:hover span{background:#f1f5f9}
.tk-type input:checked + span{background:linear-gradient(135deg,#eff6ff 0%,#e0e7ff 100%);border-color:#3b82f6;color:#2563eb}
.tk-actions{display:flex;gap:10px;margin-top:20px}
.tk-btn-primary{flex:1;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.2s;box-shadow:0 4px 14px rgba(59,130,246,.3)}
.tk-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(59,130,246,.4)}
.tk-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.tk-btn-gray{padding:12px 20px;border-radius:10px;border:1px solid #e2e8f0;background:#f1f5f9;color:#475569;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s}
.tk-btn-gray:hover{background:#e2e8f0}
.tk-tip{margin-top:12px;text-align:center;font-size:12px;color:#94a3b8}
.tk-back-btn{background:none;border:none;color:#3b82f6;font-size:13px;font-weight:600;cursor:pointer;padding:0 0 12px 0;font-family:inherit}
.tk-back-btn:hover{color:#2563eb}
.tk-detail{padding:4px 0}
.tk-detail-section{margin-bottom:16px}
.tk-detail-label{font-size:11.5px;color:#94a3b8;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
.tk-detail-title{font-size:15px;font-weight:700;color:#0f172a;line-height:1.5}
.tk-detail-content{padding:12px 14px;border-radius:10px;background:#f8fafc;font-size:13.5px;color:#0f172a;line-height:1.8;white-space:pre-wrap;word-wrap:break-word}
.tk-detail-reply{padding:12px 14px;border-radius:10px;background:linear-gradient(135deg,#eff6ff 0%,#e0e7ff 100%);border-left:3px solid #3b82f6;font-size:13.5px;color:#0f172a;line-height:1.8;white-space:pre-wrap;word-wrap:break-word}
.tk-detail-time{font-size:11.5px;color:#94a3b8;margin-top:6px}
.tk-detail-pending{padding:20px;border-radius:10px;background:#fffbeb;border-left:3px solid #f59e0b;text-align:center;font-size:13px;color:#78350f}
.tk-success{padding:20px 10px;text-align:center}
.tk-success-icon{font-size:56px;line-height:1;margin-bottom:14px}
.tk-success-title{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:8px}
.tk-success-desc{font-size:13.5px;color:#64748b;margin-bottom:16px}
.tk-success-id{display:inline-block;padding:8px 16px;background:#f0f7ff;border-radius:10px;font-size:13px;color:#475569;margin-bottom:20px}
.tk-success-id b{color:#2563eb;font-family:ui-monospace,monospace;font-size:15px}
.tk-success-btns{display:flex;gap:10px;justify-content:center}
@media (max-width:560px){
  .tk-card{max-width:100%;max-height:92vh;border-radius:18px 18px 0 0}
  .tk-modal{align-items:flex-end;padding:0}
  .tk-types{grid-template-columns:repeat(2,1fr)}
}
/* ============ 工单上传图片 ============ */
.tk-upload{padding:18px 14px;border:2px dashed #dde3ec;border-radius:12px;background:#fafbfd;cursor:pointer;text-align:center;transition:.2s}
.tk-upload:hover{border-color:#3b82f6;background:#eff6ff}
.tk-upload-icon{font-size:26px;margin-bottom:6px}
.tk-upload-text{font-size:13px;color:#475569;font-weight:600}
.tk-upload-hint{font-size:11px;color:#94a3b8;margin-top:3px}
.tk-preview{margin-top:10px;position:relative;display:inline-block;max-width:100%}
.tk-preview img{max-width:100%;max-height:180px;border-radius:10px;border:1px solid #eaeef4;display:block}
.tk-preview-del{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid #fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(239,68,68,.4)}
.tk-preview-del:hover{background:#dc2626}

/* ============ 升级会员弹窗 ============ */
.up-modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;padding:20px}
.up-modal.show{display:flex}
.up-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(4px)}
.up-card{position:relative;z-index:1;background:#fff;border-radius:20px;width:100%;max-width:480px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(15,23,42,.35);overflow:hidden;animation:upPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes upPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.up-head{padding:18px 22px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);flex-shrink:0}
.up-title{font-size:16px;font-weight:700;color:#0f172a}
.up-close{width:32px;height:32px;border-radius:50%;background:#fff;color:#64748b;font-size:18px;line-height:1;cursor:pointer;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;transition:.2s}
.up-close:hover{background:#fee2e2;color:#dc2626;transform:rotate(90deg)}
.up-body{flex:1;overflow-y:auto;padding:20px 22px 24px}
.up-price-line{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:14px 0 20px;border-bottom:1px dashed #f1f5f9;margin-bottom:18px}
.up-price-label{font-size:13px;color:#64748b}
.up-price-num{font-size:32px;font-weight:800;color:#f59e0b;letter-spacing:-1px}
.up-price-unit{font-size:13px;color:#94a3b8}
.up-steps{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;padding:16px;background:#f8fafc;border-radius:12px}
.up-step-row{display:flex;gap:12px;align-items:flex-start}
.up-step-num{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(59,130,246,.3)}
.up-step-text{flex:1;min-width:0}
.up-step-text b{font-size:13px;color:#0f172a;font-weight:700}
.up-step-desc{font-size:11.5px;color:#64748b;margin-top:2px;line-height:1.5}
.up-qr-wrap{text-align:center;margin-bottom:20px}
.up-qr-label{font-size:13px;font-weight:600;color:#475569;margin-bottom:10px}
.up-qr-box{width:200px;height:200px;margin:0 auto;border-radius:14px;overflow:hidden;background:#f8fafc;border:1px solid #eaeef4;position:relative}
.up-qr-img{width:100%;height:100%;object-fit:contain;display:block}
.up-qr-placeholder{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#eff6ff 0%,#e0e7ff 100%);color:#64748b;font-size:12px;text-align:center;line-height:1.7;padding:10px}
.up-qr-placeholder code{background:#fff;padding:1px 6px;border-radius:4px;color:#db2777;font-size:11px}
.up-qr-hint{font-size:11.5px;color:#94a3b8;margin-top:8px}
.up-form{margin-bottom:20px}
.up-field{margin-bottom:14px}
.up-field > label{display:block;font-size:13px;color:#475569;font-weight:600;margin-bottom:6px}
.up-req{color:#ef4444}
.up-field input[type=text]{width:100%;padding:10px 14px;border:1.5px solid #eaeef4;border-radius:10px;font-size:13.5px;color:#0f172a;background:#fafbfd;outline:none;font-family:inherit;transition:.2s}
.up-field input:focus{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.1)}
.up-upload{padding:20px 14px;border:2px dashed #dde3ec;border-radius:12px;background:#fafbfd;cursor:pointer;text-align:center;transition:.2s}
.up-upload:hover{border-color:#3b82f6;background:#eff6ff}
.up-upload-icon{font-size:28px;margin-bottom:6px}
.up-upload-text{font-size:13px;color:#475569;font-weight:600}
.up-upload-hint{font-size:11px;color:#94a3b8;margin-top:3px}
.up-preview{margin-top:10px;position:relative;display:inline-block;max-width:100%}
.up-preview img{max-width:100%;max-height:180px;border-radius:10px;border:1px solid #eaeef4;display:block}
.up-preview-del{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid #fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(239,68,68,.4)}
.up-submit{width:100%;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:.2s;box-shadow:0 6px 20px rgba(16,185,129,.35)}
.up-submit:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(16,185,129,.45)}
.up-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.up-submit-hint{text-align:center;font-size:12px;color:#94a3b8;margin-top:10px;line-height:1.7}
.up-submit-hint b{color:#3b82f6}
.up-success{padding:30px 10px;text-align:center}
.up-success-icon{font-size:56px;line-height:1;margin-bottom:14px}
.up-success-title{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:8px}
.up-success-desc{font-size:13.5px;color:#64748b;margin-bottom:6px}
.up-success-tip{font-size:12px;color:#94a3b8;margin-bottom:20px;line-height:1.7}
.up-success-btns{display:flex;justify-content:center}
.up-btn-primary{padding:12px 32px;border-radius:11px;border:none;background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(59,130,246,.3)}
@media (max-width:560px){
  .up-card{max-width:100%;max-height:92vh;border-radius:20px 20px 0 0}
  .up-modal{align-items:flex-end;padding:0}
  .up-price-num{font-size:26px}
  .up-qr-box{width:170px;height:170px}
}
/* ============ 用户按钮（管理 / 工单 / 退出）通用样式 ============ */
.user-admin,.user-logout{
  padding:7px 12px;
  border-radius:8px;
  background:#f1f5f9;
  color:var(--text2);
  font-size:12.5px;
  font-weight:500;
  border:1px solid var(--border);
  cursor:pointer;
  font-family:inherit;
  transition:.2s;
  display:inline-flex;
  align-items:center;
  gap:4px;
  position:relative;
}
.user-admin:hover{background:#e2e8f0;color:var(--text)}
.user-logout:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}

.ticket-badge-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:8px;
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1;
  box-shadow:0 2px 6px rgba(239,68,68,.4);
  animation:pulseBadge 2s infinite;
  margin-left:2px;
}
@keyframes pulseBadge{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* 手机端抽屉里的工单角标 */
.drawer-item .di-badge{
  flex-shrink:0;
  padding:1px 7px;
  border-radius:8px;
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
}