/* BlockKit 区块样式 + 编辑器界面（ezuhe.cn） */

/* ---------- 区块外观 ---------- */
.blk-cta { text-align:center; padding:3rem 1rem; background:var(--bg-alt); border-radius:12px; margin-top:2rem; }
.blk-cta h2 { margin-bottom:0.6rem; }
.blk-cta p { color:var(--text-secondary); max-width:640px; margin:0 auto; }
.blk-cta .form-btn { display:inline-block; margin-top:1rem; }

.blk-visitor { text-align:center; padding:0.8rem 0 0; }
/* 2026-10-16 用户命令：去掉计数条底色框，只留文字（与上下不粘连） */
.visitor-pill { display:inline-flex; align-items:center; gap:0.6rem; padding:0; background:transparent; border:none; }
.visitor-emoji { font-size:1.2rem; }
.visitor-label { font-size:0.85rem; color:var(--text-secondary); }
.visitor-count { font-size:1.3rem; font-weight:800; color:var(--primary); }

.blk-variant-plain { margin-top:2rem; }

.blk-imgtext { display:flex; gap:1.5rem; align-items:center; margin-top:2rem; }
.blk-imgtext-img { flex:0 0 38%; }
.blk-imgtext-img img { width:100%; border-radius:10px; display:block; }
.blk-imgtext-body { flex:1; }
.blk-imgtext-body h2 { margin-bottom:0.5rem; }
.blk-imgtext-body p { color:var(--text-secondary); line-height:1.7; }
.blk-side-right { flex-direction:row-reverse; }

.blk-gallery { margin-top:2rem; }
.blk-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1rem; }
.blk-gallery-item { margin:0; }
.blk-gallery-item img { width:100%; height:180px; object-fit:cover; border-radius:10px; display:block; }

