:root{
  
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", Ubuntu, Cantarell,
               "Droid Sans", sans-serif;

  --font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
}

html, body{ font-family: var(--font-sans); }
h1,h2,h3{ font-weight: 700; }
code, pre{ font-family: var(--font-mono); }

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Open Sans', Arial, sans-serif; background: #f0f0f0; }

#menuBar {
  display: flex;
  background: #ddd;
  padding: 5px 10px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.menu-item {
  position: relative;
  margin-right: 20px;
  cursor: pointer;
  padding: 5px 10px;
}
.menu-item:hover { background: #ccc; }
.menu-item span { font-weight: bold; }
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #bbb;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 300;
  min-width: 120px;
}
.menu-item:hover .submenu { display: block; }
.submenu-item {
  padding: 5px 10px;
  cursor: pointer;
}
.submenu-item:hover { background: #ddd; }

#menuRightLabel {
  margin-left: auto;
  font-size: 12px;
  font-weight: 300;
  align-self: center;
  color: #000;
  padding-right: 10px;
}

#toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 10px;
  position: fixed;
  top: 40px;
  left: 0; right: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.tool-btn {
  background: #fff; border: 2px solid #bbb;
  width: 40px; height: 40px; border-radius: 10px;
  cursor: pointer; font-size: 20px; color: #333;
  display: flex; align-items: center; justify-content: center;
  margin: 0 5px; transition: background 0.2s, transform 0.1s;
  position: relative;
}
.tool-btn:hover { background: #ccc; transform: scale(1.1); }
.tool-btn.active { background: #888; color: #fff; border-color: #666; }

.custom-dropdown.active {
  background: #888;
  border-color: #666;

}
.custom-dropdown.active .custom-dropdown-selected {
  color: #fff;
}

.brush-dropdown .tool-btn::after,
#shapeDropdown .dropdown-button.tool-btn::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 2px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  pointer-events: none;
}

.brush-dropdown{
  position: relative;
  display: inline-block;
}

.brush-dropdown-content{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  padding: 6px;
  display: none;
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 5000;
  transform-origin: top center;
  animation: popIn var(--trans) ease;
}

.brush-dropdown-content::before{
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -8px;
  height: 8px;
}

.brush-dropdown:hover .brush-dropdown-content,
.brush-dropdown.open .brush-dropdown-content{
  display: block;
}

.brush-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, transform .1s;
  color: var(--text-primary);
}

.brush-option:hover{
  background: color-mix(in oklab, var(--bg-elev-2), #fff 8%);
  transform: scale(1.03);
}

#topSliders {
  display: flex; flex-direction: column; gap: 8px; align-items: center; margin-right: 10px;
}
#topSliders input[type="range"] {
  -webkit-appearance: none; width: 80px; height: 10px; background: #ddd; border-radius: 5px; cursor: pointer;
}
#topSliders input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; background: #333; border-radius: 50%; cursor: pointer;
}

.color-palette{
  position: relative;
  padding: 2px 4px;
}

.color-grid{
  display:grid;
  grid-template-columns: repeat(5, 30px);
  gap: 4px 4px;
  align-items:center;
}

.color-circle{
  --clr: #000;
  --ring: rgba(255,255,255,.9);

  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--clr);
  border: 2px solid var(--ring);
  box-shadow:
    0 8px 14px rgba(0,0,0,.16),
    0 2px 3px rgba(0,0,0,.10);
  cursor: pointer;
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .12s ease;
  outline: none;
}

.color-circle:hover{
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 12px 22px rgba(0,0,0,.20),
    0 3px 5px rgba(0,0,0,.10);
}

.color-circle.active{
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 14px 24px rgba(0,0,0,.22),
    0 4px 8px rgba(0,0,0,.12);
}

.theme-dark .color-circle{
  box-shadow:
    0 10px 20px rgba(0,0,0,.35),
    0 3px 6px rgba(0,0,0,.25);
}

#shapeDropdown{
  position: relative;
  display: inline-block;
}

