/* ============================================================
   canvas-editor.css — 共享正文画布编辑器（名片商家后台 + 平台运营后台共用）
   仿主流公众号排版编辑器三栏布局：左样式库 / 中间灰底白纸舞台 / 瘦身工具条
   依赖宿主页面提供调色变量（--brand*/--ink*/--line/--surface-2/--gold/--t）
   ============================================================ */
.cv-tools{display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:7px 10px; background:#fff; border:1px solid var(--line); border-radius:9px;}
.cv-tools .cv-t{font-size:12px; padding:5px 9px; border:1px solid transparent; background:transparent; border-radius:6px; cursor:pointer; font-family:inherit; color:var(--ink-2); display:inline-flex; align-items:center; gap:5px; transition:var(--t,.15s); white-space:nowrap;}
.cv-tools .cv-t:hover{background:var(--surface-2); color:var(--ink);}
.cv-tools .cv-t.on{background:var(--brand-50); color:var(--brand-600); border-color:var(--brand-100,#dbe4ff);}
.cv-tools .cv-sep{width:1px; height:16px; background:var(--line); margin:0 3px;}
.cv-tools .cv-stat{margin-left:auto; font-size:11px; color:var(--ink-3); padding-right:2px;}
/* 三栏主体：左样式库 + 中间灰底白纸（仿小墨鹰/365 编辑器布局） */
.cv-body{display:flex; gap:10px; align-items:stretch; margin-top:8px;}
.cv-library{width:152px; flex-shrink:0; border:1px solid var(--line); border-radius:9px; background:#fff; padding:10px 9px; max-height:52vh; overflow:auto;}
.cv-lib-h{font-size:11px; font-weight:600; color:var(--ink-3); margin:2px 0 8px; letter-spacing:.02em;}
.cv-lib-h:not(:first-child){margin-top:14px;}
.cv-lib-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
.cv-lib-card{border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; padding:8px 6px; display:flex; align-items:center; justify-content:center; min-height:42px; transition:var(--t,.15s); font-family:inherit;}
.cv-lib-card:hover{border-color:var(--brand); box-shadow:0 3px 10px rgba(37,99,235,.10); transform:translateY(-1px);}
.cv-lib-card:active{transform:translateY(0); box-shadow:none;}
.cv-lib-card .lp{display:block; width:100%; text-align:center; font-size:12px; color:var(--ink-2); line-height:1.5;}
.cv-lib-card .lp-h2{display:block; font-weight:700; font-size:12.5px; color:var(--ink); text-align:left; border-left:3px solid var(--brand); padding-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cv-lib-card .lp-quote{display:block; font-size:11px; color:var(--ink-2); background:var(--surface-2); border-left:3px solid var(--gold); border-radius:0 6px 6px 0; padding:4px 6px; text-align:left; white-space:nowrap; overflow:hidden;}
.cv-lib-card .lp-ul{display:block; text-align:left; padding-left:2px; font-size:11.5px; color:var(--ink-2); line-height:1.7;}
.cv-lib-card .lp-ul i{display:block; font-style:normal;}
.cv-lib-card .lp-ul i::before{content:'•'; color:var(--brand); margin-right:4px;}
.cv-lib-card .lp-img{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:var(--ink-3);}
.cv-lib-card .lp-img .box{width:30px; height:19px; border:1px dashed var(--ink-3); border-radius:4px; position:relative; opacity:.75;}
.cv-lib-card .lp-img .box::before{content:''; position:absolute; left:4px; bottom:3px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:7px solid var(--ink-3); opacity:.5;}
.cv-lib-card .lp-hr{display:block; width:100%; border-top:2px solid var(--line); position:relative; padding-top:6px; font-size:11px; color:var(--ink-3); text-align:center;}
.cv-lib-tips{font-size:11px; color:var(--ink-3); line-height:2.1;}
.cv-lib-tips kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:0 4px; font-size:10px; color:var(--ink-2);}
/* 排版模板库 + 链接导入（平台运营后台） */
.cv-lib-tpl{display:flex; flex-direction:column; gap:6px;}
.cv-tpl-card{border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; padding:7px 9px; text-align:left; transition:var(--t,.15s); font-family:inherit; display:flex; flex-direction:column; gap:2px;}
.cv-tpl-card:hover{border-color:var(--brand); box-shadow:0 3px 10px rgba(37,99,235,.10);}
.cv-tpl-card b{font-size:12px; color:var(--ink); font-weight:600;}
.cv-tpl-card i{font-style:normal; font-size:10.5px; color:var(--ink-3); line-height:1.4;}
.cv-import{display:flex; flex-direction:column; gap:6px;}
.cv-import input{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; padding:7px 8px; font-size:12px; font-family:inherit; color:var(--ink); outline:none;}
.cv-import input:focus{border-color:var(--brand);}
.cv-import .cv-import-btn{min-height:34px; font-size:12px; color:var(--brand-600); background:var(--brand-50); border-color:var(--brand-100,#dbe4ff);}
.cv-import .cv-import-btn:disabled{opacity:.55; cursor:default; transform:none;}
.cv-import-hint{font-size:10.5px; color:var(--ink-3); line-height:1.5;}
@media (max-width:920px){ .cv-library{display:none;} .cv-body{margin-top:0;} }
.cv-stage{flex:1; min-width:0; background:#e9ebf0; border-radius:10px; padding:16px 12px 20px; max-height:52vh; overflow:auto;}
.cv-paper{max-width:480px; margin:0 auto; background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.10); padding:16px 16px 20px;}
.cv-canvas{position:relative; padding:2px 0 6px; min-height:150px;}
.cv-canvas.cv-drag{outline:2px dashed var(--brand-500); outline-offset:-2px;}
.cv-empty{padding:26px 16px 30px; text-align:center; color:var(--ink-3); font-size:13px; line-height:1.9;}
.cv-empty b{color:var(--brand-600); font-weight:600;}
.cv-empty kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:1px 5px; color:var(--ink-2);}
.cv-blk{position:relative; display:flex; align-items:stretch; padding:0 10px 0 0;}
.cv-blk .cv-grip{width:34px; flex-shrink:0; display:flex; align-items:flex-start; justify-content:center; gap:1px; padding-top:6px; opacity:0; transition:opacity .12s; cursor:grab;}
.cv-blk:hover .cv-grip,.cv-blk:focus-within .cv-grip{opacity:1;}
.cv-blk .cv-grip button{width:16px; height:18px; border:none; background:transparent; color:var(--ink-3); cursor:pointer; font-size:14px; line-height:1; border-radius:4px; font-family:inherit; padding:0;}
.cv-blk .cv-grip button:hover{background:var(--surface-2); color:var(--brand-600);}
.cv-blk .cv-body{flex:1; min-width:0; position:relative;}
.cv-blk .cv-side{width:66px; flex-shrink:0; display:flex; align-items:flex-start; justify-content:flex-end; gap:2px; padding-top:6px; opacity:0; transition:opacity .12s;}
.cv-blk:hover .cv-side,.cv-blk:focus-within .cv-side{opacity:1;}
.cv-blk .cv-side button{width:20px; height:20px; border:none; background:transparent; color:var(--ink-3); cursor:pointer; border-radius:4px; font-size:12px; line-height:1; font-family:inherit; padding:0;}
.cv-blk .cv-side button:hover{background:var(--surface-2); color:var(--brand-600);}
.cv-blk.cv-dragging{opacity:.45;}
.cv-blk.cv-over .cv-body{box-shadow:inset 0 2px 0 var(--brand-500);}
.cv-ed{outline:none; min-height:26px; padding:5px 8px 6px; border-radius:7px; color:var(--ink); line-height:1.85; white-space:pre-wrap; word-break:break-word; -webkit-user-modify:read-write-plaintext-only;}
.cv-ed:empty::before{content:attr(data-ph); color:var(--ink-3);}
.cv-ed:focus{background:var(--surface-2);}
.cv-blk[data-type="h2"] .cv-ed{font-size:17px; font-weight:700; padding-left:10px; border-left:3px solid var(--brand); margin:6px 0 2px;}
.cv-blk[data-type="quote"] .cv-ed{font-size:14px; color:var(--ink-2); background:var(--surface-2); border-left:3px solid var(--gold); padding:9px 12px; border-radius:0 8px 8px 0; margin:6px 0;}
.cv-blk[data-type="ul"] .cv-ed{font-size:15px; padding-left:14px; border-left:2px solid var(--brand-100,#dbe4ff);}
.cv-blk[data-type="hr"] .cv-body{padding:10px 0;}
.cv-blk[data-type="hr"] .cv-hrline{border:0; border-top:1px solid var(--line); margin:0;}
.cv-blk[data-type="img"] .cv-body{padding:6px 0;}
.cv-imgbox{border:1px dashed var(--line); border-radius:9px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; min-height:76px; overflow:hidden; position:relative;}
.cv-imgbox img{max-width:100%; max-height:220px; display:block; border-radius:8px;}
.cv-imgbox .cv-imgph{font-size:12px; color:var(--ink-3); cursor:pointer; padding:22px 18px;}
.cv-imgbox .cv-imgph:hover{color:var(--brand-600);}
.cv-badge{position:absolute; left:8px; top:8px; font-size:10px; background:rgba(0,0,0,.55); color:#fff; border-radius:4px; padding:1px 6px; pointer-events:none;}
/* 选中文字浮动工具条 */
.cv-fmt{position:absolute; z-index:80; display:none; align-items:center; gap:2px; background:#1f2430; border-radius:9px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.22);}
.cv-fmt.show{display:flex;}
.cv-fmt button{width:26px; height:26px; border:none; background:transparent; color:rgba(255,255,255,.82); border-radius:6px; cursor:pointer; font-size:13px; line-height:1; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; padding:0;}
.cv-fmt button:hover{background:rgba(255,255,255,.14); color:#fff;}
.cv-fmt .cv-sw{width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5);}
.cv-fmt .cv-sep{width:1px; height:16px; background:rgba(255,255,255,.18); margin:0 2px;}
.cv-preview{padding:2px 0 6px;}
.cv-preview .pp-title{font-size:19px; font-weight:700; line-height:1.4; margin-bottom:6px;}
.cv-preview .pp-summary{font-size:13px; color:var(--ink-3); line-height:1.7; margin-bottom:10px;}
.cv-preview .pp-cover{width:100%; border-radius:10px; margin-bottom:12px; display:block;}
.cv-preview .pp-tags{margin:0 0 12px;}
.cv-preview .pp-tag{display:inline-block; font-size:11px; color:var(--brand-600); background:var(--brand-50); border-radius:5px; padding:2px 8px; margin:0 5px 5px 0;}
.cv-preview .pp-empty{color:var(--ink-3); font-size:14px; text-align:center; padding:26px 0;}
.cv-preview mark{background:rgba(255,214,102,.45); color:inherit; padding:0 2px; border-radius:2px;}
.cv-preview .blk-p{font-size:15px; line-height:1.9; margin:0 0 14px;}
.cv-preview .blk-h2{font-size:17px; font-weight:700; margin:18px 0 10px; padding-left:10px; border-left:3px solid var(--brand);}
.cv-preview .blk-quote{font-size:14px; color:var(--ink-2); background:var(--surface-2); border-left:3px solid var(--gold); padding:10px 13px; border-radius:0 8px 8px 0; margin:14px 0; line-height:1.8;}
.cv-preview .blk-ul{margin:0 0 14px; padding-left:22px; font-size:15px; line-height:1.9;}
.cv-preview .blk-ul li{margin-bottom:3px;}
.cv-preview .blk-ul li::marker{color:var(--brand);}
.cv-preview .blk-hr{margin:18px 0; border:0; border-top:1px solid var(--line);}