html, body {
  margin: 0;
  height: 100%;
}

#app {
  display: flex;
  height: 100vh;
}

#tools {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 224px;
  max-height: calc(100vh - 40px);
  background: #f3f3f3;
  border: 1px solid #bbb;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  user-select: none;
  display: flex;
  flex-direction: column;
}

#toolsBody {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-height: 700px) {
  #tools { transform: scale(0.85); transform-origin: top left; max-height: calc((100vh - 40px) / 0.85); }
}
@media (max-height: 560px) {
  #tools { transform: scale(0.72); transform-origin: top left; max-height: calc((100vh - 40px) / 0.72); }
}

#toolsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
  flex-shrink: 0;
}

#toolsCollapseBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #555;
  padding: 0 2px;
  line-height: 1;
}

#toolsCollapseBtn:hover { color: #000; }

#toolsBasicSection,
#toolsAdvancedSection {
  padding: 8px;
}

#toolsAdvancedSection { padding-top: 0; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-bottom: 6px;
}

.tool-grid button {
  padding: 4px 0;
  font-size: 12px;
  border: 1px solid #bbb;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}

.tool-grid button:hover { background: #e0e0e0; }

#tools hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 4px 0;
}

.tools-slider {
  width: 100%;
  margin: 4px 0;
  display: block;
}

.tools-subsection-label {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  padding: 4px 8px 2px;
}

/* Shared button base — used in both tools panel and lobby */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn:hover { background: #f0f0f0; }
.btn:active { background: #e0e0e0; }

.btn-primary { background: #3a7bd5; color: #fff; border-color: #3a7bd5; }
.btn-primary:hover { background: #2f68b8; border-color: #2f68b8; }

.btn-danger { color: #c0392b; border-color: #e74c3c; }
.btn-danger:hover { background: #fde8e8; }

.btn-warning { color: #e67e22; border-color: #e67e22; font-weight: 600; }
.btn-warning:hover { background: #fef5ec; }

.btn-purple { background: #8e44ad; color: #fff; border-color: #8e44ad; }
.btn-purple:hover { background: #7d3c98; border-color: #7d3c98; }

.btn-sm { padding: 3px 8px; font-size: 11px; border-radius: 4px; }
.btn-block { width: 100%; }

.tools-sub-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.tools-sub-btn:hover { background: #e0e0e0; }

.tools-sub-label {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.dash-row {
  display: flex;
  gap: 3px;
  margin: 4px 0;
}

.dash-btn {
  flex: 1;
  padding: 3px 2px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.dash-btn:hover { background: #e8e8e8; }
.dash-btn.active { background: #0066cc; color: #fff; border-color: #0055aa; }

.tools-page-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-top: 4px;
}


#toolsSyncLockRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 2px;
}

#toolsSyncLockRow label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: #555;
  font-size: 11px;
}

.colors {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #666;
}

.color.active {
  border: 3px solid #000;
}

#canvasArea {
  flex: 1;
  position: relative;
  background: #e5e5e5;
  overflow: hidden;
}

#canvasWrapper {
  position: absolute;
  inset: 0;
}

#board {
  display: block;
  width: 100%;
  height: 100%;
}

.resize-handle { display: none; }

.resize-handle:hover {
  background: rgba(0, 0, 0, 0.08);
}

.tool-grid button.active {
  background: #0066cc;
  color: white;
  border: 1px solid #004c99;
}

#tablicePanel {
  display: none;
  position: fixed;
  top: 60px;
  right: 20px;
  width: 620px;
  height: 520px;
  min-width: 280px;
  min-height: 220px;
  background: #1e1e1e;
  border: 1px solid #555;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  z-index: 10000;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

#tablicePanel.open { display: flex; }

#tabliceHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #2a2a2a;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #444;
  font-weight: bold;
  font-size: 13px;
  color: #ddd;
  cursor: move;
  flex-shrink: 0;
}

.tablice-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #aaa;
  padding: 0 2px;
  line-height: 1;
}

.tablice-close:hover { color: #fff; }

#tabliceMain {
  display: flex;
  flex: 1;
  overflow: hidden;
}

#tabliceLeft {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #252525;
  border-right: 1px solid #444;
}

#tabliceChapters {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

#tabliceChapters button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #bbb;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tabliceChapters button:hover { background: #333; color: #fff; }
#tabliceChapters button.active { background: #3a5f8a; color: #fff; }

#tabliceNavBottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  border-top: 1px solid #444;
  flex-shrink: 0;
}

#tabliceNavBottom button {
  background: #444;
  color: #fff;
  border: 1px solid #666;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 13px;
}

#tabliceNavBottom button:hover { background: #666; }
#tabliceNavBottom button:disabled { opacity: 0.35; cursor: default; }

#tablicePageLabel {
  color: #ccc;
  font-size: 12px;
  min-width: 44px;
  text-align: center;
}

#tabliceSyncLock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid #444;
  flex-shrink: 0;
}

#tabSyncLabel, #tabLockLabel {
  color: #aaa;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

#tabliceImageWrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}

#tabliceImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#tabliceCursorCanvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

#tabliceResizeCorner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: ew-resize;
  background: rgba(255,255,255,0.06);
  border-radius: 0 0 8px 0;
}

#tabliceResizeCorner:hover { background: rgba(255,255,255,0.18); }

/* ── Panel figury ───────────────────────────────────────────── */

#ellipsePanel {
  display: none; position: fixed; top: 20px; left: 20px;
  background: #f5f5f5; border: 1px solid #aaa; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3); z-index: 10000;
  user-select: none; font-size: 12px; min-width: 160px;
}
#ellipsePanel.open { display: block; }
#ellipsePanelHeader {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: #ddd; border-radius: 8px 8px 0 0;
  font-weight: bold; font-size: 13px; cursor: move;
}
#ellipsePanelBody { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
body.dark #ellipsePanel { background: #252525; border-color: #555; color: #ccc; }
body.dark #ellipsePanelHeader { background: #333; color: #ddd; }

