/* ============================================================
   Online WordPad Pro – WordPress Plugin CSS
   Icons: inline SVG via CSS mask-image (zero CDN dependency)
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Reset inside our container ── */
#owp-app *,
#owp-app *::before,
#owp-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS Variables ── */
#owp-app {
  --owp-bg:             #f0f2f5;
  --owp-surface:        #ffffff;
  --owp-surface2:       #f8f9fb;
  --owp-border:         #e2e6ea;
  --owp-text:           #1a1d23;
  --owp-muted:          #6b7280;
  --owp-placeholder:    #b0b7c3;
  --owp-accent:         #1e40af;
  --owp-accent-lt:      #dbeafe;
  --owp-accent-hov:     #1d3a9e;
  --owp-btn:            #f3f4f6;
  --owp-btn-hov:        #e5e7eb;
  --owp-btn-act:        #dbeafe;
  --owp-sep:            #e2e6ea;
  --owp-shadow:         0 1px 3px rgba(0,0,0,.08);
  --owp-shadow-md:      0 4px 16px rgba(0,0,0,.10);
  --owp-editor-bg:      #ffffff;
  --owp-note-act:       #dbeafe;
  --owp-note-act-brd:   #1e40af;
  --owp-note-hov:       #f0f4ff;
  --owp-scrollbar:      #d1d5db;
  --owp-radius:         10px;
  --owp-icon-color:     #374151;

  /* font */
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--owp-text);
  background: var(--owp-bg);
  transition: background .2s, color .2s;
  border-radius: var(--owp-radius);
  overflow: hidden;
  box-shadow: var(--owp-shadow-md);
}

/* ── DARK MODE ── */
#owp-app.owp-dark {
  --owp-bg:             #0f1117;
  --owp-surface:        #1a1d27;
  --owp-surface2:       #141720;
  --owp-border:         #2a2d3a;
  --owp-text:           #e8eaf0;
  --owp-muted:          #8b92a8;
  --owp-placeholder:    #4a5068;
  --owp-accent:         #3b82f6;
  --owp-accent-lt:      #1e3a5f;
  --owp-accent-hov:     #2563eb;
  --owp-btn:            #252836;
  --owp-btn-hov:        #2e3245;
  --owp-btn-act:        #1e3a5f;
  --owp-sep:            #2a2d3a;
  --owp-shadow:         0 1px 3px rgba(0,0,0,.3);
  --owp-shadow-md:      0 4px 16px rgba(0,0,0,.4);
  --owp-editor-bg:      #1a1d27;
  --owp-note-act:       #1e3a5f;
  --owp-note-act-brd:   #3b82f6;
  --owp-note-hov:       #1e2235;
  --owp-scrollbar:      #2a2d3a;
  --owp-icon-color:     #c9d1e3;
}

/* ── LAYOUT SHELL ── */
.owp-wrap   { display:flex; flex-direction:column; width:100%; height:100%; min-height:600px; }
.owp-main   { display:flex; flex:1; overflow:hidden; }

/* ══════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════ */
.owp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; height:52px;
  background:var(--owp-surface);
  border-bottom:1px solid var(--owp-border);
  flex-shrink:0; z-index:50;
  box-shadow:var(--owp-shadow);
  gap:8px;
}
.owp-header-left  { display:flex; align-items:center; gap:10px; }
.owp-header-right { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.owp-logo        { font-size:17px; font-weight:700; color:var(--owp-accent); letter-spacing:-.5px; }
.owp-logo span   { color:var(--owp-text); font-weight:400; }

/* header buttons */
.owp-hbtn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:8px; border:1px solid var(--owp-border);
  background:var(--owp-btn); color:var(--owp-text);
  font-size:12px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:background .15s, border-color .15s; white-space:nowrap;
}
.owp-hbtn:hover    { background:var(--owp-btn-hov); }
.owp-hbtn.owp-accent-btn {
  background:var(--owp-accent); color:#fff; border-color:var(--owp-accent);
}
.owp-hbtn.owp-accent-btn:hover { background:var(--owp-accent-hov); border-color:var(--owp-accent-hov); }

