#myDiv{--bg:#f5f7fb;--paper:#ffffff;--text:#1f2937;--muted:#6b7280;--border:#e5e7eb;--toolbar:#ffffff;--accent:#2563eb;--btn:#fff;--page-width:860px;--page-padding:28px;--page-gap:14px}
#myDiv.dark{--bg:#111315;--paper:#1b1d1f;--text:#e5e7eb;--muted:#98a2b3;--border:#2a2f34;--toolbar:#181b1e;--accent:#60a5fa;--btn:#0f1214}

html,#myDiv{height:100%}
#myDiv{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.frame{min-height:100%;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:50;background:var(--toolbar);border-bottom:1px solid var(--border);display: flex;justify-content: center;align-items: center;}
.toolbar{display:flex;gap:6px;padding:8px;max-height:112px;scrollbar-width:thin;user-select:none;justify-content:center;flex-wrap:wrap;max-width:1052px;}
.tool,.select{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--btn);color:var(--text);padding:6px 8px;border-radius:10px;cursor:pointer}
.tool i{font-size:14px}
.select select{background:transparent;border:none;color:inherit;font:inherit}
.tool:hover,.select:hover{border-color:var(--accent)}
.divider{width:1px;height:28px;background:var(--border);margin:0 2px}
.canvas{flex:1;display:flex;justify-content:center;padding:18px}
.page{background:var(--paper);color:var(--text);width:var(--page-width);min-height:70vh;padding:var(--page-padding);border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
#editor{outline:none;min-height:80vh}
#editor:empty:before{content:attr(data-placeholder);color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:90}
.modal .card{background:var(--paper);color:var(--text);border:1px solid var(--border);border-radius:12px;width:min(720px,94vw);max-height:92vh;overflow:auto;padding:18px}
.row{display:flex;gap:10px;margin:8px 0}
.row label{min-width:110px}
.row input{flex:1;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--btn);color:var(--text)}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.btn1{
  user-select: none;
  border:1px solid var(--border);background:var(--btn);color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
.btn1:hover{border-color:var(--accent)}

.color-pop{position:fixed;z-index:100000;display:none;background:var(--paper);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px;box-shadow:0 8px 28px rgba(0,0,0,.16);max-width:min(92vw,420px)}
.color-grid{display:grid;grid-template-columns:repeat(10,18px);grid-auto-rows:18px;gap:6px}
.swatch{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.1);cursor:pointer}
.color-actions{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.color-actions input{width:120px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--btn);color:var(--text)}
.color-actions .btn1{padding:6px 10px}

.table-pop{position:fixed;background:var(--paper);border:1px solid var(--border);border-radius:8px;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);display:none;z-index:100000;max-width:min(92vw,260px)}
.grid{display:grid;grid-template-columns:repeat(10,18px);grid-auto-rows:18px;gap:4px}
.grid div{border:1px solid var(--border);border-radius:4px}
.grid div.active{background:var(--accent)}
.grid-hint{font-size:12px;color:var(--muted);margin-top:6px}