#circlePanel {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  background: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  user-select: none;
  font-size: 12px;
  min-width: 180px;
}
#circlePanel.open { display: block; }
#circlePanelHeader {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: #ddd; border-radius: 8px 8px 0 0;
  font-weight: bold; font-size: 13px; cursor: move;
}
#circlePanelBody { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
body.dark #circlePanel { background: #252525; border-color: #555; color: #ccc; }
body.dark #circlePanelHeader { background: #333; color: #ddd; }

#shapePanel {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  background: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  user-select: none;
  font-size: 12px;
  min-width: 160px;
}

#shapePanel.open { display: block; }

#shapePanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
}

#shapePanelBody {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#shapePanelBody label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ── Układ współrzędnych ─────────────────────────────────────── */

#coordSysPanel {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  width: 290px;
  background: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  user-select: none;
  font-size: 12px;
}

#coordSysPanel.open { display: block; }

#coordSysHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
}

.cs-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #555;
  padding: 0 2px;
}

.cs-close:hover { color: #000; }

#coordSysBody {
  padding: 8px 10px;
}

.cs-section { margin-bottom: 4px; }

.cs-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.cs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 6px;
}

.cs-tabs label { cursor: pointer; }

.cs-form { margin-bottom: 6px; }

.cs-add-btn {
  width: 100%;
  padding: 5px;
  background: #3a7bd5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.cs-add-btn:hover { background: #2a6cc4; }

#csItemList {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  max-height: 130px;
  overflow-y: auto;
}

#csItemList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 11px;
  color: #444;
}

#csItemList li button {
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  font-size: 12px;
  padding: 0 3px;
}

#csItemList li button:hover { color: #e00; }

#resizeOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  cursor: ew-resize;
}

#projectModal,
#saveModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10050;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: white;
  padding: 24px 22px;
  border-radius: 10px;
  width: 300px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
}

#projectModal .modal-box {
  max-height: 60vh;
  overflow: auto;
}

#projectList {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Kalkulator ─────────────────────────────────────────────────────────── */