#shapeDropdownContent{
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  display: none;
  padding: 8px 0;
  min-width: 50px;

  background: var(--bg-elev-2);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  transform-origin: top center;
  animation: popIn var(--trans) ease;
  z-index: 5000;
}

#shapeDropdownContent::before{
  content:'';
  position:absolute;
  left:0; right:0;
  top:-8px; height:8px;
}

#shapeDropdown.open #shapeDropdownContent,
#shapeDropdown:hover #shapeDropdownContent{
  display: block;
}

.dropdown-item{
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background .2s, transform .1s;
}
.dropdown-item:hover{
  background: color-mix(in oklab, var(--bg-elev-2), #fff 8%);
  transform: scale(1.03);
}

.custom-dropdown{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  margin: 0 5px;

  background: var(--bg-elev-2);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  color: var(--text-primary);
  transition: background .2s, transform .1s, border-color .2s, color .2s, box-shadow .2s;
}
.custom-dropdown:hover{ 
  background: color-mix(in oklab, var(--bg-elev-2), #fff 4%);
  transform: scale(1.05);
}

.custom-dropdown::after{
  content: '';
  position: absolute;
  right: 5px;
  bottom: 2px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-primary);
  pointer-events: none;
}

.custom-dropdown .custom-dropdown-selected{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-primary);
}

.custom-dropdown .custom-dropdown-options{
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  display: none;
  padding: 8px 0;
  min-width: 44px;

  background: var(--bg-elev-2);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  transform-origin: top center;
  animation: popIn var(--trans) ease;
  z-index: 5000;
}

.custom-dropdown .custom-dropdown-options::before{
  content:'';
  position:absolute;
  left:0; right:0;
  top:-8px; height:8px;
}

.custom-dropdown:hover .custom-dropdown-options,
.custom-dropdown.open .custom-dropdown-options {
  display: block;
}

.custom-dropdown .custom-dropdown-option{
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .1s;
  color: var(--text-primary);
}
.custom-dropdown .custom-dropdown-option:hover{
  background: color-mix(in oklab, var(--bg-elev-2), #fff 8%);
  transform: scale(1.05);
}

.text-tools {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.text-style-btn {
  width: 35px; height: 35px; font-size: 14px;
  background: #fff; border: 2px solid #bbb; border-radius: 10px;
  cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background 0.2s, transform 0.1s;
  display: flex; align-items: center; justify-content: center; color: #333;
}
.text-style-btn:hover { background: #ccc; transform: scale(1.1); }
.text-style-btn.active { background: #888; color: #fff; border-color: #666; }
#textInput {
  position: absolute; z-index: 10000; border: 1px dashed #000; outline: none; padding: 4px;
  background: transparent; color: inherit; min-width: 50px; min-height: 20px;
}

#leftPanel, #rightPanel {
  background: #ddd;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 150px;
  height: calc(100vh - 150px);
  box-shadow: 2px 0 4px rgba(0,0,0,0.2);
}
#leftPanel { left: 0; width: 110px; }
#rightPanel { right: 0; width: 70px; }

.action-btn {
  background: #fff; border: 2px solid #bbb;
  width: 40px; height: 40px; border-radius: 10px;
  cursor: pointer; font-size: 20px; margin: 6px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background 0.2s, transform 0.1s;
  display: flex; align-items: center; justify-content: center; color: #333;
}
.action-btn:hover { background: #ccc; transform: scale(1.1); }

.selection-rect {
  position: absolute; border: 2px dashed #333; pointer-events: none; z-index: 200;
}
#selectionHandle {
  display: none; position: absolute; width: 16px; height: 16px; background: #fff;
  border: 1px solid #000; text-align: center; line-height: 16px; font-size: 12px;
  cursor: move; z-index: 300;
}

#chartPopup {
  display: none; position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 1000px; max-height: calc(80vh + 50px); overflow: auto;
  background: #fff;
  border: 2px solid #333; z-index: 9999;
  padding: 10px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#chartPopup.active { display: block; }
#closeChartPopupBtn {
  float: right; margin: -5px; cursor: pointer;
  background: none; border: none; font-size: 20px;
}
#chartControls { margin-bottom: 10px; }
#chartControls label { margin-right: 5px; }
#chartControls input, #chartControls select { margin-right: 10px; }

#tableContainer {
  border: 1px solid #ccc; max-height: 200px; overflow: auto; margin-bottom: 10px;
}
table#dataTable {
  width: 100%; border-collapse: collapse; text-align: center;
}
#dataTable th, #dataTable td {
  border: 1px solid #999; padding: 4px 6px; min-width: 60px;
}
#dataTable th[contenteditable], #dataTable td[contenteditable] {
  background: #fafafa;
}

