:root{
  --purple:#2563eb;
  --purple-dark:#1d4ed8;
  --purple-light:rgba(37, 99, 235, 0.08);
  --ink:#0f172a;
  --muted:#475569;
  --line:rgba(148, 163, 184, 0.25);
  --paper-width:210mm;
  --paper-height:297mm;
  --margin-top:20mm;
  --margin-right:20mm;
  --margin-bottom:20mm;
  --margin-left:20mm;
  --paper-color:#fff;
  --zoom:.8;
  --bg-app: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-input: #ffffff;
}

[data-theme="dark"],
body.dark,
body.theme-dark {
  --purple:#3b82f6;
  --purple-dark:#2563eb;
  --purple-light:rgba(37, 99, 235, 0.15);
  --ink:#f8fafc;
  --muted:#94a3b8;
  --line:rgba(148, 163, 184, 0.15);
  /* La feuille d'écriture reste blanche même en mode sombre (comme Mindmap PNS) */
  --paper-color:#ffffff;
  --bg-app: linear-gradient(135deg, #090d16 0%, #0f172a 100%);
  --bg-card: rgba(22, 28, 45, 0.78);
  --bg-input: rgba(15, 23, 42, 0.85);
}

*{box-sizing:border-box}
html{width:100%;overflow-x:hidden}
body{
  width:100%;
  overflow:hidden;
  margin:0;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-size:13px;
  color:var(--ink);
  background:var(--bg-app);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:transparent;color:inherit;transition:background .15s,color .15s}
button,a,input,select,textarea{outline-offset:3px}
button:focus-visible,a:focus-visible{outline:2px solid var(--purple)}
button:disabled{opacity:.4;cursor:not-allowed}
input,select,textarea{color:var(--ink)}
svg.lucide{width:17px;height:17px;stroke-width:1.7;flex-shrink:0}
button:hover{background:var(--purple-light)}

/* SIDEBAR */
.sidebar{
  width:280px;
  position:fixed;
  inset:0 auto 0 0;
  background:#fff;
  border-right:1px solid var(--line);
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  z-index:30;
  transition:width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing:border-box;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.brand{
  display:flex;
  gap:11px;
  align-items:center;
  color:var(--ink);
  text-decoration:none;
  font-family:Manrope,sans-serif;
  font-size:22px;
  font-weight:750;
  letter-spacing:-1px;
  padding:0 4px;
  margin-bottom:12px;
  flex-shrink:0;
}
.brand strong{color:var(--purple);font-weight:750}
.brand-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:38px;
  color:white;
  border-radius:11px;
  background:var(--purple);
  box-shadow:0 4px 10px #7661d620;
  transform:rotate(-4deg);
  flex-shrink:0;
}
.brand-mark svg{width:22px;height:22px}
.brand small{
  font-family:'DM Sans',sans-serif;
  display:block;
  font-size:7px;
  font-weight:600;
  letter-spacing:1.6px;
  margin-top:4px;
  color:#9a98a9;
}
.primary{background:var(--purple);color:#fff;box-shadow:0 3px 6px #7661d611}
.primary:hover{background:var(--purple-dark)}

/* SIDEBAR TOP CONTAINER */
.sidebar-top-container {
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  margin-bottom:4px;
}

/* User Profile Card & Controls */
.profile-card {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  margin-bottom: 14px;
  position: relative;
  overflow: visible;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  box-sizing: border-box;
}

[data-theme="dark"] .profile-card {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.28);
}

.profile-main-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.profile-avatar-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  flex-shrink: 0;
  margin: 0;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
  box-sizing: border-box;
}

.profile-avatar-wrapper:hover {
  transform: scale(1.05);
}

.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  display: block;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
  text-align: left;
  box-sizing: border-box;
}

.profile-name-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.profile-name {
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

[data-theme="dark"] .profile-name {
  color: #f8fafc;
}

.profile-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

/* Mes comptes button */
.btn-accounts-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  height: 25px;
  padding: 0 6px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 7px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1;
}

.btn-accounts-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.btn-accounts-toggle:hover,
.btn-accounts-toggle.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}

.btn-accounts-toggle .dropdown-arrow {
  font-size: 8.5px;
  transition: transform 0.25s ease;
}

.btn-accounts-toggle.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* Control Buttons (Theme Toggle & Sidebar Close) */
.profile-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 1;
}

[data-theme="dark"] .profile-action-btn {
  background: rgba(22, 28, 45, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}

.profile-action-btn:hover {
  color: #2563eb;
  border-color: #2563eb;
  background: rgba(226, 232, 240, 0.6);
  transform: translateY(-1px);
}

[data-theme="dark"] .profile-action-btn:hover {
  color: #60a5fa;
  border-color: #3b82f6;
  background: rgba(30, 41, 59, 0.8);
}

/* Accounts Popover Menu */
.accounts-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
  background: rgba(17, 26, 54, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(37, 99, 235, 0.12);
  z-index: 1200;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-sizing: border-box;
}

[data-theme="dark"] .accounts-menu {
  background: rgba(17, 26, 54, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(37, 99, 235, 0.25);
}

.accounts-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  text-decoration: none;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.12);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: #0f172a;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-theme="dark"] .account-btn {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.2);
  color: #f1f5f9;
}

.account-btn:hover {
  background: rgba(226, 232, 240, 0.6);
  border-color: #2563eb;
  transform: translateX(2px);
}

[data-theme="dark"] .account-btn:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: #3b82f6;
}

.account-btn-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.account-btn-icon.tg-icon {
  background: linear-gradient(135deg, #229ED9 0%, #0088cc 100%);
}

.account-btn-icon.fb-icon {
  background: linear-gradient(135deg, #1877F2 0%, #0d65d9 100%);
}

.account-btn-label {
  flex: 1;
  text-align: left;
}

.account-btn-arrow {
  font-size: 9px;
  color: #94a3b8;
}

/* Quote Card */
.sidebar-quote-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(14, 165, 233, 0.04) 100%);
  border: 1px solid rgba(37, 99, 235, 0.15);
  margin-bottom: 10px;
  flex-shrink: 0;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

[data-theme="dark"] .sidebar-quote-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(14, 165, 233, 0.06) 100%);
  border-color: rgba(37, 99, 235, 0.22);
}

.sidebar-quote-card .profile-quote {
  font-size: 10.5px;
  line-height: 1.45;
  color: #475569;
  font-style: italic;
  text-align: left;
  border-top: none;
  padding: 0;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
}

[data-theme="dark"] .sidebar-quote-card .profile-quote {
  color: #94a3b8;
}

/* Navigation & Pages PNS dropdown */
.sidebar-nav {
  margin-bottom: 8px;
  flex-shrink: 0;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

[data-theme="dark"] .sidebar-nav .nav-link {
  color: #94a3b8;
}

.sidebar-nav .nav-link:hover {
  background: rgba(226, 232, 240, 0.6);
  color: #0f172a;
}

[data-theme="dark"] .sidebar-nav .nav-link:hover {
  background: rgba(30, 41, 59, 0.6);
  color: #f8fafc;
}

.sidebar-nav .nav-link i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  color: #475569;
}

[data-theme="dark"] .sidebar-nav .nav-link i {
  color: #94a3b8;
}

.sidebar-nav .nav-link:hover i {
  color: #2563eb;
}

.sidebar-nav .submenu-arrow {
  margin-left: auto;
  font-size: 10px !important;
  transition: transform 0.25s ease;
}

.sidebar-nav .submenu {
  list-style: none;
  padding-left: 18px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-nav .submenu.open {
  max-height: 280px;
}

.sidebar-nav .submenu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 12px;
  color: #475569;
  text-decoration: none;
  font-weight: 500;
  border-radius: 7px;
  transition: all 0.18s ease;
}

[data-theme="dark"] .sidebar-nav .submenu a {
  color: #94a3b8;
}

.sidebar-nav .submenu a:hover {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
}

[data-theme="dark"] .sidebar-nav .submenu a:hover {
  color: #60a5fa;
  background: rgba(37, 99, 235, 0.14);
}