#calcPanel {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 216px;
  background: #f4f4f4;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  user-select: none;
}

#calcPanel.open { display: block; }

#calcHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
}

.calc-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  color: #555;
}

.calc-close:hover { color: #000; }

.calc-display-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #ccc;
}

#calcDisplay {
  flex: 1;
  text-align: right;
  font-size: 22px;
  font-family: monospace;
  padding: 8px 12px;
  background: #fff;
  min-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
  cursor: text;
}

.calc-paste-btn {
  background: #f8f8f8;
  border: none;
  border-left: 1px solid #ddd;
  cursor: pointer;
  font-size: 15px;
  padding: 0 8px;
  color: #555;
}

.calc-paste-btn:hover { background: #e8e8e8; color: #000; }

.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
}

.calc-grid button {
  padding: 9px 0;
  font-size: 15px;
  border: 1px solid #bbb;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}

.calc-grid button:hover  { background: #e8e8e8; }
.calc-grid button:active { background: #d0d0d0; }

.calc-op  { background: #fff4e0 !important; }
.calc-op:hover  { background: #ffe4b5 !important; }

@keyframes calcKeyFlash {
  0%   { background-color: #ffd700; box-shadow: 0 0 6px #ffa000; }
  100% { background-color: inherit; box-shadow: none; }
}

.calc-flash { animation: calcKeyFlash 0.55s ease-out forwards; }

.calc-zero { grid-column: span 2; }

.calc-eq {
  grid-column: span 4;
  background: #3a7bd5 !important;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  border-color: #2a5ea0 !important;
}

.calc-eq:hover  { background: #2a6cc4 !important; }
.calc-eq:active { background: #1e5aad !important; }

#calcHistoryPanel {
  border-top: 1px solid #ddd;
  padding: 4px 8px 8px;
}

.calc-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.calc-history-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
}

.calc-history-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #bbb;
  padding: 0 2px;
  line-height: 1;
}

.calc-history-clear:hover { color: #e55; }

#calcHistoryList {
  list-style: none;
  padding: 0;
  margin: 0;
}

#calcHistoryList li {
  font-family: monospace;
  font-size: 14px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
  text-align: right;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#calcHistoryList li:hover {
  background: #e4eeff;
  color: #1a4cc8;
}

#calcPanel.calc-locked .calc-grid button,
#calcPanel.calc-locked .calc-paste-btn,
#calcPanel.calc-locked #calcHistoryList li {
  pointer-events: none;
  opacity: 0.4;
}

#mathSolvePanel {
  display: none;
  position: fixed;
  top: 60px;
  right: 20px;
  min-width: 320px;
  max-width: calc(100vw - 40px);
  background: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10001;
  font-size: 12px;
  user-select: none;
}
#mathSolvePanel.open { display: block; }
#mathSolveHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #3a7bd5;
  color: #fff;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
}
#mathSolveHeader .cs-close { color: #dde; }
#mathSolveBody { padding: 10px; }

/* ── Dark mode ──────────────────────────────────────────────────────────── */

body.dark #canvasArea { background: #111; }

body.dark #tools { background: #252525; border-color: #555; color: #ccc; }
body.dark #toolsHeader { background: #333; color: #ddd; }
body.dark #darkModeBtn { color: #ffd700 !important; }
body.dark #toolsCollapseBtn { color: #aaa; }
body.dark #toolsCollapseBtn:hover { color: #fff; }
body.dark #tools hr { border-color: #444; }
body.dark .tools-subsection-label { color: #bbb; }
body.dark .tools-sub-label { color: #bbb; }
body.dark #toolsSyncLockRow label { color: #aaa; }

body.dark .tool-grid button { background: #333; border-color: #555; color: #ddd; }
body.dark .tool-grid button:hover { background: #484848; }
body.dark .tool-grid button.active { background: #0066cc; color: #fff; border-color: #004c99; }

body.dark .tools-sub-btn { background: #333; border-color: #555; color: #ddd; }
body.dark .tools-sub-btn:hover { background: #484848; }

body.dark .dash-btn { background: #333; border-color: #555; color: #ccc; }
body.dark .dash-btn:hover { background: #484848; }
body.dark .dash-btn.active { background: #0066cc; color: #fff; border-color: #0055aa; }

body.dark .color { border-color: #888; }
body.dark .color.active { border-color: #fff; border-width: 3px; }

/* Image panel */
#imagePanel {
  display: none;
  position: fixed;
  top: 20px; left: 20px;
  background: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  user-select: none;
  font-size: 12px;
  min-width: 160px;
}
#imagePanel.open { display: block; }
#imagePanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
}
#imagePanelBody { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }

/* Shape panel */
body.dark #shapePanel { background: #252525; border-color: #555; color: #ccc; }
body.dark #shapePanelHeader { background: #333; color: #ddd; }
body.dark #shapePanelBody input[type=number],
body.dark #shapePanelBody input[type=text] { background: #333; border-color: #555; color: #ddd; }
body.dark #shapePanelBody button:not(.cs-add-btn) { background: #333; border-color: #555; color: #ccc; }

/* Image panel dark */
body.dark #imagePanel { background: #252525; border-color: #555; color: #ccc; }
body.dark #imagePanelHeader { background: #333; color: #ddd; }
body.dark #imagePanelBody button { background: #333; border-color: #555; color: #ccc; }

/* Textbox panel */
#textboxPanel {
  display: none;
  position: fixed;
  top: 20px; left: 20px;
  background: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  user-select: none;
  font-size: 12px;
  min-width: 200px;
  max-width: 260px;
}
#textboxPanel.open { display: block; }
#textboxPanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
}
#textboxPanelBody { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
body.dark #textboxPanel { background: #252525; border-color: #555; color: #ccc; }
body.dark #textboxPanelHeader { background: #333; color: #ddd; }
body.dark #textboxPanelBody textarea,
body.dark #textboxPanelBody input { background: #333; border-color: #555; color: #ddd; }
body.dark #textboxPanelBody button { background: #333; border-color: #555; color: #ccc; }

/* Hold-to-delete buttons */
.hold-delete-btn {
  position: relative;
  overflow: hidden;
}
.hold-delete-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: rgba(198, 40, 40, 0.28);
  pointer-events: none;
}
@keyframes holdFill {
  from { width: 0%; }
  to   { width: 100%; }
}
.hold-delete-btn.holding::before {
  animation: holdFill 1s linear forwards;
}
.hold-delete-btn.holding-2s::before {
  animation: holdFill 2s linear forwards;
}

/* Autosave countdown clock */
#autosaveClockArc {
  transition: stroke-dashoffset 0.9s linear, stroke 0.4s;
}

/* Locked panel state */
.panel-locked input,
.panel-locked select,
.panel-locked textarea,
.panel-locked button {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.panel-locked button.panel-lock-exempt {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* Coord sys panel */
body.dark #coordSysPanel { background: #252525; border-color: #555; color: #ccc; }
body.dark #coordSysHeader { background: #333; color: #ddd; }
body.dark #coordSysBody input, body.dark #coordSysBody select { background: #333; border-color: #555; color: #ddd; }

/* Solid 3D panel */
#solid3dPanel {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  width: 260px;
  background: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  user-select: none;
  font-size: 12px;
}
#solid3dHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
}
#solid3dBody { padding: 8px 10px; }
body.dark #solid3dPanel { background: #252525; border-color: #555; color: #ccc; }
body.dark #solid3dHeader { background: #333; color: #ddd; }
body.dark #solid3dBody input, body.dark #solid3dBody select { background: #333; border-color: #555; color: #ddd; }
body.dark #s3dVertexList { background: #2a2a2a; border-color: #555; color: #ccc; }
body.dark #s3dAddVertexForm, body.dark #s3dConnectInfo { background: #1e2635; border-color: #3a5a8a; color: #aac; }
body.dark #csItemList li { border-color: #444; color: #ccc; }
body.dark #csItemList li button { color: #666; }
body.dark #csItemList li button:hover { color: #f55; }

body.dark .cs-close { color: #aaa; }
body.dark .cs-close:hover { color: #fff; }

/* Calc panel */
body.dark #calcPanel { background: #252525; border-color: #555; }
body.dark #calcHeader { background: #333; color: #ddd; }
body.dark .calc-close { color: #aaa; }
body.dark .calc-close:hover { color: #fff; }
body.dark .calc-display-row { border-color: #444; }
body.dark #calcDisplay { background: #1a1a1a; color: #e0e0e0; }
body.dark .calc-paste-btn { background: #2a2a2a; border-color: #444; color: #999; }
body.dark .calc-paste-btn:hover { background: #383838; color: #ddd; }
body.dark .calc-grid button { background: #333; border-color: #555; color: #ddd; }
body.dark .calc-grid button:hover { background: #484848; }
body.dark .calc-grid button:active { background: #555; }
body.dark .calc-op { background: #3a2f1a !important; color: #e8c87a !important; }
body.dark .calc-op:hover { background: #4a3f2a !important; }
body.dark #calcHistoryPanel { border-color: #444; }
body.dark .calc-history-label { color: #666; }
body.dark .calc-history-clear { color: #555; }
body.dark .calc-history-clear:hover { color: #f55; }
body.dark #calcHistoryList li { color: #777; }
body.dark #calcHistoryList li:hover { background: #1e3050; color: #7aadcc; }

/* Math solve panel */
body.dark #mathSolvePanel { background: #252525; border-color: #555; }
body.dark #mathSolveBody { color: #ccc; }
body.dark #mathSolveInput,
body.dark #mathSubstInput { background: #1a1a1a; border-color: #555; color: #ddd; }
body.dark #mathSolveResultText { background: #1a1a1a !important; border-color: #444 !important; color: #ddd; }
body.dark #mathSolveWorking { color: #888; }
body.dark #mathSolveError { color: #f88; }
body.dark #mathSubstRow { color: #bbb; }
body.dark #mathSubstRow code { background: #333; color: #adc; padding: 0 2px; border-radius: 2px; }
body.dark #mathDiffBtn,
body.dark #mathSubstModeF,
body.dark #mathSubstModeDf { background: #1e2f4a !important; color: #7ab4e0 !important; border-color: #3a6aaa !important; }

/* Users panel */
body.dark #usersPanel { background: #252525 !important; border-color: #555 !important; color: #ccc !important; }
body.dark #usersPanelHeader { background: #1e4a8a !important; }
body.dark #usersList li { border-color: #444 !important; color: #ccc !important; }

/* Modals */
body.dark .modal-box { background: #252525; color: #ddd; }
body.dark .modal-box input,
body.dark .modal-box select,
body.dark .modal-box textarea { background: #333; border: 1px solid #555; color: #ddd; border-radius: 3px; }
body.dark .modal-box button { background: #333; border-color: #555; color: #ccc; }

/* Toast notifications */
#toastContainer {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(40,40,40,0.92); color: #fff; padding: 16px 40px;
  border-radius: 28px; font-size: 26px; opacity: 0;
  transition: opacity 0.2s; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.toast.show { opacity: 1; }
body.dark .toast { background: rgba(220,220,220,0.95); color: #111; }
body.dark #projectList li { border-color: #444 !important; color: #ccc !important; }

body.dark .btn { background: #333; border-color: #555; color: #ddd; }
body.dark .btn:hover { background: #444; }
body.dark .btn-primary { background: #2a5fa8; border-color: #2a5fa8; color: #fff; }
body.dark .btn-primary:hover { background: #245293; }
body.dark .btn-danger { color: #e74c3c; border-color: #e74c3c; background: transparent; }
body.dark .btn-danger:hover { background: #3a1a1a; }
body.dark .btn-warning { color: #e67e22; border-color: #e67e22; background: transparent; }
body.dark .btn-purple { background: #7d3c98; border-color: #7d3c98; color: #fff; }