/* لوحة المظهر العائمة — تُحمّل فقط حين تستدعي ThemeWidget.mount() */
#tk-fab {
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 2147482000;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: #111a16; color: #fff; box-shadow: 0 10px 26px -10px rgba(0,0,0,.55);
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  transition: transform .18s ease;
}
#tk-fab:hover { transform: scale(1.07) }

#tk-panel {
  position: fixed; inset-inline-start: 18px; bottom: 76px; z-index: 2147482001;
  width: 328px; max-height: min(76vh, 620px); overflow-y: auto; overscroll-behavior: contain;
  background: #ffffff; color: #14201a; border: 1px solid rgba(0,0,0,.1);
  border-radius: 16px; box-shadow: 0 28px 70px -24px rgba(0,0,0,.5);
  font: 13px/1.5 system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  direction: rtl; text-align: right; padding: 14px;
  animation: tk-in .18s ease both;
}
#tk-panel[hidden] { display: none }
@keyframes tk-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

#tk-panel h4 { margin: 0 0 10px; font-size: 14px; display: flex; justify-content: space-between; align-items: center }
#tk-panel h5 { margin: 14px 0 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #64736b; text-transform: uppercase }
#tk-panel .tk-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
#tk-panel .tk-row label { flex: 1; font-size: 12px; color: #3d4b44 }
#tk-panel input[type=color] { width: 34px; height: 28px; padding: 0; border: 1px solid rgba(0,0,0,.14); border-radius: 7px; background: none; cursor: pointer }
#tk-panel input[type=range] { flex: 1; accent-color: #0e4a38 }
#tk-panel input[type=text], #tk-panel select {
  width: 100%; padding: 6px 8px; border: 1px solid rgba(0,0,0,.14); border-radius: 8px;
  font: inherit; background: #fff; color: inherit;
}
#tk-panel textarea {
  width: 100%; min-height: 84px; padding: 7px; border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px; font: 11px/1.45 ui-monospace, monospace; direction: ltr; text-align: left;
}
#tk-panel .tk-val { min-width: 34px; text-align: center; font-size: 11.5px; color: #64736b; font-variant-numeric: tabular-nums }
#tk-panel .tk-seg { display: flex; gap: 4px; background: #f1f3f2; padding: 3px; border-radius: 9px }
#tk-panel .tk-seg button {
  flex: 1; border: none; background: none; padding: 5px 0; font: inherit; font-size: 11.5px;
  border-radius: 7px; cursor: pointer; color: #47554d;
}
#tk-panel .tk-seg button[aria-pressed="true"] { background: #fff; color: #0e4a38; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12) }
#tk-panel .tk-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
#tk-panel .tk-presets button {
  cursor: pointer; border: 1px solid rgba(0,0,0,.12); border-radius: 9px; padding: 6px 4px;
  background: none; font: inherit; font-size: 10.5px; color: #3d4b44; display: grid; gap: 5px; justify-items: center;
}
#tk-panel .tk-sw { width: 100%; height: 16px; border-radius: 5px }
#tk-panel .tk-actions { display: flex; gap: 6px; margin-top: 12px }
#tk-panel .tk-actions button {
  flex: 1; padding: 7px 0; border-radius: 9px; border: 1px solid rgba(0,0,0,.14);
  background: #fff; font: inherit; font-size: 11.5px; cursor: pointer;
}
#tk-panel .tk-actions button.primary { background: #111a16; color: #fff; border-color: #111a16 }
#tk-panel .tk-el { border: 1px solid rgba(0,0,0,.1); border-radius: 10px; padding: 8px; margin-bottom: 7px }
#tk-panel .tk-el code { display: block; font-size: 10.5px; color: #64736b; margin-bottom: 6px; word-break: break-all; direction: ltr; text-align: left }
#tk-panel .tk-note { font-size: 11px; color: #64736b; margin: 6px 0 0 }
#tk-panel .tk-hint { font-size: 11px; color: #9a6a2b; background: #fdf6e7; border-radius: 8px; padding: 6px 8px; margin-top: 8px }