/* icon-only header btn */
.owp-hbtn-icon {
  width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--owp-border);
  background:var(--owp-btn); cursor:pointer; transition:background .15s;
}
.owp-hbtn-icon:hover { background:var(--owp-btn-hov); }

/* ══════════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════════ */
.owp-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:2px;
  padding:5px 10px; background:var(--owp-surface);
  border-bottom:1px solid var(--owp-border); flex-shrink:0;
}

.owp-sep  { width:1px; height:22px; background:var(--owp-sep); margin:0 3px; flex-shrink:0; }

.owp-tbtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:6px; border:none; cursor:pointer;
  background:transparent; color:var(--owp-text);
  transition:background .12s, color .12s; flex-shrink:0;
  padding:0;
}
.owp-tbtn:hover  { background:var(--owp-btn-hov); }
.owp-tbtn.owp-on { background:var(--owp-btn-act); color:var(--owp-accent); }

.owp-sel {
  height:30px; border-radius:6px; border:1px solid var(--owp-border);
  background:var(--owp-surface); color:var(--owp-text);
  font-size:12px; font-family:inherit; padding:0 6px;
  cursor:pointer; outline:none; flex-shrink:0;
}
.owp-sel:focus { border-color:var(--owp-accent); }
#owp-font-family { width:116px; }
#owp-font-size   { width:54px;  }
#owp-block-type  { width:108px; }

/* ── SVG icon helper ── */
.owp-ic {
  display:block; width:15px; height:15px;
  background-color:var(--owp-icon-color);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  flex-shrink:0;
}