#chartCanvasContainer {
  width: 100%; text-align: center;
}
#chartCanvasPopup {
  border: 1px solid #999; background: #fff;
  margin: 0 auto;
}

#chartExportControls {
  margin-top: 10px; text-align: center;
}
#chartExportControls button {
  margin: 0 5px; padding: 5px 10px; cursor: pointer;
}

#imageResizePopup {
  display: none; position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 400px; background: #fff; border: 2px solid #333;
  z-index: 9999; padding: 10px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#imageResizePopup.active { display: block; }
#imageResizePopup h2 { margin-bottom: 10px; }
#imageResizePopup label {
  display: block; margin: 5px 0 2px;
}
#imageResizePopup .popup-buttons {
  text-align: right; margin-top: 10px;
}
#imagePreviewContainer {
  text-align: center; margin: 10px 0;
  border: 1px solid #ccc; width: 100%; height: 200px;
  overflow: auto; position: relative;
}
#imagePreview { display: block; margin: 0 auto; }

:root{
  --bg-app:#f3f5f7;
  --bg-elev-1: rgba(255,255,255,.7);
  --bg-elev-2: rgba(255,255,255,.55);
  --stroke: rgba(20,20,40,.12);
  --text-primary:#0e0f1a;
  --text-secondary:#4a4f5a;
  --accent:#5b7cfa;
  --accent-2:#22c1c3;
  --radius:14px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.08);
  --shadow-md: 0 14px 40px rgba(0,0,0,.12);
  --blur: 10px;
  --trans-fast:.15s;
  --trans:.25s;
}

.theme-dark{
  --bg-app:#0f1218;
  --bg-elev-1: rgba(22,25,33,.6);
  --bg-elev-2: rgba(22,25,33,.5);
  --stroke: rgba(200,200,255,.08);
  --text-primary:#e8ebf1;
  --text-secondary:#a8afbf;
  --accent:#7aa2ff;
  --accent-2:#2bd8d6;
}

