/* =====================================================
   WordPad Pro  –  WordPress Plugin Stylesheet v3
   All icons: inline SVG mask-image (no CDN needed)
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

/* ── Reset ── */
#wpp-root *, #wpp-root *::before, #wpp-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
#wpp-root button, #wpp-root input, #wpp-root select, #wpp-root textarea { font-family: inherit; }

/* ══════════════════════════════════════════
   CSS VARIABLES – light theme
══════════════════════════════════════════ */
#wpp-root {
  /* surfaces */
  --c-bg:        #f4f6f9;
  --c-surface:   #ffffff;
  --c-surface2:  #f8fafc;
  --c-border:    #e4e8ef;
  --c-border2:   #d0d7e3;
  /* text */
  --c-text:      #1e2330;
  --c-muted:     #64748b;
  --c-placeholder:#a8b3c4;
  /* accent */
  --c-accent:    #2563eb;
  --c-accent2:   #1d4ed8;
  --c-accent-lt: #dbeafe;
  /* ui elements */
  --c-btn:       #f1f5f9;
  --c-btn-hov:   #e2e8f0;
  --c-btn-act:   #dbeafe;
  --c-sep:       #e4e8ef;
  /* sidebar */
  --c-sb-bg:     #f8fafc;
  --c-nb-act:    #e0edff;
  --c-nb-brd:    #2563eb;
  --c-nb-hov:    #eef3ff;
  /* editor */
  --c-ed-bg:     #ffffff;
  --c-ed-brd:    #d0d7e3;
  /* shadow */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:   0 8px 30px rgba(0,0,0,.13);
  /* misc */
  --radius:      10px;
  --radius-sm:   7px;
  --ic-col:      #475569;  /* icon mask colour */

  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-bg);
  transition: background .2s, color .2s;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* ══════════════════════════════════════════
   DARK THEME
══════════════════════════════════════════ */
#wpp-root.dark {
  --c-bg:        #12151e;
  --c-surface:   #1c2030;
  --c-surface2:  #161a26;
  --c-border:    #2d3347;
  --c-border2:   #3a4260;
  --c-text:      #e2e8f4;
  --c-muted:     #8896ae;
  --c-placeholder:#3e4d68;
  --c-accent:    #4f8ef7;
  --c-accent2:   #3b7af5;
  --c-accent-lt: #1e2f50;
  --c-btn:       #242a3d;
  --c-btn-hov:   #2e3650;
  --c-btn-act:   #1e2f50;
  --c-sep:       #2d3347;
  --c-sb-bg:     #161a26;
  --c-nb-act:    #1e2f50;
  --c-nb-brd:    #4f8ef7;
  --c-nb-hov:    #1e2538;
  --c-ed-bg:     #1c2030;
  --c-ed-brd:    #2d3347;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,.4);
  --ic-col:      #94a3c0;
}

/* ══════════════════════════════════════════
   LAYOUT SHELL
══════════════════════════════════════════ */
.wpp-shell  { display:flex; flex-direction:column; width:100%; height:100%; min-height:560px; }
.wpp-body   { display:flex; flex:1; overflow:hidden; }

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.wpp-topbar {
  height:54px; background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; flex-shrink:0; z-index:60;
  box-shadow:var(--shadow-sm); gap:8px;
}
.wpp-topbar-l { display:flex; align-items:center; gap:10px; }
.wpp-topbar-r { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }

.wpp-logo { font-size:18px; font-weight:800; color:var(--c-accent); letter-spacing:-.5px; user-select:none; }
.wpp-logo em { color:var(--c-text); font-style:normal; font-weight:600; }

/* icon-only topbar btn */
.wpp-ico-btn {
  width:36px; height:36px; border-radius:8px; border:1px solid var(--c-border);
  background:var(--c-btn); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s, border-color .12s; flex-shrink:0;
}
.wpp-ico-btn:hover { background:var(--c-btn-hov); }