.sidebar-nav .submenu a.active {
  color: #2563eb;
  font-weight: 700;
  background: rgba(37, 99, 235, 0.1);
}

[data-theme="dark"] .sidebar-nav .submenu a.active {
  color: #60a5fa;
  background: rgba(37, 99, 235, 0.18);
}

/* Sidebar collapsed state */
.sidebar.collapsed ~ .app {
  margin-left: 76px !important;
}

.sidebar.collapsed .brand span:not(.brand-mark),
.sidebar.collapsed .profile-name-row,
.sidebar.collapsed .btn-accounts-toggle,
.sidebar.collapsed .sidebar-quote-card,
.sidebar.collapsed .accounts-menu,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .submenu-arrow,
.sidebar.collapsed .list-heading {
  display: none !important;
}

.sidebar.collapsed .profile-card {
  padding: 4px 1px;
  background: transparent;
  border: none;
  align-items: center;
  margin-bottom: 6px;
}

.sidebar.collapsed .profile-main-row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.sidebar.collapsed .profile-avatar-wrapper {
  margin: 0 auto;
}

.sidebar.collapsed .profile-info {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.sidebar.collapsed .profile-actions-row {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.sidebar.collapsed .collapse-sidebar-btn {
  order: 1;
}

.sidebar.collapsed .theme-toggle-btn {
  order: 2;
}

.sidebar.collapsed .collapse-sidebar-btn i {
  transform: rotate(180deg);
}

.sidebar.collapsed .brand {
  justify-content: center;
  padding: 0;
  margin-bottom: 10px;
}

.sidebar.collapsed .brand-mark {
  width: 34px !important;
  height: 34px !important;
  font-size: 16px !important;
}

/* Sidebar Nav in collapsed state */
.sidebar.collapsed .sidebar-nav {
  width: 100%;
  margin-bottom: 4px;
}

.sidebar.collapsed .sidebar-nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

.sidebar.collapsed .sidebar-nav .has-submenu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar.collapsed .sidebar-nav .submenu {
  display: none !important;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  list-style: none;
  max-height: none !important;
  overflow: visible !important;
}

.sidebar.collapsed .sidebar-nav .submenu.open {
  display: flex !important;
  margin: 3px 0 !important;
}

.sidebar.collapsed .sidebar-nav .submenu li {
  width: 100%;
  display: flex;
  justify-content: center;
}

.sidebar.collapsed .sidebar-nav .nav-link,
.sidebar.collapsed .sidebar-nav .submenu a {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 1px auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  gap: 0 !important;
  box-sizing: border-box;
}

.sidebar.collapsed .sidebar-nav .nav-link i,
.sidebar.collapsed .sidebar-nav .submenu a i {
  font-size: 15px !important;
  width: auto;
  text-align: center;
  margin: 0;
}

.list-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4px;
  margin-top:14px;
  color:#aaa7b4;
  font-size:9px;
  letter-spacing:1.2px;
  font-weight:600;
}
.icon-button{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  color:#8a8797;
  flex-shrink:0;
}

/* FOLDERS TREE */
.folders-tree{
  margin-top:6px;
  overflow:visible;
  flex:none;
  min-height:0;
  padding:2px 2px 16px;
  user-select:none;
}
.folders-tree::-webkit-scrollbar {
  width: 4px;
}
.folders-tree::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 4px;
}
.folders-tree::-webkit-scrollbar-track {
  background: transparent;
}
.tree-node{
  display:flex;
  flex-direction:column;
  margin:1px 0;
}
.tree-row{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border-radius:5px;
  cursor:pointer;
  color:#615d6f;
  font-size:11px;
  transition:background .12s,color .12s;
  position:relative;
  transform:none !important;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.tree-row:hover{background:#f3f0fa;color:var(--purple-dark);transform:none !important}
.tree-row:active{transform:none !important}
.tree-row.active{
  background:#eee8fa;
  color:var(--purple);
  font-weight:600;
  box-shadow:inset 2.5px 0 var(--purple);
  transform:none !important;
}
.tree-chevron{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#a29eb0;
  flex-shrink:0;
  transition:transform .15s ease;
  border-radius:3px;
}
.tree-chevron svg{width:11px;height:11px}
.tree-node.expanded > .tree-row > .tree-chevron{
  transform:rotate(90deg);
}
.tree-chevron-empty{
  width:14px;
  height:14px;
  flex-shrink:0;
}
.tree-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.tree-icon svg{width:14px;height:14px;color:#8f85b8}
.tree-icon img{
  width:16px;
  height:16px;
  object-fit:contain;
  border-radius:3px;
  display:block;
  background:#f9f8fc;
}
.tree-label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  letter-spacing:-.1px;
}
.tree-badge{
  font-size:9px;
  color:#9e99ab;
  background:#f2eff7;
  padding:1px 5px;
  border-radius:8px;
  margin-left:auto;
  flex-shrink:0;
}
.tree-actions{
  display:none !important;
}

.tree-children{
  display:none;
  padding-left:8px;
  border-left:1.5px solid #ece8f4;
  margin-left:6px;
  margin-top:1px;
}
.tree-node.expanded > .tree-children{
  display:block;
}

/* PLUS BUTTON ROW UNDER LAST ITEM */
.tree-add-row{
  display:none !important;
}
.tree-add-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:#a29caf;
  padding:4px 8px;
  border-radius:5px;
  border:1px dashed #ded8ea;
  background:transparent;
  cursor:pointer;
  transition:all .15s;
  width:100%;
}
.tree-add-btn:hover{
  border-color:var(--purple);
  color:var(--purple);
  background:#f7f4fc;
}
.tree-add-btn svg{width:12px;height:12px}

/* SIDEBAR BOTTOM */
.sidebar-bottom{margin-top:auto}
.local-note{
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 9px;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:10px;
  font-weight:500;
  margin:12px 0 10px;
}
.local-icon{color:#819f93}
.local-note small{display:block;font-size:8px;color:#aaa6b2;margin-top:2px;font-weight:400}
.green-dot,.status-dot{width:5px;height:5px;border-radius:100%;background:#8bb7a3;flex-shrink:0}
.green-dot{margin-left:auto}
.help-button{display:flex;align-items:center;gap:10px;font-size:11px;color:#888391;padding:6px;width:100%}
.help-button svg:last-child{width:13px;margin-left:auto}
.sidebar-signature{
  text-align:center;
  font-size:8px;
  color:#b3afbb;
  line-height:1.7;
  padding:14px 0 16px;
  border-top:1px solid var(--line);
  margin-top:10px;
}
.sidebar-signature span{display:block;font-size:9px;letter-spacing:.4px}
.sidebar-signature b{color:var(--purple);margin-left:5px}

/* APP WRAPPER */
.app{
  margin-left:280px;
  height:100dvh;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* RIBBON HEADER */
.editor-ribbon{
  min-width:0;
  max-width:100%;
  background:#fff;
  flex-shrink:0;
  border-bottom:1px solid #e1e0e9;
  box-shadow:0 2px 4px #32235302;
}

/* VERTICAL TABS INSIDE TOOLBAR (ORANGE BOX) */
.toolbar-tabs-vertical{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  padding-right:8px;
  border-right:1px solid var(--line);
  flex-shrink:0;
}
.tab-btn-vertical{
  border:1px solid transparent;
  background:transparent;
  color:#666173;
  font-family:inherit;
  font-size:9.5px;
  font-weight:550;
  padding:2px 6px;
  border-radius:4px;
  cursor:pointer;
  text-align:left;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:all .15s ease;
  white-space:nowrap;
  line-height:1.2;
}
.tab-btn-vertical:hover{
  background:#f4f0fa;
  color:var(--purple-dark);
}
.tab-btn-vertical.active{
  background:#ede8f8;
  color:var(--purple);
  font-weight:700;
  border-color:#dcd3f0;
}
.tab-btn-vertical .tiny-dot{
  display:inline-block;
  background:#a894dc;
  width:4px;
  height:4px;
  border-radius:50%;
  margin-left:auto;
}

/* TOOLBAR PREVIEW STRIP */
.toolbar-preview-strip{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  overflow-x:auto;
  padding:2px 4px;
  scrollbar-width:none;
}
.toolbar-preview-strip::-webkit-scrollbar{display:none}
.preview-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  cursor:pointer;
  flex-shrink:0;
  padding:2px;
  border-radius:5px;
  transition:all .15s ease;
  user-select:none;
}
.preview-mini-wrapper{
  position:relative;
  width:44px;
  height:58px;
  border:1.5px solid #dcd7e8;
  border-radius:3px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.preview-card:hover .preview-mini-wrapper{
  border-color:var(--purple);
  transform:translateY(-1px);
}
.preview-card.active .preview-mini-wrapper{
  border-color:var(--purple);
  box-shadow:0 0 0 2px #7161d540, 0 2px 6px rgba(113,97,213,0.25);
}
.preview-card.drag-over{
  transform:scale(1.05);
}
.preview-card.drag-over .preview-mini-wrapper{
  border:2px dashed var(--purple);
}
.preview-card.dragging{
  opacity:0.4;
}
.preview-mini-page{
  width:360px;
  height:500px;
  transform:scale(0.12);
  transform-origin:top left;
  pointer-events:none;
  padding:14px 16px;
  overflow:hidden;
  line-height:1.3;
}
.preview-mini-html{
  font-size:11px;
  color:#333;
}
.preview-mini-html *{
  max-width:100% !important;
}
.preview-del-btn{
  position:absolute;
  top:2px;
  right:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  border:0;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  z-index:10;
}
.preview-del-btn svg{width:8px;height:8px}
.preview-card:hover .preview-del-btn{
  display:flex;
}
.preview-num{
  font-size:9px;
  font-weight:600;
  color:#6c667c;
}
.preview-card.active .preview-num{
  color:var(--purple);
  font-weight:700;
}
.preview-add-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  cursor:pointer;
  background:transparent;
  border:0;
  padding:2px;
  flex-shrink:0;
}
.preview-add-box{
  width:44px;
  height:58px;
  border:1.5px dashed #c6bee0;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8274a4;
  background:#faf8fc;
  transition:all .15s ease;
}
.preview-add-btn:hover .preview-add-box{
  border-color:var(--purple);
  color:var(--purple);
  background:#f4f0fa;
}
.preview-add-box svg{width:16px;height:16px}

/* COMPACT TOGGLE FOR TOOLBAR SETTINGS */
.toggle-row-compact{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:9.5px;
  color:#554e63;
  cursor:pointer;
  user-select:none;
}
.toggle-row-compact input{position:absolute;opacity:0;pointer-events:none}
.toggle-row-compact .switch{width:22px;height:12px;border-radius:10px;background:#d6d1dc;position:relative;flex-shrink:0}
.toggle-row-compact .switch:after{content:'';width:8px;height:8px;position:absolute;left:2px;top:2px;border-radius:50%;background:white;box-shadow:0 1px 2px #0001;transition:transform .2s}
.toggle-row-compact input:checked+.switch{background:#7161d5}
.toggle-row-compact input:checked+.switch:after{transform:translateX(10px)}

/* CENTER TOOLS AND ACTIONS GROUP (BLUE BOX) */
.toolbar-tools-center{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex:1;
  justify-content:center;
}
.toolbar-actions-group{
  display:flex;
  align-items:stretch;
  padding-left:12px;
  border-left:1px solid var(--line);
  flex-shrink:0;
}
.tool-btn-save{
  color:#2563eb !important;
  font-weight:650 !important;
}
.tool-btn-save:hover{
  background:#eff6ff !important;
  color:#1d4ed8 !important;
}
.primary-action-btn{
  background:var(--purple) !important;
  color:#fff !important;
  border-color:var(--purple) !important;
}
.primary-action-btn:hover{
  background:var(--purple-dark) !important;
}

/* TOOLBAR & RIBBON */
.editor-ribbon {
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  padding: 4px 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.toolbar{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  padding:6px 14px;
  gap:12px;
  min-height:84px;
  overflow-x:auto;
  scrollbar-width:none;
  width:100%;
  margin:0 auto;
}
@media(min-width:900px){
  .toolbar{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:stretch;
  }
  .toolbar-tabs-vertical{
    justify-self:start;
  }
  .toolbar-tools-center{
    justify-self:center;
  }
  .toolbar-actions-group{
    justify-self:end;
  }
}
.toolbar::-webkit-scrollbar{display:none}
.tool-group{
  display:flex;
  flex-direction:column;
  gap:2px;
  border-right:1px solid var(--line);
  padding-right:8px;
  flex-shrink:0;
  justify-content:space-between;
}
.tool-group:last-child{border:0;padding-right:0}
.tool-row{display:flex;align-items:center;gap:2px;height:23px}
.tool-group-label{
  font-size:8px;
  letter-spacing:.3px;
  color:#aaa6b3;
  text-align:center;
  margin-top:auto;
  padding-top:2px;
}
.tool-button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:23px;
  min-width:24px;
  border-radius:4px;
  padding:2px 4px;
  gap:4px;
  font-size:10.5px;
  color:#6d687c;
}
.tool-button svg{width:14px;height:14px}
.tool-button.active{background:#eee9fa;color:var(--purple)}
.tool-select{
  border:1px solid #e8e5ed;
  background:#fff;
  border-radius:4px;
  height:23px;
  font-size:10.5px;
  padding:0 14px 0 5px;
  max-width:115px;
}
.font-size-select{width:46px;max-width:46px}
.style-select{width:115px;max-width:115px}
.tool-divider{height:14px;width:1px;background:var(--line);margin:0 2px}
.color-control{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:23px;
  border-radius:4px;
  cursor:pointer;
}
.color-control:hover{background:#f0edf7}
.color-control input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.color-control .color-symbol{font-family:Georgia,serif;font-size:15px;border-bottom:3px solid var(--swatch,#8062d7);height:21px}
.color-control svg{width:14px;height:14px;border-bottom:3px solid var(--swatch,#f7d886);height:21px}

/* WORKSPACE & CANVAS */
.workspace{
  padding:12px 22px 30px;
  display:flex;
  gap:24px;
  overflow:auto;
  flex:1;
  align-items:flex-start;
  min-height:0;
  justify-content:center;
}
.canvas-column{flex:1;min-width:0;text-align:center}
.ruler{
  width:calc(var(--paper-width) * var(--zoom));
  height:24px;
  max-width:100%;
  margin:0 auto 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:3px 0 0;
  font-size:7px;
  color:#b7b0c1;
  background:repeating-linear-gradient(to right,transparent 0,transparent calc(1% - 1px),#d7d3df calc(1% - 1px),#d7d3df 1%) bottom/100% 4px no-repeat;
  flex-shrink:0;
}
.page-stage{position:relative;margin:0 auto;text-align:left;width:calc(var(--paper-width) * var(--zoom))}
#pages{transform:scale(var(--zoom));transform-origin:top left;width:var(--paper-width)}
.paper{
  position:relative;
  min-height:var(--paper-height);
  width:var(--paper-width);
  background:var(--paper-color);
  box-shadow:0 3px 16px #32235008,0 0 0 1px #e6e3ed;
  margin-bottom:26px;
  color:#383644;
  isolation:isolate;
}
.paper-content{
  padding:var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
  min-height:var(--paper-height);
  font-family:Arial,sans-serif;
  font-size:11pt;
  line-height:1.65;
  outline:none;
  overflow-wrap:anywhere;
  position:relative;
  z-index:1;
}
.paper-content p{margin:0 0 12pt}
.paper-content h1{font-family:Manrope,sans-serif;font-size:27pt;font-weight:750;line-height:1.3;letter-spacing:-1px;margin:8pt 0 14pt}
.paper-content h2{font-family:Manrope,sans-serif;font-size:16pt;line-height:1.4;margin:24pt 0 10pt;font-weight:750;letter-spacing:-.4px}
.paper-content h3{font-size:13pt;margin:18pt 0 8pt}
.paper-content a{color:var(--purple)}
.paper-content blockquote{padding:15px 20px;border-left:3px solid #b5a2e1;background:#f7f4fc;color:#8b789f;margin:18px 0;font-style:italic}
.paper-content hr{height:1px;border:0;background:#eae5f1;margin:24px 0}
.paper-content li{padding-left:4px;margin-bottom:7px}
.paper-content ul{padding-left:22px}
.paper-content li::marker{color:#a998d0}
.paper-content table{width:100%;border-collapse:collapse;margin:18px 0;table-layout:fixed}
.paper-content td,.paper-content th{border:1px solid #dcd6e9;padding:9px 11px;min-width:30px;position:relative;vertical-align:top}
.paper-content th{background:#f2eef9;text-align:left;font-weight:600}
.paper-content td:focus,.paper-content th:focus{outline:1px solid var(--purple)}
.paper-content img{max-width:100%;height:auto}

/* MARGIN GUIDES (VIOLET PÂLE) */
.show-margin-guides .paper::before{
  content:'';
  position:absolute;
  top:var(--margin-top);
  left:var(--margin-left);
  right:var(--margin-right);
  bottom:var(--margin-bottom);
  border:1px dashed rgba(167, 139, 250, 0.65);
  box-shadow:inset 0 0 0 1px rgba(167, 139, 250, 0.15);
  pointer-events:none;
  z-index:4;
}

/* FIXED MARGIN ELEMENTS */
.fixed-margin-top{
  position:absolute;
  top:0;
  left:var(--margin-left);
  right:var(--margin-right);
  height:var(--margin-top);
  display:flex;
  align-items:center;
  user-select:none;
  pointer-events:none;
  z-index:3;
}
.margin-header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.margin-header-left{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.margin-pns-logo-img{
  height:24px;
  max-height:28px;
  width:auto;
  max-width:120px;
  object-fit:contain;
  display:block;
}
.margin-header-right{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  text-align:right;
  flex:1;
  min-width:0;
  margin-left:16px;
}
.margin-doc-title{
  font-family:'DM Sans',sans-serif;
  font-size:10.5pt;
  font-weight:650;
  color:#334155;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  letter-spacing:-.1px;
  text-align:right;
  width:100%;
}

/* FIXED LEFT MARGIN (5CM RECTANGLE) */
.fixed-margin-left{
  position:absolute;
  top:26mm;
  left:0;
  width:var(--margin-left);
  height:50mm;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  pointer-events:none;
  user-select:none;
  z-index:3;
}
.margin-module-pill{
  width:23px;
  height:50mm;
  background-color:var(--margin-tab-color, #1e3a8a);
  border-radius:0 6px 6px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:2px 2px 6px rgba(0,0,0,0.12);
  transition:background-color .15s ease;
}
.margin-module-text{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#ffffff;
  font-family:'DM Sans',sans-serif;
  font-size:8pt;
  font-weight:750;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-height:46mm;
}

/* FIXED BOTTOM MARGIN */
.fixed-margin-bottom{
  position:absolute;
  bottom:0;
  left:var(--margin-left);
  right:var(--margin-right);
  height:var(--margin-bottom);
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
  z-index:3;
}
.margin-telegram-link, .margin-page-number{
  font-family:'MV Boli', 'Comic Sans MS', cursive, sans-serif !important;
  font-size:12pt !important;
  font-weight:bold !important;
  color:#000000 !important;
  text-decoration:none !important;
  line-height:1;
}
.margin-telegram-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  pointer-events:auto;
  cursor:pointer;
}
.margin-telegram-link:hover{
  text-decoration:underline !important;
}
.margin-telegram-link svg{
  width:16px;
  height:16px;
  fill:#000000;
  flex-shrink:0;
}
.drawing-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:hidden;touch-action:none}
.drawing-mode .drawing-layer{pointer-events:auto;cursor:crosshair}
.drawing-mode .paper-content{user-select:none}
.drawing-layer [data-selected=true]{filter:drop-shadow(0 0 3px #8062e9)}
.add-page{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px dashed #d8d3e2;color:#aaa0b9;border-radius:5px;font-size:10px;padding:8px 15px;margin-top:13px}
.add-page svg{width:13px;height:13px}
.canvas-tip{display:flex;justify-content:center;align-items:center;gap:7px;color:#b7afc1;font-size:9px;margin:19px 0}
.canvas-tip svg{width:13px;height:13px}

/* PROPERTIES SIDEBAR */
.properties{
  width:181px;
  flex:0 0 181px;
  margin-top:24px;
  background:#fff;
  border:1px solid #e9e6ef;
  border-radius:9px;
  padding:14px 13px;
  color:#80798c;
}
.properties-heading{display:flex;gap:6px;align-items:center;font-size:10px;font-weight:600;margin-bottom:20px;color:#6e647d}
.properties-heading>svg{width:13px;height:13px}
.properties-heading .icon-button{width:20px;height:20px;margin-left:auto}
.properties-heading .icon-button svg{width:13px;height:13px}
.field-label{display:block;font-size:7px;letter-spacing:1px;font-weight:600;color:#a29aaa;margin:17px 0 9px}
.properties select{height:30px;border:1px solid #e9e4ee;background:#fff;border-radius:5px;font-size:9px;width:100%;padding:0 7px;color:#81768c}
.paper-preview{background:#f8f7fb;border:1px solid #f0edf5;border-radius:5px;display:flex;flex-direction:column;align-items:center;padding:15px 0 9px;margin-top:10px}
#mini-paper{width:45px;height:63px;background:#fff;border:1px solid #e3ddef;box-shadow:0 2px 4px #7a6c9310;padding:14px 8px 0;border-radius:1px}
#mini-paper span{display:block;height:2px;background:#ece7f4;margin-bottom:5px}
#mini-paper span:nth-child(2){width:70%}
#mini-paper span:last-child{width:55%}
.paper-preview small{font-size:7px;color:#afa5ba;margin-top:8px}
.segmented{display:flex;gap:4px}
.segmented button{border:1px solid #e8e3ee;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:8px;gap:5px;padding:7px 5px;flex:1}
.segmented button svg{width:11px;height:11px}
.segmented button.active{color:var(--purple);border-color:#d8cef0;background:#f4f0fc}
.property-divider{height:1px;background:#eeeaf2;margin:19px 0}
.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:8px;margin:14px 0;gap:7px;position:relative;cursor:pointer}
.toggle-row input{position:absolute;opacity:0;right:0}
.switch{width:24px;height:14px;border-radius:10px;background:#d6d1dc;position:relative;flex-shrink:0}
.switch:after{content:'';width:10px;height:10px;position:absolute;left:2px;top:2px;border-radius:50%;background:white;box-shadow:0 1px 2px #0001;transition:transform .2s}
.toggle-row input:checked+.switch{background:#a892d3}
.toggle-row input:checked+.switch:after{transform:translateX(10px)}
.toggle-row input:focus-visible+.switch{outline:2px solid var(--purple)}
.document-stats{font-size:9px}
.document-stats>span{font-weight:550;color:#81728f}
.document-stats p{display:flex;justify-content:space-between;color:#a99caf;margin:12px 0;font-size:8px}
.document-stats strong{font-weight:450;color:#82788d}
.inspiration{padding:12px 11px 5px;border-radius:5px;background:#faf8f0;margin-top:20px;color:#b9a888}
.inspiration svg{width:14px;height:14px;color:#c4b394}
.inspiration p{font-size:8px;line-height:1.8;margin-top:5px}

/* STATUSBAR */
.statusbar{
  height:35px;
  flex-shrink:0;
  border-top:1px solid var(--line);
  background:#fff;
  padding:0 23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#a29aa9;
  font-size:9px;
  z-index:10;
}
.statusbar>div{display:flex;align-items:center;gap:11px}
.status-separator{height:10px;width:1px;background:var(--line)}
.language{display:flex;gap:6px;align-items:center}
.language svg{width:11px;height:11px;color:#91af9f}
.statusbar .icon-button{width:22px;height:25px}
.statusbar .icon-button svg{width:13px;height:13px}
.zoom-controls{gap:5px!important}
#zoom-slider{width:77px;accent-color:#a791ce;height:3px;cursor:pointer}
.zoom-value{font-size:9px;min-width:40px;color:#89808f}
.mobile-menu{display:none}

/* MODALS & POPUPS */
#modal{
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:24px;
  width:540px;
  max-width:min(540px, calc(100vw - 32px));
  max-height:min(88dvh, 740px);
  box-shadow:0 24px 64px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.05);
  background:#ffffff;
  color:#0f172a;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(37, 99, 235, 0.25) transparent;
}
#modal::-webkit-scrollbar{
  width:6px;
}
#modal::-webkit-scrollbar-thumb{
  background:rgba(37, 99, 235, 0.25);
  border-radius:999px;
}
#modal::-webkit-scrollbar-track{
  background:transparent;
}
#modal::backdrop{
  background:rgba(15, 23, 42, 0.45);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:1px solid #f1f5f9;
}
.modal-header h2{
  font-family:'Plus Jakarta Sans','Manrope',sans-serif;
  font-size:18px;
  font-weight:750;
  margin:0;
  letter-spacing:-.3px;
  color:#0f172a;
}
.modal-header .icon-button[data-action="close-modal"]{
  width:32px;
  height:32px;
  border-radius:9px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#64748b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  transform:none!important;
}
.modal-header .icon-button[data-action="close-modal"]:hover{
  background:#fee2e2;
  border-color:#fca5a5;
  color:#ef4444;
  transform:none!important;
}
.modal-header .icon-button[data-action="close-modal"]:focus{
  outline:none;
}
.modal-header .icon-button[data-action="close-modal"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(37, 99, 235, 0.35);
}
.modal-header .icon-button[data-action="close-modal"] svg,
.modal-header .icon-button[data-action="close-modal"] i{
  width:16px;
  height:16px;
}
.modal-description{
  font-size:12.5px;
  line-height:1.7;
  color:#64748b;
  margin:0 0 18px;
}
.modal-option{
  display:flex;
  align-items:center;
  text-align:left;
  border:1.5px solid #e2e8f0;
  width:100%;
  border-radius:12px;
  gap:14px;
  padding:16px;
  margin:10px 0;
  background:#ffffff;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
  transform:none!important;
}
.modal-option:hover{
  border-color:#2563eb;
  background:#f8fafc;
  transform:none!important;
}
.modal-option>svg{
  width:24px;
  height:24px;
  color:#2563eb;
}
.modal-option strong{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#0f172a;
}
.modal-option small{
  display:block;
  color:#64748b;
  font-size:11px;
  margin-top:4px;
  line-height:1.5;
}
.modal-form{
  display:grid;
  gap:14px;
}
.modal-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11.5px;
  font-weight:650;
  color:#475569;
}
.modal-form input,
.modal-form select,
.modal-form textarea{
  width:100%;
  height:38px;
  box-sizing:border-box;
  border:1.5px solid #e2e8f0;
  border-radius:9px;
  background:#ffffff;
  padding:0 12px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:550;
  color:#0f172a;
  transition:border-color .15s ease,box-shadow .15s ease;
  transform:none!important;
}
.modal-form textarea{
  height:auto;
  min-height:70px;
  padding:8px 12px;
  resize:vertical;
}
.modal-form input:hover,
.modal-form select:hover,
.modal-form textarea:hover{
  border-color:#cbd5e1;
  transform:none!important;
}
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37, 99, 235, 0.14);
  transform:none!important;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
}
.modal-buttons{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #f1f5f9;
}
.modal-buttons .button{
  height:36px;
  padding:0 18px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;
  font-weight:650;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
  transform:none!important;
}
.modal-buttons .button.subtle{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#475569;
}
.modal-buttons .button.subtle:hover{
  background:#f1f5f9;
  border-color:#cbd5e1;
  color:#0f172a;
  transform:none!important;
}
.modal-buttons .button.primary{
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  border:1px solid rgba(37, 99, 235, 0.4);
  color:#ffffff;
  box-shadow:0 2px 8px rgba(37, 99, 235, 0.28);
}
.modal-buttons .button.primary:hover{
  background:linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow:0 4px 12px rgba(37, 99, 235, 0.38);
  transform:none!important;
}

.help-content{font-size:12px;line-height:1.8;color:#8c8097}
.help-content h3{font-size:13px;color:var(--ink);margin-top:22px}
.help-content kbd{background:#f2edf8;padding:3px 6px;border-radius:3px;color:#8f78ad;font-family:inherit;font-size:10px}
.help-content p{margin:7px 0}
.toast{
  position:fixed;
  bottom:53px;
  left:calc(50% + 100px);
  transform:translate(-50%,15px);
  opacity:0;
  pointer-events:none;
  background:#494054;
  color:#fff;
  padding:12px 20px;
  font-size:12px;
  border-radius:8px;
  box-shadow:0 5px 25px #29203020;
  z-index:100;
  max-width:90vw;
  transition:.2s;
}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.symbol-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.symbol-grid button{border:1px solid var(--line);border-radius:4px;padding:9px;font-size:20px}
.drawing-colors{display:flex;gap:5px;align-items:center}
.drawing-colors button{width:18px;height:18px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #e6e1ed;background:var(--color)}
.drawing-colors button.active{box-shadow:0 0 0 2px var(--purple)}
.table-actions{display:flex;gap:2px}
.empty-library{padding:20px 10px;font-size:11px;color:var(--muted);line-height:1.7}

.focus-mode .sidebar,.focus-mode .properties,.focus-mode .workspace-heading{display:none}
.focus-mode .app{margin-left:0}
.properties-hidden .properties{display:none}
.focus-mode .workspace{padding-top:20px}
.danger{color:#b75972}
.hidden{display:none!important}
mark{background:#f5e39a;color:inherit;padding:0 2px;border-radius:2px}
.paper-content .checklist{list-style:none;padding-left:0}
.paper-content .checklist li:before{content:'☐';color:#a794c2;margin-right:10px}
.paper-content .checklist li.done:before{content:'☑'}
.paper-content .checklist li.done{text-decoration:line-through;color:#aaa}
.paper-content table.no-borders td,.paper-content table.no-borders th{border-color:transparent}
.paper-content table.striped tr:nth-child(even){background:#f8f5fc}
.paper-content .find-result{background:#ffe48a}
.draw-size{width:70px;accent-color:var(--purple)}
.draw-label{font-size:9px;color:#92869f}
.table-selected{outline:2px solid #baa7e2!important}
.paper-content img.image-selected{outline:2px solid #b9a3e0}
.page-header{position:absolute;top:7mm;left:var(--margin-left);right:var(--margin-right);font-size:8pt;color:#a397ac;pointer-events:none}
.toolbar-hint{font-size:10px;color:#a094ac;max-width:155px;line-height:1.7;padding:3px}
.drawing-mode .canvas-tip{color:var(--purple)}

/* ENCADRÉ & CITATION STYLES */
.callout-box{
  margin:16px 0;
  position:relative;
  transition:box-shadow .15s ease, opacity .15s ease;
  word-break:break-word;
  padding:12px 18px;
}
.callout-box.callout-is-dragging{
  opacity:0.35;
  outline:2px dashed var(--callout-color, #7661d6);
  border-radius:10px;
}
.callout-drop-indicator{
  border-top:3px solid var(--purple, #7661d6) !important;
}
.callout-left-border{
  border-left:4px solid var(--callout-color, #7661d6);
  background:var(--callout-bg, #f7f4fc);
  border-radius:0 10px 10px 0;
}
.callout-full-border{
  border:1.5px solid var(--callout-color, #7661d6);
  background:var(--callout-bg, #f8f6fc);
  border-radius:12px;
}
.callout-quote-style{
  border-left:3.5px solid var(--callout-color, #7661d6);
  background:var(--callout-bg, #faf8fd);
  border-radius:0 10px 10px 0;
  font-style:italic;
  color:#4c4758;
}
.callout-row{
  display:flex;
  align-items:flex-start;
  gap:11px;
}
.callout-emoji{
  font-size:18pt;
  line-height:1.2;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.callout-controls{
  position:absolute;
  top:6px;
  right:8px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  z-index:5;
  user-select:none;
}
.callout-drag-handle{
  cursor:grab;
  color:var(--callout-color, #7661d6);
  opacity:0.4;
  padding:2px 5px;
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  line-height:1;
  transition:all .15s ease;
  user-select:none;
}
.callout-box > .callout-drag-handle{
  position:absolute;
  top:6px;
  right:8px;
}
.callout-drag-handle:hover{
  opacity:1;
  background:rgba(0,0,0,0.06);
}
.callout-drag-handle:active{
  cursor:grabbing;
}
.callout-box:hover .callout-drag-handle{
  opacity:0.85;
}

/* Callout & Citation Delete Button */
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.75); }
  100% { opacity: 1; transform: scale(1); }
}
.callout-delete-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:4px;
  background:#fee2e2;
  color:#ef4444;
  border:1px solid #fca5a5;
  cursor:pointer;
  font-size:11px;
  line-height:1;
  user-select:none;
  transition:all .15s ease;
  box-shadow:0 1px 3px rgba(239, 68, 68, 0.15);
  z-index:10;
}
.callout-box > .callout-delete-btn{
  position:absolute;
  top:6px;
  right:34px;
}
.callout-delete-btn:hover{
  background:#ef4444;
  color:#ffffff;
  border-color:#ef4444;
  transform:scale(1.08);
}
[data-theme="dark"] .callout-delete-btn{
  background:rgba(239, 68, 68, 0.15);
  border-color:rgba(239, 68, 68, 0.4);
  color:#f87171;
}
[data-theme="dark"] .callout-delete-btn:hover{
  background:#ef4444;
  color:#ffffff;
}
.callout-box.show-delete .callout-delete-btn{
  display:inline-flex !important;
  animation:popIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.callout-box.show-delete .callout-drag-handle{
  opacity:1;
  background:rgba(0,0,0,0.08);
}
.callout-body{
  flex:1;
  min-width:0;
  font-size:11pt;
  line-height:1.65;
  color:#353342;
  outline:none;
  min-height:24px;
}
.callout-body p{margin:0 0 6pt}
.callout-body p:last-child{margin-bottom:0}

/* FIXED A4 FORMAT BADGE */
.paper-format-fixed{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:#f6f4fa;
  border:1px solid #e7e2ef;
  border-radius:9px;
  margin-bottom:14px;
}
.paper-format-fixed i{
  color:var(--purple);
  width:18px;
  height:18px;
  flex-shrink:0;
}
.paper-format-fixed strong{
  display:block;
  font-size:12px;
  color:#2f2b3a;
  font-weight:700;
}
.paper-format-fixed small{
  color:#827a92;
  font-size:10px;
}

/* CALLOUT MODAL DIALOG CONTROLS */
/* CALLOUT MODAL DIALOG CONTROLS */
.callout-dialog-section{
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid #f1f5f9;
}
.callout-dialog-section:last-of-type{
  border-bottom:none;
  margin-bottom:8px;
  padding-bottom:0;
}
.callout-section-title{
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.6px;
  color:#64748b;
  margin-bottom:9px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
}
.callout-section-title svg,
.callout-section-title i{
  width:14px;
  height:14px;
  color:#2563eb;
}
.preset-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.preset-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:8px;
  border:1.5px solid #e2e8f0;
  background:#ffffff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11.5px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
  color:#334155;
  font-weight:600;
  transform:none!important;
}
.preset-chip:hover{
  border-color:#cbd5e1;
  background:#f8fafc;
  color:#0f172a;
  transform:none!important;
}
.preset-chip.active{
  background:#eff6ff;
  border-color:#2563eb;
  color:#1d4ed8;
  font-weight:700;
  box-shadow:0 0 0 1px #2563eb;
  transform:none!important;
}
.style-options{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.style-option-btn{
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  padding:10px 8px;
  background:#ffffff;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;
  color:#475569;
  font-weight:650;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
  transform:none!important;
}
.style-option-btn:hover{
  border-color:#cbd5e1;
  background:#f8fafc;
  color:#0f172a;
  transform:none!important;
}
.style-option-btn.active{
  border-color:#2563eb;
  background:#eff6ff;
  color:#1d4ed8;
  box-shadow:0 0 0 1.5px #2563eb;
  transform:none!important;
}
.style-preview-mini{
  width:100%;
  height:26px;
  border-radius:6px;
  background:#f8fafc;
  position:relative;
  transition:border-color .15s ease,background .15s ease;
}
.style-preview-left{
  border-left:3.5px solid #2563eb;
  border-radius:0 6px 6px 0;
  background:#eff6ff;
}
.style-preview-full{
  border:1.5px solid #2563eb;
  border-radius:6px;
  background:#eff6ff;
}
.style-preview-quote{
  border-left:3px solid #2563eb;
  font-style:italic;
  font-size:11px;
  font-weight:600;
  display:flex;
  align-items:center;
  padding-left:8px;
  color:#2563eb;
  background:#eff6ff;
}
.color-swatches{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.color-swatch-btn{
  width:26px;
  height:26px;
  border-radius:50%;
  border:2.5px solid #ffffff;
  box-shadow:0 0 0 1px #cbd5e1;
  cursor:pointer;
  transition:box-shadow .15s ease;
  flex-shrink:0;
  transform:none!important;
}
.color-swatch-btn:hover{
  box-shadow:0 0 0 2px #94a3b8;
  transform:none!important;
}
.color-swatch-btn.active{
  box-shadow:0 0 0 2.5px #2563eb, 0 2px 8px rgba(37, 99, 235, 0.35);
  transform:none!important;
}
.custom-color-input{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:650;
  color:#475569;
  border:1.5px solid #e2e8f0;
  padding:4px 10px;
  border-radius:8px;
  background:#ffffff;
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
  margin-left:auto;
  transform:none!important;
}
.custom-color-input:hover{
  border-color:#cbd5e1;
  color:#0f172a;
  transform:none!important;
}
.custom-color-input input{
  width:20px;
  height:20px;
  border:0;
  padding:0;
  border-radius:4px;
  cursor:pointer;
}
.emoji-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.emoji-select-btn{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1.5px solid #e2e8f0;
  background:#ffffff;
  font-size:16px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
  transform:none!important;
}
.emoji-select-btn:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
  transform:none!important;
}
.emoji-select-btn.active{
  border-color:#2563eb;
  background:#eff6ff;
  box-shadow:0 0 0 1.5px #2563eb;
  transform:none!important;
}
#btn-no-emoji{
  font-size:11px;
  font-weight:650;
  padding:4px 10px;
  border-radius:6px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#64748b;
  cursor:pointer;
  transition:all .15s ease;
  transform:none!important;
}
#btn-no-emoji:hover{
  background:#fee2e2;
  border-color:#fca5a5;
  color:#dc2626;
  transform:none!important;
}
.custom-emoji-input{
  width:52px!important;
  height:32px!important;
  box-sizing:border-box!important;
  border:1.5px solid #e2e8f0!important;
  border-radius:8px!important;
  font-size:15px!important;
  text-align:center!important;
  padding:0!important;
  transition:border-color .15s ease,box-shadow .15s ease!important;
  transform:none!important;
}
.custom-emoji-input:focus{
  border-color:#2563eb!important;
  outline:none!important;
  box-shadow:0 0 0 2px rgba(37, 99, 235, 0.15)!important;
  transform:none!important;
}

.callout-preview-container{
  background:#f9f8fc;
  border:1px dashed #d7d1e4;
  border-radius:10px;
  padding:14px;
  margin:12px 0 16px;
}
.callout-preview-label{
  font-size:9px;
  font-weight:600;
  letter-spacing:.7px;
  color:#9a94a9;
  text-transform:uppercase;
  margin-bottom:8px;
}

/* RESPONSIVE MEDIA QUERIES */
@media(min-width:1450px){
  .sidebar{width:280px;padding-left:18px;padding-right:18px}
  .app{margin-left:280px}
  .workspace{padding:0 40px 30px;gap:35px}
  .properties{width:210px;flex-basis:210px;padding:18px}
  .properties .field-label{font-size:8px}
  .properties select,.segmented button{font-size:10px}
  .toggle-row{font-size:9px}
}

@media(max-width:1150px){
  .app{margin-left:280px}
  .brand{font-size:21px}
  .workspace-title-input{width:200px;font-size:13px}
  .saved-status{display:none}
  .workspace{gap:15px;padding-left:16px;padding-right:16px}
  .properties{width:160px;flex-basis:160px;padding:12px 10px}
  .toolbar{gap:10px;padding-left:14px;padding-right:14px}
  .tool-group{padding-right:10px}
  .avatar{display:none}
  .new-note{font-size:11px}
  .new-note kbd{display:none}
}

@media(max-width:930px){
  .properties{display:none}
  .properties-hidden .properties{display:block;position:absolute;right:16px;top:150px;z-index:12;box-shadow:0 10px 30px #3b25451a;width:190px}
  .tabs{gap:18px}
  .ribbon-navigation{padding:0 14px}
  .print-button{display:none}
}

@media(max-width:768px){
  .sidebar{
    transform:translateX(-100%);
    width:260px;
    box-shadow:15px 0 40px #3a2b5520;
    transition:transform .2s;
  }
  .sidebar-open .sidebar{transform:translateX(0)}
  .app{margin-left:0}
  .mobile-menu{display:inline-flex}
  .ribbon-navigation{height:42px;padding:0 10px}
  .tabs{gap:14px}
  .tabs>button{font-size:10px}
  .history-tools{gap:0}
  .history-tools .icon-button{width:23px}
  .history-tools>span,.history-tools>button:last-child{display:none}
  .top-actions .subtle{padding:0 7px;border:0}
  .top-actions .subtle span{display:none}
  .top-actions .primary{padding:0 9px;min-height:29px;font-size:10px;gap:4px}
  .top-actions .primary svg:first-child{display:none}
  .top-actions{gap:4px}
  .toolbar{
    min-height:86px;
    padding:8px 10px 6px;
    justify-content:safe center;
  }
  .workspace-heading{padding:10px 14px 6px}
  .workspace-title-input{width:170px;font-size:12px}
  .workspace-focus span{display:none}
  .workspace-focus svg{height:13px;width:13px}
  .workspace{padding:0 12px 24px}
  .ruler{margin-bottom:8px}
  .properties-hidden .properties{top:150px;right:13px}
  .statusbar{padding:0 12px;font-size:8px;height:37px}
  .statusbar>div{gap:7px}
  .language{display:none}
  .zoom-controls{gap:2px!important}
  .zoom-controls .icon-button:first-child{display:none}
  #zoom-slider{width:55px}
  .statusbar .icon-button{width:19px}
  .zoom-controls .status-separator{display:none}
  .toast{left:50%;font-size:11px;width:max-content;max-width:90vw}
  .page-stage{margin:auto}
  .canvas-tip{font-size:8px}
  #modal{padding:20px}
  #modal-header h2{font-size:18px}
  .new-note kbd{display:inline}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media print{
  html,body{overflow:visible!important;height:auto!important;background:#fff!important;margin:0!important}
  .sidebar,.editor-ribbon,.workspace-heading,.properties,.statusbar,.ruler,.add-page,.canvas-tip,.toast,dialog{display:none!important}
  .app{margin:0;height:auto;display:block}
  .workspace{display:block;overflow:visible;padding:0}
  .canvas-column,.page-stage,#pages{width:100%!important;height:auto!important;transform:none!important;display:block}
  .paper{width:100%!important;min-height:0!important;box-shadow:none;margin:0;break-after:page;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .paper:last-child{break-after:auto}
  .paper-content{min-height:calc(var(--paper-height) - 1mm);padding:var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left)}
  .paper-content:empty:before{display:none}
  .drawing-layer{position:absolute;pointer-events:none}
  .paper-content tr,.paper-content img{break-inside:avoid}
  .paper-content h1,.paper-content h2,.paper-content h3{break-after:avoid}
  .table-selected,.image-selected{outline:none!important}
  a{text-decoration:inherit}
}

/* ==========================================================================
   DARK THEME FOR NOTES PNS
   ========================================================================== */
[data-theme="dark"] body {
  background: #090d16;
  color: #f1f5f9;
}

[data-theme="dark"] .sidebar {
  background: #0f172a;
  border-right-color: #1e293b;
}

[data-theme="dark"] .brand {
  color: #f8fafc;
}

[data-theme="dark"] .list-heading {
  color: #64748b;
}

[data-theme="dark"] .tree-row {
  color: #cbd5e1;
}

[data-theme="dark"] .tree-row:hover {
  background: #1e293b;
  color: #a78bfa;
}

[data-theme="dark"] .tree-row.active {
  background: rgba(118, 97, 214, 0.2);
  color: #c4b5fd;
}

[data-theme="dark"] .tree-chevron,
[data-theme="dark"] .tree-icon {
  color: #94a3b8;
}

[data-theme="dark"] .tree-count {
  background: #1e293b;
  color: #94a3b8;
}

[data-theme="dark"] .editor-ribbon {
  background: #0f172a;
  border-bottom-color: #1e293b;
}

[data-theme="dark"] .toolbar-tabs-vertical {
  border-right-color: #1e293b;
}

[data-theme="dark"] .tab-btn-vertical {
  color: #94a3b8;
}

[data-theme="dark"] .tab-btn-vertical:hover {
  color: #f8fafc;
  background: #1e293b;
}

[data-theme="dark"] .tab-btn-vertical.active {
  color: #a78bfa;
  background: rgba(118, 97, 214, 0.15);
}

[data-theme="dark"] .tool-group {
  border-right-color: #1e293b;
}

[data-theme="dark"] .tool-group-label {
  color: #64748b;
}

[data-theme="dark"] .tool-button {
  color: #cbd5e1;
}

[data-theme="dark"] .tool-button:hover {
  background: #1e293b;
  color: #f8fafc;
}

[data-theme="dark"] .tool-select {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .workspace {
  background: #090d16;
}

[data-theme="dark"] .ruler {
  background: #0f172a;
  border-bottom-color: #1e293b;
  color: #64748b;
}

[data-theme="dark"] .statusbar {
  background: #0f172a;
  border-top-color: #1e293b;
  color: #94a3b8;
}

[data-theme="dark"] .statusbar .status-separator {
  background: #334155;
}

[data-theme="dark"] .statusbar .icon-button {
  color: #94a3b8;
}

[data-theme="dark"] .statusbar .icon-button:hover {
  color: #f8fafc;
  background: #1e293b;
}

[data-theme="dark"] .canvas-tip {
  color: #64748b;
}

[data-theme="dark"] #modal {
  background: #0f172a;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .modal-header h2 {
  color: #f8fafc;
}
[data-theme="dark"] .modal-header .icon-button[data-action="close-modal"] {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
[data-theme="dark"] .modal-header .icon-button[data-action="close-modal"]:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}
[data-theme="dark"] .modal-form label {
  color: #94a3b8;
}
[data-theme="dark"] .modal-form input,
[data-theme="dark"] .modal-form select,
[data-theme="dark"] .modal-form textarea {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}
[data-theme="dark"] .modal-buttons {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .modal-buttons .button.subtle {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
[data-theme="dark"] .callout-dialog-section {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .callout-section-title {
  color: #94a3b8;
}
[data-theme="dark"] .preset-chip {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
[data-theme="dark"] .preset-chip:hover {
  background: #334155;
  color: #ffffff;
}
[data-theme="dark"] .preset-chip.active {
  background: rgba(37, 99, 235, 0.25);
  border-color: #3b82f6;
  color: #93c5fd;
}
[data-theme="dark"] .style-option-btn {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
[data-theme="dark"] .style-option-btn:hover {
  background: #334155;
  color: #ffffff;
}
[data-theme="dark"] .style-option-btn.active {
  background: rgba(37, 99, 235, 0.25);
  border-color: #3b82f6;
  color: #93c5fd;
}
[data-theme="dark"] .style-preview-mini {
  background: #090d16;
}
[data-theme="dark"] .color-swatch-btn {
  border-color: #1e293b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .custom-color-input {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
[data-theme="dark"] .emoji-select-btn {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .emoji-select-btn:hover {
  background: #334155;
}
[data-theme="dark"] .emoji-select-btn.active {
  background: rgba(37, 99, 235, 0.25);
  border-color: #3b82f6;
}
[data-theme="dark"] #btn-no-emoji {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
[data-theme="dark"] .custom-emoji-input {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

/* ==========================================================================
   PNS 1cm ICON BAR (desktop + phone): two menu icons + icon-only tools
   ========================================================================== */
.editor-ribbon {
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
  padding: 0 !important;
}

#toolbar.toolbar {
  position: relative !important;
  z-index: 1000 !important;
  height: 1cm !important;
  min-height: 1cm !important;
  max-height: 1cm !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  overflow: visible !important;
}

#toolbar .toolbar-tabs-vertical {
  display: none !important;
}

#toolbar .tool-group-label {
  display: none !important;
}

#toolbar .pns-menus {
  position: relative !important;
  z-index: 1001 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
}

#toolbar .pns-menu {
  position: relative !important;
  z-index: 1002 !important;
}

#toolbar .pns-menu-btn {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 14px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
  transform: none !important;
}

#toolbar .pns-menu-btn:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45) !important;
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

#toolbar .pns-menu-btn svg,
#toolbar .pns-menu-btn i {
  width: 15px !important;
  height: 15px !important;
  font-size: 14px !important;
}

#toolbar .pns-menu-panel {
  position: absolute !important;
  top: calc(100% + 7px) !important;
  left: 0 !important;
  z-index: 10005 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 172px !important;
  padding: 6px !important;
  background: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(37, 99, 235, 0.08) !important;
}

#toolbar .pns-menu-panel[hidden] {
  display: none !important;
}

#toolbar .pns-menu-option {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 7px 10px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #1e293b !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease !important;
  transform: none !important;
}

#toolbar .pns-menu-option:hover {
  background: rgba(37, 99, 235, 0.09) !important;
  transform: none !important;
}

#toolbar .pns-menu-option.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(6, 182, 212, 0.14)) !important;
  color: #1d4ed8 !important;
}

#toolbar .pns-menu-option svg,
#toolbar .pns-menu-option i {
  width: 15px !important;
  height: 15px !important;
  font-size: 14px !important;
  color: #2563eb !important;
  flex-shrink: 0 !important;
}

#toolbar .pns-menu-option span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#toolbar .pns-menu-empty {
  padding: 7px 10px !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
}

[data-theme="dark"] #toolbar .pns-menu-panel {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] #toolbar .pns-menu-option {
  color: #e2e8f0 !important;
}
[data-theme="dark"] #toolbar .pns-menu-option:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}
[data-theme="dark"] #toolbar .pns-menu-option.active {
  background: rgba(37, 99, 235, 0.22) !important;
  color: #60a5fa !important;
}

#toolbar .tool-chip {
  height: 27px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  color: #334155 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#toolbar .tool-chip svg,
#toolbar .tool-chip i {
  width: 14px !important;
  height: 14px !important;
  color: #2563eb !important;
}
[data-theme="dark"] #toolbar .tool-chip {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

#toolbar .tool-button {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  max-width: 27px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  border-radius: 7px !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#toolbar .tool-button > span {
  display: none !important;
}

#toolbar .tool-button:not(:has(svg)):not(:has(i)) > span {
  display: inline !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 0 3px !important;
  white-space: nowrap !important;
}

#toolbar .tool-button svg,
#toolbar .tool-button i {
  width: 14px !important;
  height: 14px !important;
  font-size: 13px !important;
}

#toolbar .tool-select {
  height: 26px !important;
  min-height: 26px !important;
  font-size: 11px !important;
  padding: 0 5px !important;
  border-radius: 7px !important;
}

#toolbar .color-control {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
}

#toolbar label {
  font-size: 10px !important;
  gap: 3px !important;
}

#toolbar .toggle-row-compact {
  font-size: 10px !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

#toolbar .toolbar-tools-center {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  cursor: grab !important;
  touch-action: pan-x !important;
}

/* Défilement conservé, barre complètement masquée */
#toolbar .toolbar-tools-center::-webkit-scrollbar {
  display: none !important;
}

/* Pendant le glisser : curseur saisie et boutons non déclenchables */
#toolbar .toolbar-tools-center.pns-center-dragging {
  cursor: grabbing !important;
}
#toolbar .toolbar-tools-center.pns-center-dragging * {
  pointer-events: none !important;
}

#toolbar .toolbar-tools-center .tool-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 3px !important;
  border-right: 1px solid var(--line, #e2e8f0) !important;
  padding: 0 10px 0 0 !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

#toolbar .toolbar-tools-center .tool-group:last-child {
  border-right: 0 !important;
  padding-right: 0 !important;
}

#toolbar .toolbar-tools-center .tool-row {
  display: contents !important;
}

/* Actions dropdown menu (far right) */
#toolbar .pns-actions-menu {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  padding-left: 10px !important;
  border-left: 1px solid var(--line, #e2e8f0) !important;
}

#toolbar .pns-actions-menu .pns-menu-btn {
  width: auto !important;
  min-width: 34px !important;
  padding: 0 7px !important;
  gap: 3px !important;
}

#toolbar .pns-actions-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#toolbar .pns-actions-caret svg,
#toolbar .pns-actions-caret i {
  width: 10px !important;
  height: 10px !important;
  font-size: 10px !important;
  opacity: .9;
}

#toolbar .pns-actions-menu .pns-menu-panel {
  left: auto !important;
  right: 0 !important;
  min-width: 218px !important;
}

#toolbar .pns-menu-option .action-hint {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  padding-left: 14px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

#toolbar .pns-menu-option.pns-action-export {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1)) !important;
}

[data-theme="dark"] #toolbar .pns-menu-option .action-hint {
  color: #64748b !important;
}
[data-theme="dark"] #toolbar .pns-actions-menu {
  border-left-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] #toolbar .toolbar-tools-center .tool-group {
  border-right-color: rgba(255, 255, 255, 0.12) !important;
}

#toolbar .toolbar-preview-strip {
  max-height: 30px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: center !important;
}

#toolbar .toolbar-preview-strip .preview-mini-wrapper {
  display: none !important;
}

#toolbar .toolbar-preview-strip .preview-card {
  padding: 3px 8px !important;
  flex-direction: row !important;
  gap: 5px !important;
}

#toolbar .toolbar-preview-strip .preview-num {
  font-size: 10px !important;
}

#toolbar .toolbar-preview-strip .preview-add-box {
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
}

/* ==========================================================================
   STRICT PERFORMANCE MODE (page menus)
   Opaque, border-only, instant menus: no blur, no shadow compositing,
   no open/close animation and no item transitions.
   ========================================================================== */
.canvas-floating-zoom,
.mmp-bg-popover,
.mmp-export-popover,
.mmp-styles-popover,
.pns-dock-panel,
.pns-shape-panel,
.accounts-menu,
.mobile-menu {
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  animation: none !important;
}

.canvas-floating-zoom *,
.mmp-bg-popover *,
.mmp-export-popover *,
.mmp-styles-popover *,
.pns-dock-panel *,
.pns-shape-panel *,
.mobile-menu * {
  transition: none !important;
  animation: none !important;
}