#webeditorWorkspace { --we-blue-50:#eff6ff; --we-blue-100:#dbeafe; --we-blue-600:#2563eb; --we-blue-700:#1d4ed8; --we-blue-800:#1e40af; --we-ink:#172033; --we-muted:#667085; --we-line:#e4e9f1; --we-surface:#f7f9fc; padding:34px 0 70px; color:var(--we-ink); }
#webeditorWorkspace * { box-sizing:border-box; }
#webeditorWorkspace .webeditor-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }
#webeditorWorkspace .webeditor-card-head p { margin:0; color:var(--we-blue-600); font-size:11px; font-weight:800; letter-spacing:.13em; }
#webeditorWorkspace .webediter { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; width:100%; }
#webeditorWorkspace .webeditor-card { min-width:0; overflow:visible; border:1px solid var(--we-line); border-radius:14px; background:#fff; box-shadow:0 18px 50px rgba(30, 64, 175, .07); }
#webeditorWorkspace .webeditor-card-head { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:88px; padding:22px 24px; border-bottom:1px solid var(--we-line); }
#webeditorWorkspace .webeditor-card-head h3 { margin:6px 0 0; font-size:21px; line-height:1.2; letter-spacing:-.04em; }
#webeditorWorkspace .webeditor-instance-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--we-blue-100); border-radius:999px; background:var(--we-blue-50); color:var(--we-blue-700); font-size:9px; font-weight:800; letter-spacing:.07em; }
#webeditorWorkspace .webeditor-instance-badge i { width:6px; height:6px; border-radius:50%; background:var(--we-blue-600); }
#webeditorWorkspace .jw-editor { position:relative; display:flex; height:500px; min-height:0; flex-direction:column; margin:22px 24px 0; overflow:visible; border:1px solid #dce3ed; border-radius:10px; background:#fff; transition:border-color .18s ease, box-shadow .18s ease; }
#webeditorWorkspace .jw-editor:focus-within { border-color:var(--we-blue-600); box-shadow:0 0 0 3px rgba(37, 99, 235, .1); }
#webeditorWorkspace .custom-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-height:54px; padding:9px 8px; border-bottom:1px solid var(--we-line); border-radius:10px 10px 0 0; background:var(--we-surface); }
#webeditorWorkspace .custom-toolbar .group { display:flex; align-items:center; gap:2px; padding-right:5px; border-right:1px solid #dfe5ed; }
#webeditorWorkspace .custom-toolbar .group:last-child { padding-right:0; border-right:0; }
#webeditorWorkspace .editor-btn, #webeditorWorkspace .background-color { position:relative; display:grid; width:27px; height:27px; padding:0; place-items:center; border:1px solid transparent; border-radius:6px; background:transparent; color:#344054; cursor:pointer; transition:border-color .16s ease, background-color .16s ease, color .16s ease; }
#webeditorWorkspace .editor-btn:hover, #webeditorWorkspace .background-color:hover, #webeditorWorkspace .editor-btn.ql-active, #webeditorWorkspace .editor-btn.is-active { border-color:#cbdcfb; background:var(--we-blue-50); color:var(--we-blue-700); }
#webeditorWorkspace .editor-btn:focus-visible, #webeditorWorkspace .background-color:focus-visible, #webeditorWorkspace .inputFile:focus-within, #webeditorWorkspace select:focus-visible { outline:3px solid rgba(37, 99, 235, .16); outline-offset:2px; }
#webeditorWorkspace .editor-btn img { width:15px; height:15px; opacity:.72; }
#webeditorWorkspace .editor-btn:hover img, #webeditorWorkspace .editor-btn.ql-active img { opacity:1; }
#webeditorWorkspace .font-color { font-size:14px; font-weight:750; }
#webeditorWorkspace .background-color { width:22px; height:22px; margin:0 3px; border:3px solid #fff; border-radius:5px; background:#111827; box-shadow:0 0 0 1px #cfd7e3; }
#webeditorWorkspace .fontSize { height:27px; padding:0 20px 0 7px; border:1px solid #d7dee9; border-radius:6px; outline:0; background:#fff; color:#475467; font-size:10px; }
#webeditorWorkspace .ql-picker.ql-size { width:60px; }
#webeditorWorkspace .webeditor-html-btn { width:42px; font-size:9px; font-weight:800; letter-spacing:.04em; }
#webeditorWorkspace .inputFile { position:relative; display:inline-flex; height:27px; align-items:center; padding:0 7px; border:1px solid #d7dee9; border-radius:6px; background:#fff; color:#475467; font-size:9px; font-weight:650; cursor:pointer; transition:border-color .16s ease, background-color .16s ease, color .16s ease; }
#webeditorWorkspace .inputFile:hover { border-color:#bfdbfe; background:var(--we-blue-50); color:var(--we-blue-700); }
#webeditorWorkspace .inputFile input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
#webeditorWorkspace .inputFile .progress { position:absolute; right:0; bottom:0; left:0; height:2px; overflow:hidden; border-radius:0 0 6px 6px; }
#webeditorWorkspace .jweditor, #webeditorWorkspace .ql-container { min-height:0; flex:1; }
#webeditorWorkspace .ql-container.ql-snow { border:0; border-radius:0 0 10px 10px; color:var(--we-ink); font-family:inherit; font-size:14px; }
#webeditorWorkspace .ql-editor { min-height:100%; padding:22px 24px; overflow-y:auto; line-height:1.75; scrollbar-color:#cbd5e1 transparent; scrollbar-width:thin; }
#webeditorWorkspace .ql-editor h2 { margin:0 0 14px; font-size:23px; letter-spacing:-.04em; }
#webeditorWorkspace .ql-editor p { margin:0 0 13px; }
#webeditorWorkspace .ql-editor img { max-width:100%; height:auto; }
#webeditorWorkspace .colorBox { position:absolute; top:34px; left:0; z-index:5; display:grid; width:142px; grid-template-columns:repeat(6, 1fr); gap:5px; padding:10px; border:1px solid var(--we-line); border-radius:9px; background:#fff; box-shadow:0 14px 34px rgba(30, 64, 175, .14); }
#webeditorWorkspace .colorBox button { width:15px; height:15px; padding:0; border:1px solid rgba(15, 23, 42, .16); border-radius:3px; cursor:pointer; }
#webeditorWorkspace .webeditor-card-foot { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:62px; padding:13px 24px; }
#webeditorWorkspace .webeditor-stats { display:flex; align-items:center; gap:15px; color:var(--we-muted); font-size:10px; }
#webeditorWorkspace .webeditor-stats span { display:inline-flex; align-items:center; gap:4px; }
#webeditorWorkspace .webeditor-stats b { color:var(--we-ink); font-weight:750; font-variant-numeric:tabular-nums; }
#webeditorWorkspace .webeditor-mode { display:inline-flex; align-items:center; gap:7px; color:var(--we-blue-700); font-size:9px; font-weight:800; letter-spacing:.06em; }
#webeditorWorkspace .webeditor-mode i { width:6px; height:6px; border-radius:50%; background:var(--we-blue-600); }
#webeditorWorkspace .webeditor-mode.is-html { color:#475467; }
#webeditorWorkspace .webeditor-mode.is-html i { background:#98a2b3; }
#webeditorWorkspace .webeditor-guide { display:flex; align-items:center; gap:13px; margin-top:18px; padding:18px 20px; border:1px solid var(--we-line); border-radius:10px; background:var(--we-surface); }
#webeditorWorkspace .webeditor-guide > span { display:grid; width:38px; height:38px; place-items:center; flex:0 0 auto; border-radius:9px; background:var(--we-blue-100); color:var(--we-blue-700); }
#webeditorWorkspace .webeditor-guide svg { width:20px; height:20px; }
#webeditorWorkspace .webeditor-guide p { margin:0; color:var(--we-muted); font-size:11px; line-height:1.6; }
#webeditorWorkspace .webeditor-guide strong { display:block; margin-bottom:2px; color:var(--we-ink); font-size:12px; }
#webeditorWorkspace ::-webkit-scrollbar { width:8px; height:8px; }
#webeditorWorkspace ::-webkit-scrollbar-track { background:transparent; }
#webeditorWorkspace ::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:8px; background:#cbd5e1; background-clip:padding-box; }

@media (max-width:1120px) {
	#webeditorWorkspace .webediter { grid-template-columns:1fr; }
	#webeditorWorkspace .jw-editor { height:470px; }
}

@media (max-width:768px) {
	#webeditorWorkspace { padding:22px 0 48px; }
	#webeditorWorkspace .webeditor-card { border-radius:11px; }
	#webeditorWorkspace .webeditor-card-head { padding:20px; }
	#webeditorWorkspace .jw-editor { height:500px; margin:18px 20px 0; }
	#webeditorWorkspace .webeditor-card-foot { padding-right:20px; padding-left:20px; }
}

@media (max-width:520px) {
	#webeditorWorkspace .webeditor-card-head { align-items:flex-start; }
	#webeditorWorkspace .webeditor-instance-badge { padding:6px 8px; }
	#webeditorWorkspace .jw-editor { height:560px; }
	#webeditorWorkspace .custom-toolbar { align-items:flex-start; }
	#webeditorWorkspace .ql-editor { padding:19px 17px; }
}