/* text topbar btn */
.wpp-txt-btn {
  height:36px; padding:0 13px; border-radius:8px; border:1px solid var(--c-border);
  background:var(--c-btn); color:var(--c-text); display:flex; align-items:center; gap:7px;
  cursor:pointer; font-size:12.5px; font-weight:700; white-space:nowrap;
  transition:background .12s, border-color .12s; flex-shrink:0;
}
.wpp-txt-btn:hover { background:var(--c-btn-hov); }
.wpp-txt-btn.wpp-primary { background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.wpp-txt-btn.wpp-primary:hover { background:var(--c-accent2); border-color:var(--c-accent2); }

/* New Note big button in sidebar */
.wpp-new-btn {
  width:100%; height:40px; border-radius:10px; border:none;
  background:var(--c-accent); color:#fff; font-size:13.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; transition:background .15s, transform .1s;
  box-shadow:0 3px 10px rgba(37,99,235,.28);
}
.wpp-new-btn:hover { background:var(--c-accent2); transform:translateY(-1px); }

/* ══════════════════════════════════════════
   SVG ICON SYSTEM  (mask-image)
══════════════════════════════════════════ */
.ic {
  display:inline-block; flex-shrink:0;
  background-color:var(--ic-col);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
/* sizes */
.ic-16 { width:16px; height:16px; }
.ic-15 { width:15px; height:15px; }
.ic-14 { width:14px; height:14px; }
.ic-12 { width:12px; height:12px; }
/* white override */
.ic-white { background-color:#fff !important; }
/* accent override */
.ic-accent { background-color:var(--c-accent) !important; }

/* Define every icon via mask-image */
.i-menu        { -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");}
.i-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.36a6.99 6.99 0 01-8.54-8.54A8.97 8.97 0 0012 3z'/%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.36a6.99 6.99 0 01-8.54-8.54A8.97 8.97 0 0012 3z'/%3E%3C/svg%3E");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-pin         { -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 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z'/%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 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z'/%3E%3C/svg%3E");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-marker      { -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.5 1.15c-.44 0-.88.16-1.22.5L12 7l-1 4 4-1 5.36-5.28c.68-.68.68-1.75 0-2.43-.34-.34-.78-.14-1.22-.14zM2 17l1 4h4l9.5-9.5-4-4L2 17z'/%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.5 1.15c-.44 0-.88.16-1.22.5L12 7l-1 4 4-1 5.36-5.28c.68-.68.68-1.75 0-2.43-.34-.34-.78-.14-1.22-.14zM2 17l1 4h4l9.5-9.5-4-4L2 17z'/%3E%3C/svg%3E");}
.i-al          { -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");}
.i-ac          { -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");}
.i-ar          { -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");}
.i-aj          { -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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-unlink      { -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 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.28-.77 2.39-1.87 2.89L19.6 16.3A5.004 5.004 0 0022 12c0-2.76-2.24-5-5-5zm-1 4h-2.19l2 2H16v-2zM2 4.27l3.11 3.11A4.991 4.991 0 002 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07L8.73 11H8v2h2.73l2 2H8v1.9h3.27l3.32 3.32 1.41-1.41L3.41 2.86 2 4.27z'/%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 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.28-.77 2.39-1.87 2.89L19.6 16.3A5.004 5.004 0 0022 12c0-2.76-2.24-5-5-5zm-1 4h-2.19l2 2H16v-2zM2 4.27l3.11 3.11A4.991 4.991 0 002 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07L8.73 11H8v2h2.73l2 2H8v1.9h3.27l3.32 3.32 1.41-1.41L3.41 2.86 2 4.27z'/%3E%3C/svg%3E");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-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");}
.i-clrfmt      { -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");}
.i-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");}
.i-shrink      { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%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='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E");}
.i-find        { -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");}
.i-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");}
.i-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");}
.i-spacing     { -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 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm4-2v2h12V5H10zm0 14h12v-2H10v2zm0-6h12v-2H10v2z'/%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 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm4-2v2h12V5H10zm0 14h12v-2H10v2zm0-6h12v-2H10v2z'/%3E%3C/svg%3E");}

/* active state: icon turns accent */
.wpp-tbtn.on .ic { background-color: var(--c-accent); }

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

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

.wpp-tbtn {
  width:28px; height:28px; border-radius:5px; border:none;
  background:transparent; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  flex-shrink:0; transition:background .1s; padding:0;
}
.wpp-tbtn:hover { background:var(--c-btn-hov); }
.wpp-tbtn.on    { background:var(--c-btn-act); }

.wpp-sel {
  height:28px; border-radius:5px; border:1px solid var(--c-border);
  background:var(--c-surface); color:var(--c-text);
  font-size:12px; font-family:inherit;
  padding:0 5px; cursor:pointer; outline:none; flex-shrink:0;
}
.wpp-sel:focus { border-color:var(--c-accent); outline:none; }
#wpp-font   { width:118px; }
#wpp-size   { width:54px; }
#wpp-block  { width:110px; }

/* color swatch button */
.wpp-clr-btn {
  width:28px; height:28px; border-radius:5px; border:none; background:transparent;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; flex-shrink:0; transition:background .1s; padding:0;
}
.wpp-clr-btn:hover { background:var(--c-btn-hov); }
.wpp-clr-bar { width:16px; height:3px; border-radius:2px; }

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

/* spacing popup */
.wpp-sp-wrap  { position:relative; }
.wpp-sp-popup {
  position:absolute; top:calc(100% + 5px); left:0; z-index:500;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:8px; box-shadow:var(--shadow-md); padding:6px; min-width:90px;
}
.wpp-sp-popup.h { display:none; }
.sp-item {
  padding:6px 12px; border-radius:5px; cursor:pointer; font-size:13px; color:var(--c-text);
  transition:background .1s;
}
.sp-item:hover { background:var(--c-btn-hov); }

/* ══════════════════════════════════════════
   FIND BAR
══════════════════════════════════════════ */
.wpp-findbar {
  background:var(--c-surface); border-bottom:1px solid var(--c-border);
  padding:6px 14px; display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap;
}
.wpp-findbar.h { display:none; }
.wpp-findbar input {
  height:28px; padding:0 10px; border-radius:6px;
  border:1px solid var(--c-border); background:var(--c-btn); color:var(--c-text);
  font-size:12px; font-family:inherit; outline:none; width:150px;
}
.wpp-findbar input:focus { border-color:var(--c-accent); }
.wpp-findbtn {
  height:28px; padding:0 10px; border-radius:6px; border:1px solid var(--c-border);
  background:var(--c-btn); color:var(--c-text); font-size:12px; font-weight:600;
  font-family:inherit; cursor:pointer;
}
.wpp-findbtn:hover { background:var(--c-btn-hov); }
.wpp-find-count { font-size:11px; color:var(--c-muted); }
.wpp-find-x { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--c-muted); display:flex; }
.wpp-find-x:hover { color:var(--c-text); }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.wpp-sidebar {
  width:270px; min-width:270px; background:var(--c-sb-bg);
  border-right:1px solid var(--c-border);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width .24s cubic-bezier(.4,0,.2,1), min-width .24s, border .24s;
  flex-shrink:0;
}
.wpp-sidebar.closed { width:0; min-width:0; border-right:none; overflow:hidden; }
.wpp-sb-inner { min-width:270px; display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* sidebar top */
.wpp-sb-pad { padding:12px 12px 8px; flex-shrink:0; }

/* Statistics grid */
.wpp-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  padding:0 12px 10px; flex-shrink:0;
}
.wpp-stat {
  background:var(--c-surface); border-radius:8px; padding:8px 10px;
  text-align:center; border:1px solid var(--c-border);
}
.wpp-stat-lbl { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--c-muted); }
.wpp-stat-val { font-size:17px; font-weight:800; color:var(--c-text); margin-top:2px; font-variant-numeric:tabular-nums; }

/* note count stat – full width */
.wpp-stat.full { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; text-align:left; }

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

/* note list */
.wpp-note-list { flex:1; overflow-y:auto; padding:0 8px 8px; display:flex; flex-direction:column; gap:4px; }
.wpp-sec-lbl   { padding:8px 6px 6px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--c-muted); flex-shrink:0; }

.wpp-note-card {
  background:var(--c-surface); border:1.5px solid transparent; border-radius:9px;
  padding:9px 11px; cursor:pointer; transition:background .12s, border-color .12s;
  flex-shrink:0;
}
.wpp-note-card:hover { background:var(--c-nb-hov); }
.wpp-note-card.active { background:var(--c-nb-act); border-color:var(--c-nb-brd); }
.wpp-note-row  { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.wpp-note-title-txt { font-size:12.5px; font-weight:700; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.wpp-note-acts { display:none; gap:2px; }
.wpp-note-card:hover .wpp-note-acts { display:flex; }
.wpp-note-act-btn { background:none; border:none; cursor:pointer; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:4px; }
.wpp-note-act-btn:hover { background:var(--c-btn-hov); }
.wpp-note-preview { font-size:11px; color:var(--c-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wpp-note-ts { font-size:10px; color:var(--c-placeholder); margin-top:2px; }

/* ══════════════════════════════════════════
   EDITOR AREA
══════════════════════════════════════════ */
.wpp-editor-area { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--c-bg); }
.wpp-title-row { padding:14px 22px 6px; flex-shrink:0; display:flex; align-items:center; gap:8px; }
.wpp-title-inp {
  flex:1; border:none; outline:none; background:transparent;
  font-size:22px; font-weight:800; color:var(--c-text); font-family:inherit;
  border-bottom:2.5px solid transparent; padding-bottom:3px; transition:border-color .2s;
}
.wpp-title-inp:focus { border-bottom-color:var(--c-accent); }
.wpp-title-inp::placeholder { color:var(--c-placeholder); }

.wpp-editor-scroll { flex:1; overflow-y:auto; padding:0 22px 22px; }
.wpp-editor {
  min-height:300px; background:var(--c-ed-bg); color:var(--c-text);
  border:1px solid var(--c-ed-brd); border-radius:10px;
  padding:28px 36px; outline:none; font-size:15px; line-height:1.75;
  font-family:'Calibri','Segoe UI',sans-serif;
  box-shadow:var(--shadow-md); transition:border-color .2s; word-break:break-word;
}
.wpp-editor:focus { border-color:var(--c-accent); }
.wpp-editor:empty::before { content:attr(data-ph); color:var(--c-placeholder); pointer-events:none; }

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

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

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.wpp-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.wpp-overlay.h { display:none; }
.wpp-modal {
  background:var(--c-surface); border-radius:14px; padding:26px 28px;
  box-shadow:var(--shadow-lg); width:430px; max-width:95vw;
  border:1px solid var(--c-border); font-family:inherit; color:var(--c-text);
}
.wpp-modal h3 { font-size:16px; font-weight:800; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; }
.wpp-modal h3 button { background:none; border:none; cursor:pointer; color:var(--c-muted); padding:2px; }
.wpp-modal label { display:block; font-size:11.5px; font-weight:700; color:var(--c-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.wpp-modal input, .wpp-modal textarea, .wpp-modal select {
  width:100%; padding:8px 12px; border-radius:7px;
  border:1px solid var(--c-border); background:var(--c-btn); color:var(--c-text);
  font-size:13px; font-family:inherit; outline:none; margin-bottom:12px;
  transition:border-color .15s;
}
.wpp-modal input:focus,.wpp-modal textarea:focus,.wpp-modal select:focus { border-color:var(--c-accent); }
.wpp-modal textarea { height:80px; resize:vertical; }
.wpp-modal-foot { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.wpp-modal-foot button { padding:8px 20px; border-radius:8px; border:none; cursor:pointer; font-size:13px; font-weight:700; font-family:inherit; }
.wpp-btn-cancel { background:var(--c-btn); color:var(--c-text); }
.wpp-btn-cancel:hover { background:var(--c-btn-hov); }
.wpp-btn-ok { background:var(--c-accent); color:#fff; }
.wpp-btn-ok:hover { background:var(--c-accent2); }
.wpp-btn-danger { background:#ef4444; color:#fff; }
.wpp-btn-danger:hover { background:#dc2626; }

/* modal tabs */
.wpp-modal-tabs { display:flex; gap:2px; background:var(--c-btn); border-radius:8px; padding:3px; margin-bottom:14px; }
.wpp-modal-tab  { flex:1; padding:6px; border-radius:6px; border:none; cursor:pointer; font-size:12px; font-weight:700; font-family:inherit; background:transparent; color:var(--c-muted); transition:all .12s; }
.wpp-modal-tab.active { background:var(--c-surface); color:var(--c-text); box-shadow:var(--shadow-sm); }

/* image upload drop zone */
.wpp-drop {
  border:2px dashed var(--c-border); border-radius:9px; padding:22px; text-align:center;
  cursor:pointer; transition:all .2s; margin-bottom:12px; color:var(--c-muted); font-size:13px;
}
.wpp-drop:hover { border-color:var(--c-accent); background:var(--c-accent-lt); }
.wpp-drop .ic { margin:0 auto 8px; width:28px; height:28px; }

/* image edit fields row */
.wpp-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wpp-check-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; cursor:pointer; }
.wpp-check-row input { width:auto; margin:0 !important; }

/* ── Download dropdown ── */
.wpp-dl-wrap   { position:relative; }
.wpp-dl-drop   { position:absolute; top:calc(100% + 5px); right:0; z-index:600; background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; box-shadow:var(--shadow-md); padding:5px; min-width:170px; }
.wpp-dl-drop.h { display:none; }
.wpp-dl-item   { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--c-text); border:none; background:none; width:100%; font-family:inherit; font-weight:600; }
.wpp-dl-item:hover { background:var(--c-btn-hov); }

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

/* ── Tooltip ── */
#wpp-root [data-t] { position:relative; }
#wpp-root [data-t]:hover::after {
  content:attr(data-t); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#1e2330; color:#fff; font-size:11px; white-space:nowrap; padding:4px 8px;
  border-radius:5px; pointer-events:none; z-index:700;
}

/* ── Print ── */
@media print {
  .wpp-topbar,.wpp-toolbar,.wpp-sidebar,.wpp-status,.wpp-findbar { display:none !important; }
  .wpp-editor-area { display:block !important; }
  .wpp-editor { box-shadow:none !important; border:none !important; padding:0 !important; border-radius:0 !important; }
}

/* ── Responsive ── */
@media(max-width:680px) {
  .wpp-sidebar { width:220px; min-width:220px; }
  .wpp-sb-inner { min-width:220px; }
  .wpp-editor { padding:16px 18px; }
  #wpp-font { width:95px; }
  .hide-sm { display:none !important; }
}