body{ background: linear-gradient(180deg,var(--bg-app),color-mix(in oklab,var(--bg-app),#000 2%)); color:var(--text-primary); }

#menuBar{
  background: var(--bg-elev-1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--stroke);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-sm);
}
.menu-item{
  border-radius: 10px;
  transition: background var(--trans-fast), transform var(--trans-fast);
}
.menu-item:hover{ background: color-mix(in oklab, var(--bg-elev-1), #000 4%); transform: translateY(-1px); }
.submenu{
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.submenu-item{ transition: background var(--trans-fast); }
.submenu-item:hover{ background: color-mix(in oklab, var(--bg-elev-2), #000 6%); }

#toolbar{
  top: 50px;
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  margin-inline: auto;
  max-width: clamp(980px, 92vw, 1300px);
  box-shadow: var(--shadow-md);
  gap: 12px;
}

.tool-btn, .action-btn, .text-style-btn, .dropdown-button, .custom-dropdown{
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke);
  color: var(--text-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--trans-fast), background var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast), color var(--trans-fast);
}
.tool-btn:hover, .action-btn:hover, .text-style-btn:hover, .dropdown-button:hover, .custom-dropdown:hover{
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--bg-elev-2), #fff 4%);
}
.tool-btn:active, .action-btn:active, .text-style-btn:active{ transform: translateY(0); }

.tool-btn.active, .text-style-btn.active, .custom-dropdown.active{
  background: color-mix(in oklab, var(--bg-elev-2), var(--accent) 16%);
  color: #fff;
  border-color: color-mix(in oklab, var(--accent), #000 12%);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--accent), #000 70%, 26%);
}

.tool-btn:focus-visible, .action-btn:focus-visible, .text-style-btn:focus-visible, .dropdown-button:focus-visible, .custom-dropdown:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent), #fff 10%);
  outline-offset: 2px;
}

.tool-btn i, .action-btn i, .text-style-btn b, .text-style-btn i, .dropdown-item i, .custom-dropdown i{
  background: linear-gradient(180deg, var(--text-primary), color-mix(in oklab,var(--text-primary),#000 10%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brush-dropdown-content,
#shapeDropdownContent,
.custom-dropdown .custom-dropdown-options{
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  transform-origin: top center;
  animation: popIn var(--trans) ease;
}
@keyframes popIn{ from{ opacity:0; transform: translateY(-6px) scale(.98);} to{ opacity:1; transform: translateY(0) scale(1);} }

.custom-dropdown.active{ background: color-mix(in oklab, var(--bg-elev-2), var(--accent) 16%); }
.custom-dropdown.active .custom-dropdown-selected{ color:#fff; }

#topSliders input[type="range"]{
  height: 6px; background: color-mix(in oklab, var(--bg-elev-2), #000 8%);
  border-radius: 999px; border: 1px solid var(--stroke);
}
#topSliders input[type="range"]::-webkit-slider-thumb{
  width: 16px; height:16px; border-radius:50%;
  background: linear-gradient(180deg,var(--accent),var(--accent-2));
  border: 0;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), #fff 75%);
}

#leftPanel, #rightPanel{
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
#leftPanel{ width: 120px; }
#rightPanel{ width: 78px; }

#chartPopup, #imageResizePopup{
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

#tableContainer{ border:1px solid var(--stroke); border-radius:10px; overflow:hidden; }
#dataTable th, #dataTable td{
  border-color: color-mix(in oklab, var(--stroke), #000 8%);
}
#dataTable thead th{
  background: color-mix(in oklab, var(--bg-elev-2), #000 6%);
  position: sticky; top:0;
}

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

#leftPanel [data-tip]::after{
  left: calc(100% + var(--tip-gap));
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
#leftPanel [data-tip]:hover::after{
  transform: translateY(-50%) translateX(0);
}

#rightPanel [data-tip]::after{
  right: calc(100% + var(--tip-gap));
  left: auto;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
#rightPanel [data-tip]:hover::after{
  transform: translateY(-50%) translateX(0);
}

.brush-dropdown-content,
#shapeDropdownContent,
.custom-dropdown .custom-dropdown-options{
  z-index: 5000;
}

[data-tip]::after { display: none !important; }

[data-tip] { position: static; }

#uiTooltip{
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1;
  background: var(--bg-elev-2, #fff);
  color: var(--text-secondary, #4a4f5a);
  border: 1px solid var(--stroke, rgba(0,0,0,.12));
  border-radius: 8px;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.08));
  opacity: 0;
  transition: opacity .12s ease;
  white-space: nowrap;
}
#uiTooltip.show{ opacity: 1; }

#menuBar {
  display: flex;
  align-items: center;
  gap: 10px;
}
#menuBar .menu-spacer {
  flex: 1 1 auto;
}
#menuRightLabel {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-appswitch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;

  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev-1), #fff 22%) 0%,
    color-mix(in oklab, var(--bg-elev-1), #000 8%) 100%
  );
  color: var(--text-primary);
  border: 1px solid color-mix(in oklab, var(--stroke), #000 10%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff, var(--bg-elev-1) 40%),
    0 2px 6px rgba(0,0,0,.12);

  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}
.menu-appswitch i {
  font-size: 14px;
  color: currentColor;
}
.menu-appswitch:hover {
  transform: translateY(-1px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev-1), #fff 28%) 0%,
    color-mix(in oklab, var(--bg-elev-1), #000 6%) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff, var(--bg-elev-1) 30%),
    0 6px 14px rgba(0,0,0,.16);
  filter: brightness(1.02);
}
.menu-appswitch:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent), #fff 10%);
  outline-offset: 2px;
}
.menu-appswitch:active {
  transform: translateY(0);
}

