/* ==========================================================
   应用界面样式（工作台外壳）
   —— 浅色专业风格，对标 135 / 秀米 的编辑体验
   ========================================================== */
:root{
  --app-bg:#eef1f5;
  --app-panel:#ffffff;
  --app-line:#e2e6ec;
  --app-ink:#1f2733;
  --app-soft:#6b7684;
  --app-brand:#1a6fd4;
  --app-brand-dark:#145bb0;
  --app-accent:#e8573f;
  --app-radius:8px;
  --app-shadow:0 1px 3px rgba(20,30,50,.07),0 1px 2px rgba(20,30,50,.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--app-bg);color:var(--app-ink);
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  display:flex;flex-direction:column;height:100vh;font-size:14px;
}

/* ===== 顶部应用栏 ===== */
.appbar{
  background:var(--app-panel);border-bottom:1px solid var(--app-line);
  padding:0 16px;height:56px;display:flex;align-items:center;gap:14px;flex:none;
  box-shadow:var(--app-shadow);z-index:20;
}
.appbar .brand{display:flex;align-items:center;gap:9px;margin-right:4px}
.appbar .brand .logo{
  width:30px;height:30px;border-radius:7px;background:var(--app-brand);color:#fff;
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none;
}
.appbar .brand .name{font-weight:700;font-size:15px;line-height:1.2}
.appbar .brand .sub{font-size:11px;color:var(--app-soft);line-height:1.2}
.appbar .spacer{flex:1}
.appbar .grp{display:flex;align-items:center;gap:7px}
.appbar .sep{width:1px;height:24px;background:var(--app-line);margin:0 4px}