/* Each icon: mask-image = inline SVG data URI */
.ic-undo      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05 1-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05 1-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E"); }
.ic-redo      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 10.6C16.55 9 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 10.6C16.55 9 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z'/%3E%3C/svg%3E"); }
.ic-bold      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); }
.ic-italic    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z'/%3E%3C/svg%3E"); }
.ic-underline { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E"); }
.ic-strike    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z'/%3E%3C/svg%3E"); }
.ic-sub       { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 18h-2v1h3v1h-4v-2c0-.55.45-1 1-1h2v-1h-3v-1h3c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zm-8.29-4L17 9H14.5l-2.5 3.63L9.5 9H7l3.29 5L7 19h2.5l2.71-3.9L14.9 19H17.5l-3.79-5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 18h-2v1h3v1h-4v-2c0-.55.45-1 1-1h2v-1h-3v-1h3c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zm-8.29-4L17 9H14.5l-2.5 3.63L9.5 9H7l3.29 5L7 19h2.5l2.71-3.9L14.9 19H17.5l-3.79-5z'/%3E%3C/svg%3E"); }
.ic-sup       { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 7h-2v1h3v1h-4V7c0-.55.45-1 1-1h2V5h-3V4h3c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zm-8.29 2L17 4H14.5l-2.5 3.63L9.5 4H7l3.29 5L7 14h2.5l2.71-3.9L14.9 14H17.5l-3.79-5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 7h-2v1h3v1h-4V7c0-.55.45-1 1-1h2V5h-3V4h3c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zm-8.29 2L17 4H14.5l-2.5 3.63L9.5 4H7l3.29 5L7 14h2.5l2.71-3.9L14.9 14H17.5l-3.79-5z'/%3E%3C/svg%3E"); }
.ic-color     { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z'/%3E%3C/svg%3E"); }
.ic-highlight { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"); }
.ic-align-l   { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E"); }
.ic-align-c   { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z'/%3E%3C/svg%3E"); }
.ic-align-r   { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E"); }
.ic-align-j   { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z'/%3E%3C/svg%3E"); }
.ic-ul        { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z'/%3E%3C/svg%3E"); }
.ic-ol        { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z'/%3E%3C/svg%3E"); }
.ic-outdent   { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z'/%3E%3C/svg%3E"); }
.ic-indent    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z'/%3E%3C/svg%3E"); }
.ic-link      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E"); }
.ic-image     { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E"); }
.ic-table     { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z'/%3E%3C/svg%3E"); }
.ic-hr        { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3C/svg%3E"); }
.ic-code      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E"); }
.ic-quote     { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E"); }
.ic-clear-fmt { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8V5h-2v3h-3v2h3v3h2v-3h3V8h-3zM3 7v2h10.79l-3.79 4H8l-2 4h4.83l1.79-4h2.38l4-4.59V7H3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8V5h-2v3h-3v2h3v3h2v-3h3V8h-3zM3 7v2h10.79l-3.79 4H8l-2 4h4.83l1.79-4h2.38l4-4.59V7H3z'/%3E%3C/svg%3E"); }
.ic-trash     { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z'/%3E%3C/svg%3E"); }
.ic-expand    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E"); }
.ic-sidebar   { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E"); }
.ic-moon      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z'/%3E%3C/svg%3E"); }
.ic-sun       { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z'/%3E%3C/svg%3E"); }
.ic-save      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E"); }
.ic-download  { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E"); }
.ic-print     { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E"); }
.ic-search    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"); }
.ic-close     { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); }
.ic-plus      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E"); }
.ic-chevup    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z'/%3E%3C/svg%3E"); }
.ic-chevdn    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E"); }
.ic-code2     { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z'/%3E%3C/svg%3E"); }
.ic-upload    { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/%3E%3C/svg%3E"); }
.ic-spellchk  { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.45 16h2.09L10 3H8L3.46 16h2.09l1.12-3h4.66l1.12 3zm-5.2-5L9 5.98 10.75 11H7.25zM21.59 11.59l-8.09 8.08-3.18-3.17-1.41 1.41 4.59 4.59 9.5-9.5-1.41-1.41z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.45 16h2.09L10 3H8L3.46 16h2.09l1.12-3h4.66l1.12 3zm-5.2-5L9 5.98 10.75 11H7.25zM21.59 11.59l-8.09 8.08-3.18-3.17-1.41 1.41 4.59 4.59 9.5-9.5-1.41-1.41z'/%3E%3C/svg%3E"); }

/* active state for icon buttons */
.owp-tbtn.owp-on .owp-ic { background-color: var(--owp-accent); }

/* color indicator bar under font-color icon */
.owp-color-wrap { display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1; }
.owp-color-bar  { width:14px; height:3px; border-radius:2px; }

/* ══════════════════════════════════════════════
   HIGHLIGHT PALETTE
══════════════════════════════════════════════ */
.owp-hl-wrap { position:relative; }
.owp-hl-palette {
  position:absolute; top:calc(100% + 4px); left:0; z-index:300;
  background:var(--owp-surface); border:1px solid var(--owp-border); border-radius:8px;
  box-shadow:var(--owp-shadow-md); padding:8px; display:flex; flex-wrap:wrap; gap:4px; width:128px;
}
.owp-hl-palette.owp-hidden { display:none; }
.owp-swatch {
  width:22px; height:22px; border-radius:5px; cursor:pointer;
  border:2px solid transparent; transition:transform .1s, border-color .1s;
}
.owp-swatch:hover { transform:scale(1.2); border-color:var(--owp-text); }
.owp-swatch-clear {
  background:transparent !important; border:2px solid var(--owp-border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--owp-muted); border-radius:5px;
}

/* ══════════════════════════════════════════════
   FIND BAR
══════════════════════════════════════════════ */
.owp-find-bar {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:7px 14px; background:var(--owp-surface);
  border-bottom:1px solid var(--owp-border); flex-shrink:0;
}
.owp-find-bar.owp-hidden { display:none; }
.owp-find-bar input {
  padding:5px 10px; border-radius:6px; border:1px solid var(--owp-border);
  background:var(--owp-btn); color:var(--owp-text);
  font-size:12px; font-family:inherit; outline:none; width:145px;
}
.owp-find-bar input:focus { border-color:var(--owp-accent); }
.owp-find-bar span { font-size:11px; color:var(--owp-muted); }
.owp-find-btn {
  padding:5px 10px; border-radius:6px; border:1px solid var(--owp-border);
  background:var(--owp-btn); color:var(--owp-text);
  font-size:12px; font-family:inherit; cursor:pointer; font-weight:500;
}
.owp-find-btn:hover { background:var(--owp-btn-hov); }
.owp-find-close {
  margin-left:auto; background:none; border:none; cursor:pointer;
  color:var(--owp-muted); display:flex; align-items:center;
}
.owp-find-close:hover { color:var(--owp-text); }

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
.owp-sidebar {
  width:260px; min-width:260px;
  background:var(--owp-surface2);
  border-right:1px solid var(--owp-border);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width .25s cubic-bezier(.4,0,.2,1), min-width .25s, border .25s;
  flex-shrink:0;
}
.owp-sidebar.owp-sb-hidden { width:0; min-width:0; border-right:none; }

.owp-sb-inner { display:flex; flex-direction:column; height:100%; overflow:hidden; min-width:260px; }

.owp-sb-top  { padding:12px 12px 8px; flex-shrink:0; }

.owp-new-btn {
  width:100%; padding:9px 14px; border-radius:10px; border:none; cursor:pointer;
  background:var(--owp-accent); color:#fff; font-size:13px; font-weight:700;
  font-family:inherit; display:flex; align-items:center; justify-content:center; gap:7px;
  transition:background .15s, transform .1s;
  box-shadow:0 2px 8px rgba(30,64,175,.25);
}
.owp-new-btn:hover { background:var(--owp-accent-hov); transform:translateY(-1px); }

.owp-stats {
  padding:10px 12px 12px; display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:4px; flex-shrink:0; border-bottom:1px solid var(--owp-border);
}
.owp-stat {
  text-align:center; padding:8px 4px; background:var(--owp-surface); border-radius:8px;
}
.owp-stat-lbl { font-size:9px; color:var(--owp-muted); text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
.owp-stat-val { font-size:16px; font-weight:700; color:var(--owp-text); margin-top:2px; font-family:'JetBrains Mono',monospace; }

.owp-sb-search-wrap { position:relative; padding:8px 12px; flex-shrink:0; }
.owp-sb-search-wrap .owp-ic { position:absolute; left:22px; top:50%; transform:translateY(-50%); width:14px; height:14px; }
.owp-sb-search {
  width:100%; padding:7px 10px 7px 32px; border-radius:8px;
  border:1px solid var(--owp-border); background:var(--owp-surface);
  color:var(--owp-text); font-size:12px; font-family:inherit; outline:none;
}
.owp-sb-search:focus { border-color:var(--owp-accent); }

.owp-notes-list { flex:1; overflow-y:auto; padding:4px 8px 8px; display:flex; flex-direction:column; gap:3px; }

.owp-sec-title {
  padding:6px 4px 8px; font-size:9px; font-weight:800; color:var(--owp-muted);
  text-transform:uppercase; letter-spacing:.9px; display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.owp-notes-count { background:var(--owp-btn); color:var(--owp-muted); font-size:10px; padding:1px 7px; border-radius:10px; font-weight:700; }

.owp-note-item {
  padding:10px 11px; border-radius:9px; cursor:pointer;
  border:1.5px solid transparent; background:var(--owp-surface);
  transition:background .12s, border-color .12s;
}
.owp-note-item:hover { background:var(--owp-note-hov); }
.owp-note-item.owp-note-active { background:var(--owp-note-act); border-color:var(--owp-note-act-brd); }
.owp-note-title    { font-size:12px; font-weight:700; color:var(--owp-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.owp-note-preview  { font-size:11px; color:var(--owp-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.owp-note-meta     { font-size:10px; color:var(--owp-muted); margin-top:3px; display:flex; justify-content:space-between; }
.owp-note-row      { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.owp-note-actions  { display:none; gap:2px; }
.owp-note-item:hover .owp-note-actions { display:flex; }
.owp-note-del {
  background:none; border:none; cursor:pointer; color:#ef4444; padding:2px 4px; border-radius:4px;
  display:flex; align-items:center;
}
.owp-note-del:hover { background:#fee2e2; }
.owp-note-del .owp-ic { width:13px; height:13px; background-color:#ef4444; }

/* ══════════════════════════════════════════════
   EDITOR AREA
══════════════════════════════════════════════ */
.owp-editor-area { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--owp-bg); }

.owp-title-bar { padding:14px 24px 6px; flex-shrink:0; display:flex; align-items:center; gap:10px; }
.owp-note-title-inp {
  flex:1; border:none; outline:none; background:transparent;
  font-size:22px; font-weight:700; color:var(--owp-text); font-family:inherit;
  border-bottom:2px solid transparent; padding-bottom:4px; transition:border-color .2s;
}
.owp-note-title-inp:focus { border-bottom-color:var(--owp-accent); }
.owp-note-title-inp::placeholder { color:var(--owp-placeholder); }

.owp-editor-wrap { flex:1; overflow-y:auto; padding:0 24px 24px; display:flex; flex-direction:column; }

.owp-editor {
  flex:1; min-height:300px; background:var(--owp-editor-bg); color:var(--owp-text);
  border-radius:12px; padding:28px 34px; outline:none;
  font-size:15px; line-height:1.75; font-family:inherit;
  box-shadow:var(--owp-shadow-md); border:1px solid var(--owp-border);
  transition:background .2s, color .2s, border-color .2s; word-break:break-word;
}
.owp-editor:focus { border-color:var(--owp-accent); }
.owp-editor:empty::before { content:attr(data-ph); color:var(--owp-placeholder); pointer-events:none; }

/* Editor content typography */
.owp-editor h1 { font-size:2em; font-weight:800; margin:.5em 0 .3em; line-height:1.3; }
.owp-editor h2 { font-size:1.55em; font-weight:700; margin:.5em 0 .3em; }
.owp-editor h3 { font-size:1.25em; font-weight:600; margin:.45em 0 .25em; }
.owp-editor h4 { font-size:1.1em; font-weight:600; margin:.4em 0 .2em; }
.owp-editor p  { margin:.3em 0; }
.owp-editor ul,.owp-editor ol { padding-left:1.8em; margin:.4em 0; }
.owp-editor li { margin:.2em 0; }
.owp-editor blockquote { border-left:3px solid var(--owp-accent); padding-left:14px; color:var(--owp-muted); margin:.6em 0; font-style:italic; }
.owp-editor code  { font-family:'JetBrains Mono',monospace; background:var(--owp-btn); padding:1px 6px; border-radius:4px; font-size:.88em; }
.owp-editor pre   { background:var(--owp-btn); padding:14px; border-radius:10px; overflow-x:auto; font-family:'JetBrains Mono',monospace; font-size:.88em; margin:.6em 0; }
.owp-editor a     { color:var(--owp-accent); text-decoration:underline; }
.owp-editor hr    { border:none; border-top:1px solid var(--owp-border); margin:1em 0; }
.owp-editor table { border-collapse:collapse; width:100%; margin:.6em 0; }
.owp-editor td,.owp-editor th { border:1px solid var(--owp-border); padding:8px 12px; }
.owp-editor th    { background:var(--owp-btn); font-weight:600; }
.owp-editor img   { max-width:100%; border-radius:8px; margin:6px 0; display:block; }

/* ══════════════════════════════════════════════
   STATUS BAR
══════════════════════════════════════════════ */
.owp-status {
  height:26px; background:var(--owp-surface); border-top:1px solid var(--owp-border);
  display:flex; align-items:center; padding:0 16px; gap:14px;
  font-size:11px; color:var(--owp-muted); flex-shrink:0;
}
.owp-status-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; flex-shrink:0; }
.owp-status-right { margin-left:auto; display:flex; gap:12px; }

/* ══════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════ */
.owp-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
}
.owp-modal-overlay.owp-hidden { display:none; }
.owp-modal {
  background:var(--owp-surface); border-radius:16px; padding:28px 30px;
  box-shadow:0 24px 64px rgba(0,0,0,.25); width:420px; max-width:95vw;
  border:1px solid var(--owp-border); font-family:inherit; color:var(--owp-text);
}
.owp-modal h3 { font-size:16px; font-weight:700; margin-bottom:16px; }
.owp-modal input,.owp-modal textarea,.owp-modal select {
  width:100%; padding:9px 12px; border-radius:8px;
  border:1px solid var(--owp-border); background:var(--owp-btn); color:var(--owp-text);
  font-size:13px; font-family:inherit; outline:none; margin-bottom:10px;
}
.owp-modal input:focus,.owp-modal textarea:focus,.owp-modal select:focus { border-color:var(--owp-accent); }
.owp-modal textarea { height:80px; resize:vertical; }
.owp-modal label { display:block; font-size:12px; font-weight:600; color:var(--owp-muted); margin-bottom:4px; }
.owp-modal-tabs { display:flex; gap:2px; margin-bottom:14px; background:var(--owp-btn); border-radius:8px; padding:3px; }
.owp-modal-tab {
  flex:1; padding:7px; border-radius:6px; border:none; cursor:pointer;
  font-size:12px; font-weight:600; font-family:inherit; background:transparent; color:var(--owp-muted);
  transition:background .15s, color .15s;
}
.owp-modal-tab.owp-tab-active { background:var(--owp-surface); color:var(--owp-text); box-shadow:var(--owp-shadow); }
.owp-modal-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.owp-modal-btns button { padding:8px 18px; border-radius:8px; border:none; cursor:pointer; font-size:13px; font-family:inherit; font-weight:600; }
.owp-btn-cancel { background:var(--owp-btn); color:var(--owp-text); }
.owp-btn-cancel:hover { background:var(--owp-btn-hov); }
.owp-btn-ok { background:var(--owp-accent); color:#fff; }
.owp-btn-ok:hover { background:var(--owp-accent-hov); }
.owp-upload-zone {
  border:2px dashed var(--owp-border); border-radius:10px; padding:20px; text-align:center;
  cursor:pointer; transition:border-color .2s, background .2s; margin-bottom:10px;
  color:var(--owp-muted); font-size:13px;
}
.owp-upload-zone:hover { border-color:var(--owp-accent); background:var(--owp-accent-lt); }
.owp-upload-zone .owp-ic { width:28px; height:28px; margin:0 auto 8px; }

/* download dropdown */
.owp-dl-wrap { position:relative; }
.owp-dl-menu {
  position:absolute; top:calc(100% + 4px); right:0; z-index:400;
  background:var(--owp-surface); border:1px solid var(--owp-border); border-radius:10px;
  box-shadow:var(--owp-shadow-md); padding:6px; min-width:160px;
}
.owp-dl-menu.owp-hidden { display:none; }
.owp-dl-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:7px;
  cursor:pointer; font-size:13px; color:var(--owp-text); font-family:inherit; border:none; background:none; width:100%;
}
.owp-dl-item:hover { background:var(--owp-btn-hov); }
.owp-dl-item .owp-ic { flex-shrink:0; }

/* ── Scrollbar ── */
#owp-app ::-webkit-scrollbar       { width:5px; height:5px; }
#owp-app ::-webkit-scrollbar-track { background:transparent; }
#owp-app ::-webkit-scrollbar-thumb { background:var(--owp-scrollbar); border-radius:3px; }

/* ── Tooltip ── */
#owp-app [data-owptip] { position:relative; }
#owp-app [data-owptip]::after {
  content:attr(data-owptip);
  position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%);
  background:#1a1d27; color:#fff; font-size:11px; white-space:nowrap;
  padding:4px 8px; border-radius:5px; pointer-events:none; opacity:0; transition:opacity .15s; z-index:500;
}
#owp-app [data-owptip]:hover::after { opacity:1; }

/* Print */
@media print {
  .owp-header,.owp-toolbar,.owp-sidebar,.owp-status,.owp-find-bar { display:none !important; }
  .owp-editor-area { display:block !important; }
  .owp-editor { box-shadow:none !important; border:none !important; padding:0 !important; }
}

/* Responsive */
@media(max-width:700px) {
  .owp-sidebar { width:200px; min-width:200px; }
  .owp-sb-inner { min-width:200px; }
  .owp-editor { padding:16px; }
  #owp-font-family { width:90px; }
  .owp-hbtn span { display:none; }
}