.brand-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;

  font-weight: 700;
  letter-spacing: .25px;
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in oklab, #fff, #000 8%) 100%);
  color: color-mix(in oklab, var(--text-primary), #000 10%);
  border: 1px solid color-mix(in oklab, #ddd, #000 16%);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 20px rgba(0,0,0,.12);

  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
  user-select: none;
}
.brand-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 28px rgba(0,0,0,.16);
  filter: brightness(1.02);
}

@font-face {
  font-family: "Monotype Corsiva Fallback";
  src: local("Monotype Corsiva");
  font-style: italic;
  font-weight: 400;
}
.brand-hand {
  font-family: "Monotype Corsiva", "Monotype Corsiva Fallback", "Brush Script MT", "Dancing Script", cursive;
  font-size: 22px;
  letter-spacing: .5px;
  padding: 2px 8px;
  color: var(--text-primary);
  text-shadow:
    0 1px 0 color-mix(in oklab, #fff, var(--bg-app) 40%),
    0 2px 4px rgba(0,0,0,.12);
  user-select: none;
  white-space: nowrap;
}

.theme-dark .menu-appswitch {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev-1), #fff 10%) 0%,
    color-mix(in oklab, var(--bg-elev-1), #000 20%) 100%
  );
  border-color: color-mix(in oklab, var(--stroke), #fff 12%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff, #000 70%),
    0 2px 6px rgba(0,0,0,.4);
}
.theme-dark .menu-appswitch:hover {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev-1), #fff 14%) 0%,
    color-mix(in oklab, var(--bg-elev-1), #000 18%) 100%
  );
}
.theme-dark .brand-pill {
  background: linear-gradient(180deg, #f7f8fa 0%, #e9edf2 100%);
  border-color: color-mix(in oklab, #cfd6e0, #000 18%);
  color: #1a1f2a;
  text-shadow: none;
}

#uiTooltip {
  z-index: 999999;
}

.color-palette { position: relative; }
#extraColorsContainer{
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  display: none;
  grid-template-columns: repeat(5, 30px);
  gap: 4px 4px;
  padding: 10px 8px;
  background: var(--bg-elev-2, #fff);
  border: 1px solid var(--stroke, rgba(0,0,0,.12));
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  z-index: 5000;
}

#extraColorsContainer::before{
  content:"";
  position:absolute;
  top:80%;
  left:-6px;
  transform: translateY(-80%);
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-right:6px solid var(--bg-elev-2, #fff);
  filter: drop-shadow(-1px 0 0 var(--stroke, rgba(0,0,0,.12)));
}

#toggleExtra{
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  border: 1px solid var(--stroke, rgba(0,0,0,.12));
  background: var(--bg-elev-2, #fff);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  cursor: pointer;
}

.color-palette{ position: relative; }

#colorWheel{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--stroke, rgba(0,0,0,.12));
  background: conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.08));
  cursor: pointer;
  margin: 0 12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
#colorWheel:hover{ transform: translateY(-1px); }
#colorWheel:active{ transform: translateY(0); }

.menu-appswitch,
.menu-appswitch:link,
.menu-appswitch:visited,
.menu-appswitch:hover,
.menu-appswitch:focus,
.menu-appswitch:active {
  text-decoration: none;
  color: inherit;
}

.submenu{ background: rgba(255,255,255,.9); }
.theme-dark .submenu{ background: rgba(22,25,33,.9); }

.custom-dropdown .custom-dropdown-selected{
  color: var(--text-primary) !important;
  font-size: 20px;
}