/* 用户菜单（真实云端账号 / 访客） */
.um{display:flex;align-items:center;gap:7px;cursor:pointer;padding:5px 9px;border-radius:8px;border:1px solid var(--app-line);background:#fff;transition:.15s}
.um:hover{border-color:var(--app-brand);box-shadow:0 2px 8px rgba(26,111,212,.12)}
.um-ava{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#1a6fd4,#4f9bff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.um-name{font-size:13px;font-weight:600;color:var(--app-ink);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-caret{font-size:10px;color:var(--app-soft)}
.um-role{font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:4px}
.um-role.admin{background:#f3ecff;color:#7b4fa8}
.um-role.dev{background:#e7f6ec;color:#1f9d55}
.um-pop{position:absolute;top:52px;right:14px;width:212px;background:#fff;border:1px solid var(--app-line);border-radius:12px;box-shadow:0 16px 40px rgba(23,43,77,.18);padding:8px;display:none;z-index:60}
.um-pop.show{display:block}
.um-pop .um-info{padding:8px 10px;font-size:12px;color:var(--app-soft);border-bottom:1px solid var(--app-line);margin-bottom:6px;line-height:1.5}
.um-pop .um-info b{color:var(--app-ink);font-size:13px}
.um-pop a{display:block;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--app-ink);cursor:pointer;transition:.12s}
.um-pop a:hover{background:#f3f7fd;color:var(--app-brand)}

/* 本地演示横幅 */
.demo-banner{background:#fff2e0;color:#9a6a1e;font-size:12.5px;padding:7px 16px;text-align:center;border-bottom:1px solid #f3dcbb}
.demo-banner b{color:#d97925}

/* ===== 公众号引流入口（山水无涯，弱化为小链接，点击放大二维码） ===== */
.gzhd-link{display:block;margin:4px 12px 12px;text-align:center;font-size:11.5px;color:var(--app-soft);cursor:pointer;text-decoration:none}
.gzhd-link:hover{color:#07c160}
.gzhd-box{max-width:430px;text-align:center}
.gzhd-big{display:block;width:100%;border-radius:10px;margin:8px 0}
/* 顶栏品牌 logo（山水无涯） */
.appbar .brand .logo-img{height:34px;display:block;flex:none}

/* 表单控件 */
select,input[type=text]{
  background:#fff;color:var(--app-ink);border:1px solid var(--app-line);
  border-radius:6px;padding:6px 9px;font-size:13px;font-family:inherit;outline:none;
}
select:focus,input[type=text]:focus{border-color:var(--app-brand)}
.btn{
  background:#fff;color:var(--app-ink);border:1px solid var(--app-line);
  padding:7px 13px;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;
  white-space:nowrap;transition:.15s;
}
.btn:hover{border-color:var(--app-brand);color:var(--app-brand)}
.btn.primary{background:var(--app-brand);color:#fff;border-color:var(--app-brand)}
.btn.primary:hover{background:var(--app-brand-dark);color:#fff}
.btn.danger{color:var(--app-accent);border-color:#f3c9c1}
.btn.danger:hover{border-color:var(--app-accent);color:var(--app-accent)}
.btn.sm{padding:5px 9px;font-size:12px}
.btn.armed{background:var(--app-accent)!important;color:#fff!important;border-color:var(--app-accent)!important}
input[type=range]{width:88px;vertical-align:middle}
input[type=color]{width:30px;height:26px;padding:0;border:1px solid var(--app-line);border-radius:5px;cursor:pointer;vertical-align:middle}
label.ctl{font-size:12px;color:var(--app-soft);display:inline-flex;align-items:center;gap:5px}

/* 开关 */
.sw{
  width:32px;height:18px;border-radius:9px;background:#d3d8de;position:relative;
  cursor:pointer;display:inline-block;vertical-align:middle;transition:.18s;flex:none;
}
.sw .knob{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.sw.on{background:var(--app-brand)}
.sw.on .knob{left:16px}

/* ===== 主体三栏 ===== */
.workspace{
  display:grid;grid-template-columns:316px minmax(320px,1fr) minmax(380px,440px);
  gap:12px;padding:12px;flex:1;min-height:0;
}
@media(max-width:1280px){
  .workspace{grid-template-columns:280px 1fr;grid-template-rows:1fr 1fr}
  .pane-preview{grid-column:1/-1}
}
@media(max-width:900px){
  .workspace{grid-template-columns:1fr;grid-template-rows:auto}
}

/* 通用面板 */
.panel{
  background:var(--app-panel);border:1px solid var(--app-line);border-radius:var(--app-radius);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;box-shadow:var(--app-shadow);
}
.panel .phead{
  padding:9px 12px;font-size:12px;font-weight:700;color:var(--app-soft);
  border-bottom:1px solid var(--app-line);background:#fafbfc;letter-spacing:.5px;flex:none;
}
.panel .pbody{flex:1;overflow:auto;min-height:0}

/* ===== 左：组件库（卡片式单行列表 + 分组配色） ===== */
.pane-lib{min-width:0}

/* 搜索框 */
.lib-search{padding:9px 10px;border-bottom:1px solid var(--app-line);background:#fafbfc;flex:none}
.lib-search input{
  width:100%;padding:7px 10px 7px 28px;font-size:12.5px;border:1px solid var(--app-line);
  border-radius:16px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa4b0' stroke-width='2.4'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat 9px center;
  outline:none;color:var(--app-ink);font-family:inherit;
}
.lib-search input:focus{border-color:var(--app-brand)}
.lib-empty{padding:26px 16px;text-align:center;color:var(--app-soft);font-size:12.5px}

/* 分组 */
.lib-group{padding:10px 10px 12px}
.lib-group+.lib-group{border-top:1px solid #f0f2f5}
.lib-title{
  display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  color:var(--app-ink);margin:0 0 8px;letter-spacing:.4px;
}
.lib-title .dot{width:3px;height:13px;border-radius:2px;background:var(--app-brand);flex:none}
.lib-title .cnt{margin-left:auto;font-weight:400;color:#a3abb5;font-size:11px}
/* 分组配色（6 组循环） */
.lib-group.c0 .lib-title .dot{background:#1a6fd4}
.lib-group.c1 .lib-title .dot{background:#149e77}
.lib-group.c2 .lib-title .dot{background:#d97925}
.lib-group.c3 .lib-title .dot{background:#8a5cd0}
.lib-group.c4 .lib-title .dot{background:#e8573f}
.lib-group.c5 .lib-title .dot{background:#2aa3b8}
.lib-group.c6 .lib-title .dot{background:#c2418f}

/* 组件卡片（双列宫格，图标 + 名称 + 说明，充分利用屏幕空间） */
.lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lib-item{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--app-line);border-radius:8px;padding:8px 9px;
  cursor:pointer;background:#fff;transition:transform .14s,box-shadow .14s,border-color .14s;
  user-select:none;min-width:0;
}
.lib-item:hover{
  border-color:var(--app-brand);background:#f7faff;
  transform:translateY(-1px);box-shadow:0 3px 10px rgba(26,111,212,.14);
}
.lib-item:active{transform:translateY(0) scale(.985)}
.lib-item .ico{
  width:28px;height:28px;flex:none;border-radius:7px;
  background:rgba(26,111,212,.09);color:var(--app-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;line-height:1;
}
/* 图标底色随分组 */
.lib-group.c0 .lib-item .ico{background:rgba(26,111,212,.10);color:#1a6fd4}
.lib-group.c1 .lib-item .ico{background:rgba(20,158,119,.12);color:#149e77}
.lib-group.c2 .lib-item .ico{background:rgba(217,121,37,.12);color:#c46a17}
.lib-group.c3 .lib-item .ico{background:rgba(138,92,208,.12);color:#7a4bc0}
.lib-group.c4 .lib-item .ico{background:rgba(232,87,63,.12);color:#d94a34}
.lib-group.c5 .lib-item .ico{background:rgba(42,163,184,.12);color:#1d8b9e}
.lib-group.c6 .lib-item .ico{background:rgba(194,65,143,.12);color:#c2418f}

.lib-item .txt{flex:1;min-width:0}
.lib-item .nm{font-size:12.5px;font-weight:600;color:var(--app-ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-item .ds{font-size:10.5px;color:#98a1ac;line-height:1.4;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-item .badge{
  flex:none;font-size:9px;font-weight:700;padding:1px 4px;border-radius:4px;
  background:#fff2e0;color:#d97925;border:1px solid #f6dcbb;letter-spacing:.3px;
}
.lib-item .badge.vip{background:#f3ecff;color:#7b4fa8;border-color:#e2d3f7}
.lib-item.locked{opacity:.62}
.lib-item.locked:hover{border-color:var(--app-accent);background:#fff8f6;box-shadow:0 2px 8px rgba(232,87,63,.13)}
.lib-item .lock{flex:none;font-size:11px;margin-left:2px}

/* 分组折叠 */
.lib-title.foldable{cursor:pointer}
.lib-title .caret{margin-left:2px;font-size:9px;color:#a3abb5;transition:transform .15s}
.lib-group.folded .lib-grid{display:none}
.lib-group.folded .lib-title .caret{transform:rotate(-90deg)}

/* 底部：商业化入口 */
.lib-foot{
  border-top:1px solid var(--app-line);background:#fafbfc;padding:9px 10px;
  display:flex;gap:6px;flex:none;
}
.lib-foot .btn{flex:1;padding:7px 4px;font-size:12px;text-align:center}

/* ===== 中：编辑区 ===== */
.pane-editor{display:flex;flex-direction:column;min-height:0}
.editor-toolbar{
  padding:7px 10px;border-bottom:1px solid var(--app-line);background:#fafbfc;
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;flex:none;
}
.editor-toolbar .tsep{width:1px;height:18px;background:var(--app-line);margin:0 3px}
.tbtn{
  background:#fff;border:1px solid var(--app-line);border-radius:5px;
  padding:5px 9px;font-size:12.5px;cursor:pointer;color:var(--app-ink);transition:.14s;
}
.tbtn:hover{border-color:var(--app-brand);color:var(--app-brand)}
textarea#md{
  flex:1;width:100%;border:0;resize:none;padding:16px 18px;font-size:14.5px;line-height:1.85;
  background:#fdfdfe;color:#24292e;outline:none;
  font-family:"Cascadia Code",Consolas,"Microsoft YaHei",monospace;
}
.edithint{
  padding:7px 12px;font-size:11.5px;color:var(--app-soft);background:#fafbfc;
  border-top:1px solid var(--app-line);line-height:1.7;flex:none;
}
.edithint code{background:#eef1f5;padding:1px 5px;border-radius:3px;font-size:11px}

/* ===== 右：预览（手机外壳） ===== */
.pane-preview{display:flex;flex-direction:column;min-height:0}
.preview-bar{
  padding:7px 12px;border-bottom:1px solid var(--app-line);background:#fafbfc;
  display:flex;gap:8px;align-items:center;flex:none;flex-wrap:wrap;
}
.preview-scroll{flex:1;overflow:auto;min-height:0;padding:18px;display:flex;justify-content:center;background:#e9edf2}
.phone{
  width:392px;flex:none;background:#1c1c1e;border-radius:34px;padding:11px;
  box-shadow:0 8px 24px rgba(20,30,50,.18);align-self:flex-start;
}
.phone .screen{
  background:#fff;border-radius:24px;overflow:hidden;min-height:520px;
}
.phone .notch{
  height:24px;background:#fff;display:flex;align-items:center;justify-content:center;
}
.phone .notch .bar{width:96px;height:5px;border-radius:3px;background:#d8dce2}
.pane-preview.wide .preview-scroll{padding:22px}
.pane-preview.wide .phone{width:100%;max-width:760px;background:transparent;padding:0;box-shadow:none;border-radius:var(--app-radius)}
.pane-preview.wide .phone .screen{border:1px solid var(--app-line);border-radius:var(--app-radius)}
.pane-preview.wide .phone .notch{display:none}

/* ===== 底部状态栏 ===== */
.statusbar{
  background:var(--app-panel);border-top:1px solid var(--app-line);
  padding:6px 16px;font-size:12px;color:var(--app-soft);
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;flex:none;
}
.statusbar b{color:var(--app-ink);font-weight:600}
.statusbar .ok{color:#149e77}
.statusbar .warn{color:#d97925}

/* ===== 弹窗 ===== */
.modal{
  position:fixed;inset:0;background:rgba(15,22,35,.55);display:none;
  align-items:center;justify-content:center;z-index:60;
}
.modal.show{display:flex}
.modal .box{
  background:#fff;border-radius:12px;max-width:800px;width:92%;max-height:82vh;
  overflow:auto;padding:22px 26px;box-shadow:0 12px 40px rgba(0,0,0,.2);
}
.modal .box h3{margin:0 0 6px;color:var(--app-ink);font-size:17px}
.modal .box .lead{color:var(--app-soft);font-size:12.5px;margin:0 0 16px}
.modal .box table{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0}
.modal .box th,.modal .box td{border:1px solid var(--app-line);padding:7px 9px;text-align:left;vertical-align:top}
.modal .box th{background:#fafbfc;color:var(--app-ink);font-weight:700;width:150px}
.modal .box code{background:#eef1f5;padding:1px 6px;border-radius:4px;font-size:11.5px;color:var(--app-brand)}
.modal .close{float:right;cursor:pointer;color:var(--app-soft);font-size:22px;line-height:1}
.modal .box h4{margin:18px 0 8px;font-size:14px;color:var(--app-brand)}

/* ==========================================================
   会员中心 / 商业化设置
   ========================================================== */
.modal .box h4{margin:20px 0 10px;font-size:14.5px;color:var(--app-brand);
  border-left:3px solid var(--app-brand);padding-left:8px}

/* 当前等级条 */
.plan-now{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:10px;
  background:linear-gradient(135deg,#f3f7ff,#fbfcff);border:1px solid #dbe6f7}
.plan-now .pn-left{flex:1}
.plan-now .pn-tag{font-size:11px;color:var(--app-soft)}
.plan-now .pn-name{font-size:20px;font-weight:700;color:var(--app-ink);line-height:1.3}
.plan-now .pn-exp{font-size:12px;color:var(--app-soft);margin-top:2px}
.plan-now .pn-right{text-align:right}
.plan-now .pn-free{font-size:12.5px;color:#149e77;line-height:1.6}
.plan-now .pn-free span{color:var(--app-soft);font-size:11.5px}
.biz-notice{margin:12px 0 0;padding:9px 12px;font-size:12.5px;color:#7a6a58;
  background:#fffaf3;border:1px solid #f0e2cc;border-radius:8px;line-height:1.7}

/* 套餐卡片 */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px}
.plan-card{border:1px solid var(--app-line);border-radius:10px;padding:13px 14px;background:#fff;transition:.15s}
.plan-card:hover{border-color:var(--app-brand);box-shadow:0 3px 12px rgba(26,111,212,.12)}
.plan-card.on{border-color:var(--app-brand);background:#f7faff}
.plan-card .pc-name{font-weight:700;font-size:15px;color:var(--app-ink)}
.plan-card .pc-cur{font-size:10px;background:var(--app-brand);color:#fff;border-radius:4px;
  padding:1px 5px;margin-left:6px;vertical-align:middle}
.plan-card .pc-price{margin:6px 0 4px;color:var(--app-ink)}
.plan-card .pc-price b{font-size:22px;color:var(--app-brand)}
.plan-card .pc-price span{font-size:12px;color:var(--app-soft)}
.plan-card .pc-desc{font-size:12px;color:var(--app-soft);min-height:32px;line-height:1.5}
.plan-card .pc-list{list-style:none;margin:8px 0 0;padding:0;font-size:12px}
.plan-card .pc-list li{display:flex;justify-content:space-between;padding:4px 0;border-top:1px dashed #eef1f5}
.plan-card .pc-k{color:var(--app-soft)}
.plan-card .pc-v{color:var(--app-ink);font-weight:600;text-align:right}

/* 赞赏盒 */
.donate-box{border:1px dashed #e0b98c;background:#fffaf3;border-radius:10px;padding:14px 16px;text-align:center}
.donate-box .dn-desc{font-size:12.5px;color:#7a6a58;line-height:1.75;margin-bottom:10px}
.donate-box .dn-qrbig{width:150px;height:150px;border-radius:8px;object-fit:cover;margin:0 auto 10px}
.donate-box .dn-amt-row{margin:6px 0}
.donate-box .dn-amt{display:inline-block;margin:0 5px 6px;padding:5px 14px;border-radius:18px;
  background:#fff;border:1px solid #e0b98c;color:#c46a17;font-weight:700;font-size:13px}
.donate-box .dn-tip{font-size:11.5px;color:var(--app-soft);margin-top:6px}

/* 激活码 */
.redeem-row{display:flex;gap:8px}
.redeem-row input{flex:1}
.redeem-tip{font-size:11.5px;color:var(--app-soft);margin-top:6px}

/* 商业化设置表单 */
.biz-row{display:flex;align-items:center;gap:9px;margin:0 0 9px}
.biz-row>label{width:118px;flex:none;font-size:12.5px;color:var(--app-soft);text-align:right}
.biz-row input[type=text],.biz-row select{flex:1;min-width:0}
.biz-row .biz-hint{font-size:11px;color:#a3abb5}
.plan-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:10px;margin-bottom:10px}
.pe-card{border:1px solid var(--app-line);border-radius:10px;padding:11px 12px;background:#fcfdfe}
.pe-card .pe-head{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.pe-card .pe-name{flex:1;min-width:0;font-weight:700}
.pe-card .pe-desc{flex:1.4;min-width:0;font-size:12px}
.pe-card .pe-body .pe-price{font-size:12.5px;color:var(--app-soft);margin-bottom:6px}
.pe-card .pe-table{width:100%;border-collapse:collapse;font-size:12px}
.pe-card .pe-table td{padding:4px 0;border-top:1px dashed #eef1f5}
.pe-card .pe-table td:first-child{color:var(--app-soft);width:96px}
.gen-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gen-out{width:100%;height:100px;margin-top:9px;padding:9px;font-size:12px;
  border:1px solid var(--app-line);border-radius:6px;resize:vertical;
  font-family:Consolas,Monaco,monospace;color:var(--app-ink);background:#fcfdfe}
.biz-foot{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--app-line);flex-wrap:wrap}

/* ===== Toast ===== */
#toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(8px);
  background:#1f2733;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;
  opacity:0;pointer-events:none;transition:.25s;z-index:80;box-shadow:0 4px 14px rgba(0,0,0,.2);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}