table.wp-table{border-collapse:collapse;table-layout:fixed;width:max-content;max-width:100%}
.wp-table td,.wp-table th{border:1px solid #444;padding:10px;min-width:60px;min-height:28px;vertical-align:top}
.table-wrap{position:relative;display:inline-block;max-width:100%}
.table-wrap .t-resizer{position:absolute;background:transparent}
.t-resizer.col{width:6px;cursor:col-resize;top:0;bottom:0;transform:translateX(2px)}
.t-resizer.row{height:6px;cursor:row-resize;left:0;right:0;transform:translateY(2px)}
.table-wrap .t-resizer::after{content:"";position:absolute;inset:0;border-right:1px dashed #888;border-bottom:1px dashed #888;opacity:.7;pointer-events:none}
.table-toolbar{position:absolute;left:8px;top:-38px;display:none;gap:6px;z-index:3}
.table-toolbar .btn1{padding:4px 8px;font-size:12px;border-radius:8px;display:inline-flex;align-items:center;gap:6px}
.table-toolbar .btn1 i{font-size:12px}
.table-wrap.active .table-toolbar{display:flex}

.img-wrap{position:relative;display:inline-block;border:1px solid transparent;line-height:0;user-select:none}
.img-wrap img{max-width:100%;height:auto;display:block}
.img-toolbar,.i-handle{display:none}
.img-wrap.active{border-color:#8ab4f8}
.img-wrap.active .img-toolbar{display:flex}
.img-wrap.active .i-handle{display:block}
.i-handle{position:absolute;width:10px;height:10px;background:#fff;border:1px solid #333;box-shadow:0 0 0 1px #fff inset;z-index:2}
.i-handle.nw{left:-5px;top:-5px;cursor:nwse-resize}
.i-handle.ne{right:-5px;top:-5px;cursor:nesw-resize}
.i-handle.sw{left:-5px;bottom:-5px;cursor:nesw-resize}
.i-handle.se{right:-5px;bottom:-5px;cursor:nwse-resize}
.i-handle.n{left:50%;top:-5px;transform:translateX(-50%);cursor:ns-resize}
.i-handle.s{left:50%;bottom:-5px;transform:translateX(-50%);cursor:ns-resize}
.i-handle.w{left:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.i-handle.e{right:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.img-toolbar{position:absolute;right:6px;top:6px;gap:6px;z-index:3}
.img-toolbar button{background:#0008;color:#fff;border:none;border-radius:8px;padding:4px 8px;cursor:pointer;font-size:12px}
.img-toolbar button:hover{background:#000c}

#cropCanvas{max-width:100%;border:2px solid var(--paper2);background:#f7f7f7}
.crop-hint{font-size:12px;color:var(--muted);margin:8px 0}

.frame:fullscreen .canvas{
  padding:10px;
}

.content-area ol span {
  display: block;
}

.img-support2 {
  display: block;
  margin: 15px auto;
}

#myDiv .frame:fullscreen .canvas {
  background-color: #efefef;
} 

#myDiv.dark .frame:fullscreen .canvas {
  background-color: #333;
} 

.frame:fullscreen .page{max-height:calc(100vh - 100px);overflow:auto}

#myDiv.dark .select,#myDiv.dark .select select{background:#111315;color:#fff;border-color:#d0d5dd}
#myDiv.dark .select:hover{border-color:#60a5fa}

@page { size: A4; margin: 12mm 12mm; }
@media print {
  #myDiv, .page { background:#fff !important; }
  #myDiv.dark #editor, #myDiv.dark #editor * { color:#000 !important; text-shadow:none !important; -webkit-print-color-adjust:economy !important; print-color-adjust:economy !important; }
  #editor span[style*="background"], #editor mark { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  :root { color-scheme: light; }
  .topbar, .modal, .color-pop, .table-pop { display:none !important; }
  .canvas { padding:0 !important; }
  .page { width:auto !important; max-width:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:12mm !important; }
  #editor, #editor * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  #editor { overflow-wrap:anywhere; word-break:break-word; }
  p { margin:0 0 10pt 0; orphans:3; widows:3; }
  table, .wp-table { width:100% !important; table-layout:fixed !important; }
  .wp-table td, .wp-table th { word-wrap:break-word; overflow-wrap:anywhere; }
  img, .img-wrap img { max-width:100% !important; height:auto !important; }
  h1,h2,h3,h4,h5,h6, ul,ol,li, blockquote, pre, table, thead, tbody, tfoot, tr, td, th, img, .img-wrap, .table-wrap { break-inside:avoid; page-break-inside:avoid; }
  #editor::after { content:""; display:block; height:6mm; }
}

.page{ width:min(var(--page-width), calc(100vw - var(--page-gap)*2)); margin-inline:auto; }

#editor ul,
#editor ol { 
  /* list-style: revert !important;  */
  list-style-position: outside !important; 
  margin: 0 0 0.5em 1.25em !important; 
  padding-left: 1.25em !important; 
}
#editor li { 
  /* list-style: inherit !important;  */
  display: list-item !important; 
}

@media (max-width:1024px){
  .canvas{ padding:12px; }
  .page{ padding:20px; }
  .toolbar{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; white-space:nowrap; justify-content:flex-start; gap:8px; -webkit-overflow-scrolling:touch; touch-action: pan-x; }
  .tool,.select{ flex:0 0 auto; padding:5px 7px; border-radius:9px; }
  .tool i{ font-size:13px; }
  .select select{ max-width:140px; font-size:14px; }
}
@media (max-width:768px){
  .canvas{ padding:10px; }
  .page{ padding:16px; }
  .toolbar{ max-height:64px; }
  #editor{ min-height:80vh; }
  .select select{ max-width:110px; font-size:13px; }
  .tool,.select{ padding:4px 6px; }
}
@media (max-width:480px){
  .page{ padding:12px; }
  .tool i{ font-size:12px; }
  .select select{ max-width:96px; font-size:12px; }
}

/* Wordpad TinyMCE tool page */
.editor-section { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); padding: 0 0; margin-bottom: 60px; }
.editor-container { background-color: var(--bg-color); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; max-width: 1000px; margin: 0 auto; }
.print-btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--primary-color); color: white; padding: 10px 20px; border-radius: 6px; font-weight: 600; transition: var(--transition); margin-top: 20px; border: none; cursor: pointer; }
.print-btn:hover { background-color: var(--primary-dark); transform: translateY(-2px); }
@media (max-width: 768px){ .tools-grid { grid-template-columns: 1fr; } }