.custom-dropdown.active .custom-dropdown-selected{ color:#fff; }

#customTools3D .custom-dropdown-selected span{
  background: linear-gradient(180deg, var(--text-primary),
             color-mix(in oklab, var(--text-primary), #000 12%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#toggleExtra{
  z-index: 5100;
}
#toggleExtra i{
  color: var(--text-primary);
  opacity: .9;
}
#toggleExtra:hover i{ opacity: 1; }

select{
  background: #f9fafb;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  appearance: none;
  line-height: 1.2;

  background-image:
    linear-gradient(to bottom, transparent, transparent),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center, right 8px center;
  background-size: 12px 8px, 12px 8px;
}
select:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

.theme-dark select{
  background: #27272a;
  color: #f9fafb;
  border: 1px solid #3f3f46;
  background-image:
    linear-gradient(to bottom, transparent, transparent),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

:root { --ctl-h: 36px; }

#toolbar { padding: 6px 10px; }

.tool-btn, .action-btn, .text-style-btn, .dropdown-button, .custom-dropdown {
  width: var(--ctl-h);
  height: var(--ctl-h);
}

select {
  height: var(--ctl-h);
  padding-block: 0;
  padding-inline: 10px 28px;
  line-height: var(--ctl-h);
  box-sizing: border-box;
}
.theme-dark select {
  height: var(--ctl-h);
  padding-block: 0;
  line-height: var(--ctl-h);
}

:root{
  --ctrl-bg: var(--bg-elev-2, #fff);
  --ctrl-border: color-mix(in oklab, var(--stroke, rgba(0,0,0,.12)), #000 10%);
}
.theme-dark{
  --ctrl-bg: color-mix(in oklab, var(--bg-elev-2, #171a22), #000 6%);
  --ctrl-border: color-mix(in oklab, var(--stroke, rgba(255,255,255,.12)), #fff 18%);
}

#leftPanel select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--ctrl-bg);
  border: 1px solid var(--ctrl-border);
  color: var(--text-primary);
  border-radius: 10px;
  height: 36px;
  padding: 0 32px 0 10px;
  line-height: 36px;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.08));
  cursor: pointer;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

#leftPanel input[type="color"]{
  background: var(--ctrl-bg);
  border: 1px solid var(--ctrl-border);
  border-radius: 10px;
  width: 72px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.08));
}

#leftPanel input[type="color"]::-webkit-color-swatch-wrapper{
  padding: 4px;
  border-radius: 8px;
  background: var(--ctrl-bg);
}
#leftPanel input[type="color"]::-webkit-color-swatch{
  border: 1px solid var(--ctrl-border);
  border-radius: 6px;
}

#leftPanel input[type="color"]::-moz-color-swatch{
  border: 1px solid var(--ctrl-border);
  border-radius: 6px;
}

#toolbar{
  gap: 8px;                 
}

#toolbar .tool-btn,
#toolbar .custom-dropdown,
#toolbar .dropdown-button,
#toolbar .text-style-btn{
  margin: 0;
}

#toolbar .tool-btn + .tool-btn,
#toolbar .custom-dropdown + .tool-btn,
#toolbar .tool-btn + .custom-dropdown,
#toolbar .custom-dropdown + .custom-dropdown,
#toolbar .dropdown-button + .tool-btn{
  margin-left: 6px;
}

#colorWheel{ margin: 0 6px; }
#leftPanel { gap: 8px; }
#leftPanel .tool-btn { margin: 10px 0; }

#toolbar select{
  appearance: none;
  -webkit-appearance: none;
  background-clip: padding-box;
  backdrop-filter: none;
  box-shadow: none;
}

#toolbar select{
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
  color: #111827;

  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">\
<path d="M1 1l5 5 5-5" fill="none" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 8px;
}

.theme-dark #toolbar select{
  background-color: #1f2430;
  border: 1px solid #3f3f46;
  color: #f9fafb;

  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">\
<path d="M1 1l5 5 5-5" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
}

#toolbar select{
  height: var(--ctl-h, 36px);
  line-height: var(--ctl-h, 36px);
  border-radius: 10px;
  padding: 0 28px 0 10px;
}

.theme-dark select option{
  background-color: #0f1218;
  color: #e8ebf1;
}