.blk-video { margin-top:2rem; }
.blk-video-frame { position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000; }
.blk-video-frame iframe,
.blk-video-frame video { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.blk-video-empty { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#cbd5e1; font-size:0.95rem; }
.blk-video-cap { text-align:center; color:var(--text-secondary); font-size:0.9rem; margin-top:0.6rem; }

.blk-rich { margin-top:2rem; }
.blk-rich-body { line-height:1.8; }
.blk-rich-body p { margin-bottom:0.6rem; }

.blk-divider { margin:2rem 0; }
.blk-divider hr { border:0; border-top:1px solid var(--border-color); }

/* ---------- 修饰类 ---------- */
.blk-fs-sm h1, .blk-fs-sm h2, .blk-fs-sm h3 { font-size:0.85em; }
.blk-fs-lg h1, .blk-fs-lg h2, .blk-fs-lg h3 { font-size:1.2em; }
.blk-pad-sm { padding-top:1rem !important; padding-bottom:1rem !important; }
.blk-pad-lg { padding-top:4rem !important; padding-bottom:4rem !important; }
.blk-radius { border-radius:14px; }

/* ---------- 编辑态 ---------- */
body.edit-mode [data-block] { position:relative; outline:1.5px dashed var(--primary); outline-offset:3px; border-radius:4px; }
.blk-toolbar { position:absolute; top:6px; right:6px; z-index:60; display:flex; gap:2px; background:#fff; border:1px solid var(--border-color); border-radius:8px; padding:3px; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.blk-toolbar button { border:0; background:transparent; cursor:pointer; font-size:12px; padding:3px 7px; border-radius:6px; color:#333; line-height:1.2; }
.blk-toolbar button:hover { background:var(--bg-alt); }
.blk-toolbar button.blk-tb-square { font-weight:600; }
.blk-toolbar button.blk-tb-square.on { background:var(--success,#16a34a); color:#fff; }
.blk-square-btn.on { background:var(--success,#16a34a); }

.blk-addbar { text-align:center; padding:1rem 0; }
.blk-addbar button { border:1.5px dashed var(--primary); background:transparent; color:var(--primary); cursor:pointer; font-size:0.9rem; padding:0.5rem 1.4rem; border-radius:100px; }
.blk-addbar button:hover { background:var(--bg-alt); }

.blk-exportbar { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:80; display:flex; gap:8px; }
.blk-exportbar button { border:1px solid var(--border-color); background:#fff; color:#333; cursor:pointer; font-size:0.85rem; padding:0.5rem 1rem; border-radius:100px; box-shadow:0 2px 10px rgba(0,0,0,0.18); }
.blk-exportbar .blk-ex-primary { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---------- 弹层 ---------- */
.blk-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.5); z-index:90; display:flex; align-items:center; justify-content:center; }
.blk-modal { background:var(--bg-primary,#fff); color:var(--text-primary,#111); border-radius:14px; padding:1.4rem; width:min(92vw,430px); max-height:80vh; overflow:auto; }
.blk-modal h3 { margin-bottom:1rem; }
.blk-close { margin-top:0.6rem; border:1px solid var(--border-color); background:transparent; color:inherit; padding:0.4rem 1.2rem; border-radius:8px; cursor:pointer; }
.blk-menu-item { display:block; width:100%; text-align:left; padding:0.7rem 0.9rem; border:1px solid var(--border-color); border-radius:10px; margin-bottom:0.5rem; background:transparent; cursor:pointer; color:inherit; }
.blk-menu-item:hover { background:var(--bg-alt); }
.blk-menu-desc { display:block; font-size:0.8rem; color:var(--text-secondary); margin-top:2px; }
.blk-field { margin-bottom:0.9rem; }
.blk-field label { display:block; font-size:0.82rem; color:var(--text-secondary); margin-bottom:0.3rem; }
.blk-field input[type=text] { width:100%; padding:0.5rem; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-primary); color:var(--text-primary); }
.blk-field select { padding:0.4rem 0.6rem; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-primary); color:var(--text-primary); }
.blk-mini-btn { margin-top:0.4rem; border:0; background:var(--primary); color:#fff; padding:0.35rem 0.9rem; border-radius:8px; cursor:pointer; }
.blk-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.blk-swatch { width:26px; height:26px; border-radius:6px; border:2px solid transparent; cursor:pointer; }
.blk-swatch.active { border-color:var(--primary); }

/* ---------- 自由尺寸控件 ---------- */
.blk-hint { font-weight:400; color:var(--text-secondary); font-size:0.75rem; }
.blk-numrow { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.blk-numrow button { width:34px; height:32px; border:1px solid var(--border-color); background:var(--bg-alt); color:var(--text-primary); border-radius:8px; cursor:pointer; font-size:15px; line-height:1; }
.blk-numrow button:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.blk-numrow input[type=number] { flex:1; min-width:0; padding:0.45rem; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-primary); color:var(--text-primary); }
.blk-unitrow { font-size:0.8rem; color:var(--text-secondary); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.blk-unitrow select { padding:0.3rem 0.5rem; border:1px solid var(--border-color); border-radius:6px; background:var(--bg-primary); color:var(--text-primary); }
.blk-ruler { position:relative; height:20px; margin:2px 0 4px; border-bottom:1px solid var(--border-color); }
.blk-tick { position:absolute; top:0; transform:translateX(-50%); font-size:0.68rem; color:var(--text-secondary); white-space:nowrap; }
.blk-tick::after { content:''; position:absolute; left:50%; top:14px; width:1px; height:5px; background:var(--border-color); }
.blk-modal input[type=range] { width:100%; accent-color:var(--primary); }

/* ---------- 拖拽手柄 ---------- */
body.edit-mode .blk-handle { position:absolute; z-index:62; background:var(--primary); opacity:0.55; border-radius:3px; }
body.edit-mode .blk-handle:hover { opacity:1; }
.blk-handle-w { top:50%; right:-5px; width:10px; height:42px; margin-top:-21px; cursor:ew-resize; }
.blk-handle-wl { top:50%; left:-5px; width:10px; height:42px; margin-top:-21px; cursor:ew-resize; }
.blk-handle-h { bottom:-5px; left:50%; width:42px; height:10px; margin-left:-21px; cursor:ns-resize; }
.blk-handle-ht { top:-5px; left:50%; width:42px; height:10px; margin-left:-21px; cursor:ns-resize; }
.blk-handle-se { right:-5px; bottom:-5px; width:14px; height:14px; cursor:nwse-resize; border-radius:50%; }
body.blk-dragging { user-select:none; cursor:crosshair; }
body.blk-dragging .blk-handle { opacity:1; }
.blk-radius-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.blk-corner { display:flex; flex-direction:column; gap:3px; font-size:0.78rem; color:var(--text-secondary); }
.blk-corner input { padding:0.4rem; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-primary); color:var(--text-primary); width:100%; }
.blk-size-badge { position:absolute; z-index:63; right:6px; bottom:6px; background:rgba(15,23,42,0.85); color:#fff; font-size:0.72rem; padding:2px 8px; border-radius:6px; pointer-events:none; opacity:0; transition:opacity .15s; }
body.edit-mode [data-block]:hover .blk-size-badge,
body.blk-dragging .blk-size-badge { opacity:1; }

@media (max-width: 640px) {
  .blk-imgtext { flex-direction:column; }
  .blk-imgtext-img { flex:none; width:100%; }
  .blk-toolbar button { padding:4px 6px; }
  .blk-exportbar { flex-wrap:wrap; width:92vw; justify-content:center; }
}