:root {
     --left-sidebar-width: 70px;
     --right-sidebar-width: 300px;
     --header-height: 55px;
     --font-size: 14px;
     --ruler-bg-color: #28303d;
     --ruler-line-color: #8a99b0;
     --grid-line-color: rgba(138, 153, 176, 0.2);
 }

 html,
 body {
     height: 100%;
     margin: 0;
     overflow: hidden;
     font-size: var(--font-size);
 }

 .app-container {
     display: flex;
     flex-direction: column;
     height: 100%;
     background-color: var(--background-color);
 }

 header {
     flex-shrink: 0;
     height: var(--header-height);
     padding: 0 1.5rem;
     border-bottom: 1px solid var(--card-border-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 header h4 {
     margin: 0;
     font-size: 1.1rem;
 }

 header .toolbar .button-group {
     display: grid;
     grid-auto-flow: column;
     gap: 0.5rem;
     align-items: center;
 }

 header .toolbar button {
     margin: 0;
     padding: 0.5rem 1rem;
 }

 header .toolbar .separator {
     border-left: 1px solid var(--card-border-color);
     height: 25px;
 }

 main {
     flex-grow: 1;
     display: flex;
     overflow: hidden;
 }

 .sidebar {
     flex-shrink: 0;
     background: var(--card-background-color);
     overflow-y: auto;
     padding: 1rem;
 }

 #left-sidebar {
     width: var(--left-sidebar-width);
     border-right: 1px solid var(--card-border-color);
     padding: 1rem 0.5rem;
 }

 #right-sidebar {
     width: var(--right-sidebar-width);
     border-left: 1px solid var(--card-border-color);
 }

 .tool-palette {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }

 .tool-button {
     height: 42px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: 0.65rem;
     padding: 0.5rem 0;
     border-radius: var(--border-radius);
 }

 .tool-button i {
     font-size: 1.1rem;
     margin-bottom: 0.25rem;
 }

 .tool-button.active {
     background-color: var(--primary);
     color: var(--primary-inverse);
     border-color: var(--primary-focus);
 }

 .tool-button.disabled {
     background-color: var(--card-background-color);
     color: var(--muted-color);
     border-color: var(--muted-border-color);
     cursor: not-allowed;
 }

 #canvas-container {
     flex-grow: 1;
     position: relative;
     background-color: #111927;
 }

 canvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     cursor: crosshair;
 }

 .sidebar article {
     padding: 1rem;
     margin-bottom: 1rem;
     background-color: var(--background-color);
 }

 .sidebar h5 {
     margin-top: 0;
     margin-bottom: 1rem;
     font-size: 1rem;
     border-bottom: 1px solid var(--card-border-color);
     padding-bottom: 0.5rem;
 }

 label {
     display: flex;
     align-items: center;
     margin-top: 0.75rem;
     font-size: 0.9rem;
 }

 .help-icon {
     margin-left: 8px;
     color: var(--secondary);
     cursor: pointer;
     transition: color 0.2s ease-in-out;
 }

 .help-icon:hover {
     color: var(--secondary-hover);
 }

 .swal2-html-container table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
     text-align: left;
 }

 .swal2-html-container th,
 .swal2-html-container td {
     padding: 8px;
     border: 1px solid var(--card-border-color);
 }

 .swal2-html-container th {
     background-color: var(--card-background-color);
 }

 .swal2-html-container a {
     color: var(--primary);
 }

 .swal2-html-container ul {
     text-align: left;
     margin: 10px 0 0 20px;
 }

 .swal2-html-container .note {
     font-size: 0.8em;
     color: var(--muted-color);
     margin-top: 15px;
     text-align: justify;
 }

 #selection-options-panel .button-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 0.5rem;
 }

 #selection-options-panel button {
     width: 100%;
     margin-top: 0.5rem;
 }