.body-hide-panels #leftPanel,
.body-hide-panels #rightPanel { display: none; }
.body-hide-panels #canvasContainer { margin: 140px 24px 24px 24px; }

.color-palette { position: relative !important; }
.color-grid { display: grid !important; }
.color-palette { position: relative !important; }

#extraColorsContainer { display: none !important; }
.color-palette.open #extraColorsContainer { display: grid !important; }
.color-grid { display: grid !important; }

.theme-dark #chartPopup #tableContainer { border-color: #3f3f46; }
.theme-dark #chartPopup table#dataTable th,
.theme-dark #chartPopup table#dataTable td {
  color: #e8ebf1;
  background: #171a22;
  border-color: #2e3440;
}

.theme-dark #chartPopup #dataTable thead th {
  background: #1c2130;
  color: #e8ebf1;
}

.theme-dark #chartPopup #dataTable th[contenteditable],
.theme-dark #chartPopup #dataTable td[contenteditable]{
  background: #1b1f2a;
}

#chartPopup select {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
  color: #111827;
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">\
<path d="M1 1l5 5 5-5" fill="none" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 8px;
}

.theme-dark #chartPopup select {
  background-color: #1f2430;
  border: 1px solid #3f3f46;
  color: #f9fafb;
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">\
<path d="M1 1l5 5 5-5" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
}

#chartPopup {
  position: fixed;
}

#closeChartPopupBtn{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;

  background: var(--bg-elev-2);
  color: var(--text-primary);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  line-height: 1;
  z-index: 10001;

  margin: 0 !important;
}

#closeChartPopupBtn:hover{
  background: color-mix(in oklab, var(--bg-elev-2), #fff 8%);
  transform: translateY(-1px);
}

#closeChartPopupBtn:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent), #fff 10%);
  outline-offset: 2px;
}

#mpDescription{

  margin: 16px auto 32px;
  padding: 16px 20px;
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
#mpDescription[hidden]{ display:none; }
#mpDescription h2 { font-size: 22px; margin: 0 0 8px; }
#mpDescription h3 { font-size: 18px; margin: 14px 0 6px; }
#mpDescription p  { margin: 8px 0; color: var(--text-secondary); }
#mpDescription ul { margin: 8px 0 0 18px; }
#mpDescription li { margin: 4px 0; }

.mp-see-more summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
}
.mp-see-more summary::marker { content: ""; }
.mp-see-more[open] summary { opacity: .95; }
.mp-see-more p { margin-top: 6px; }
#mpDescription a { color: var(--accent); text-decoration: none; }
#mpDescription a:hover { text-decoration: underline; }
#mpDescription h2,
#mpDescription h3 {
  color: #111827;
  text-shadow: none;
}
#mpDescription h2 { font-weight: 800; line-height: 1.25; }
#mpDescription h3 { font-weight: 700; line-height: 1.3; }

.theme-dark #mpDescription h2,
.theme-dark #mpDescription h3 {
  color: #e8ebf1;
}

#mpDescription p { color: #374151; }
.theme-dark #mpDescription p { color: #a8afbf; }

#canvasContainer{
  margin: 140px 110px 24px 110px;
  position: relative;
  text-align: center;
}

#paintCanvas{
  width: 900px;
  height: 600px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
  background-color: #fff;
  cursor: crosshair;
  display: block;
  margin: 0 auto;
  touch-action: none;
}

@media (max-width: 900px){

  #leftPanel, #rightPanel { display: none !important; }
  #canvasContainer{ margin: 12px; }
  #paintCanvas{
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

.selection-rect{
  position: absolute;
  border: 2px dashed #333;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 200;
}

#selectionHandle{
  position: absolute;
  display: none;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1px solid #000;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  border-radius: 4px;
  cursor: move;
  z-index: 300;
  pointer-events: auto;
  touch-action: none;
}

@media (max-width: 900px){
  #selectionHandle{
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
  }
}

@media (hover: none) and (pointer: coarse){
  .brush-dropdown:hover .brush-dropdown-content{ display: none; }
  #shapeDropdown:hover #shapeDropdownContent{ display: none; }
  .custom-dropdown:hover .custom-dropdown-options{ display: none; }
}

.brush-dropdown.closing .brush-dropdown-content{ display: none !important; }
#shapeDropdown.closing #shapeDropdownContent{ display: none !important; }

@media (hover: none) and (pointer: coarse){
  .brush-dropdown:hover .brush-dropdown-content{ display: none !important; }
  #shapeDropdown:hover #shapeDropdownContent{ display: none !important; }
}

#canvasContainer {
  position: relative;
  touch-action: none;
  overscroll-behavior: contain;
}

#paintCanvas {
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#toolbar{
  position: fixed;
  top: 50px;
  width: min(92vw, 1300px);
  margin-inline: auto;
  left: 0; right: 0;
}

@media (max-width: 900px){
  #toolbar{
    position: sticky;
    top: 50px;
    width: 100%;
    left: auto; 
    right: auto;
    margin-inline: 0;

    flex-wrap: wrap;
    overflow-x: auto;
    gap: 6px 8px;
    padding: 6px 8px;
  }

  #canvasContainer{ margin-top: 12px; }
}


@media (max-width: 900px){
  .text-tools{ margin-left: 0; order: 5; }
}

@media (max-width: 900px){
  :root{ --ctl-h: 32px; }
  #toolbar select{ height: var(--ctl-h); line-height: var(--ctl-h); }
  .tool-btn, .text-style-btn, .custom-dropdown{ width: var(--ctl-h); height: var(--ctl-h); }
}

@media (max-width: 900px){
  #canvasContainer{ margin-top: 180px; }
}

#chartPopup{ width: min(1000px, 92vw); }
#imageResizePopup{ width: min(400px, 92vw); }

.color-palette{
  display: flex;
  align-items: center;
  gap: 4px;
}

#toggleExtra{
  position: static;
  flex-shrink: 0;
  margin: 0;
}

.brush-dropdown:hover .brush-dropdown-content{ display:block; }
#shapeDropdown:hover #shapeDropdownContent{ display:block; }

.custom-dropdown:hover .custom-dropdown-options{ display:block; }
.custom-dropdown .custom-dropdown-options::before{
  content:""; position:absolute; left:0; right:0; top:-8px; height:8px;
}

@media (hover: none) and (pointer: coarse){
  .brush-dropdown:hover .brush-dropdown-content{ display:none !important; }
  #shapeDropdown:hover #shapeDropdownContent{ display:none !important; }
  .custom-dropdown:hover .custom-dropdown-options{ display:none !important; }

}

body:has(
  .brush-dropdown:hover,
  #shapeDropdown:hover,
  .custom-dropdown:hover,
  .brush-dropdown.open,
  #shapeDropdown.open,
  .custom-dropdown.open
) #leftPanel{
  pointer-events: none;
}

#touchToast[hidden] { display: none !important; }
#touchToast{
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 1000000;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-elev-1, rgba(255,255,255,.85));
  color: var(--text-primary, #111);
  border: 1px solid var(--stroke, rgba(0,0,0,.12));
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 14px 40px rgba(0,0,0,.18));
  backdrop-filter: blur(6px);
}

#touchToast .touch-toast-close{
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 8px;
}
#touchToast .touch-toast-close:hover{ background: rgba(0,0,0,.06); }

#touchToast .touch-toast-link{
  margin-left: 4px; text-decoration: none; font-weight: 600;
  padding: 6px 10px; border-radius: 999px;
  background: var(--accent, #7aa2ff); color: #fff;
}

.theme-dark #touchToast{
  background: rgba(22,25,33,.85);
  color: var(--text-primary, #e8ebf1);
  border-color: var(--stroke, rgba(255,255,255,.12));
}

body.touching .brush-dropdown-content,
body.touching #shapeDropdownContent,
body.touching .custom-dropdown .custom-dropdown-options{
  display: none !important;
}

#colorPalette:hover #extraColorsContainer,
#colorPalette.open #extraColorsContainer {
    display: grid;
}