.editable-text {
   /* Add this line to strip all formatting on paste */
   -webkit-user-modify: read-write-plaintext-only;
 }
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 body {
   font-family: 'Poppins', sans-serif;
   background: #f8f9fa;
   color: #29293A;
   height: 100vh;
   overflow: hidden;
 }
 /* Main Layout Grid - FROM HTML */
 .app-container {
   display: grid;
   grid-template-columns: 70px 350px 1fr 280px !important;
   grid-template-rows: 60px 1fr 60px;
   grid-template-areas:
     "top-bar top-bar top-bar top-bar"
     "nav-sidebar controls-panel canvas-area right-sidebar"
     "nav-sidebar bottom-bar-left bottom-bar-center bottom-bar-right";
   height: 100vh;
   min-width: 960px;
   gap: 0;
 }
 /* Top Bar */
 .top-bar {
   grid-area: top-bar;
   background: #ffffff;
   border-bottom: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px !important;
 }
 .top-bar h1 {
   font-size: 18px;
   font-weight: 600;
   color: #29293A;
 }
 .top-bar-actions {
  position: relative;
   display: flex;
   gap: 10px;
   margin-left:50px;
 }
 /* Navigation Sidebar */
 .nav-sidebar {
   grid-area: nav-sidebar;
   background: #ffffff;
   border-right: 1px solid #e0e0e0;
   padding: 20px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
   overflow-y: auto;
 }
 .nav-icon {
   width: 45px;
   height: 45px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
 }
 .nav-icon:hover {
   background: #f8f9fa;
   transform: translateY(-2px);
 }
 .nav-icon.active {
   background: #c740ff;
   color: white;
 }
 .nav-icon.active svg {
   fill: white;
 }
 .nav-icon svg {
   width: 25px;
   height: 25px;
   fill: #29293acc;
   transition: all 0.3s ease;
 }
 .nav-icon:hover svg {
   fill: #c740ff;
 }
 .nav-icon.active:hover svg {
   fill: white;
 }
 /* Controls Panel */
 .controls-panel {
   grid-area: controls-panel;
   background: #ffffff;
   border-right: 1px solid #e0e0e0;
   padding: 20px;
   overflow-y: auto;
 }
 .controls-header {
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 1px solid #e0e0e0;
 }
 .current-section {
   font-size: 14px;
   color: #c740ff;
   font-weight: 500;
 }
 /* Control Categories */
 .control-category {
   display: none;
 }
 .control-category.active {
   display: block;
 }
 #format-controls {
   display: block;
 }
 .control-section {
   margin-bottom: 5px !important;
   background: #f7f8fa;
   border-radius: 12px;
   padding: 15px;
 }
 .control-section h4 {
   font-size: 12px;
   font-weight: 500;
   color: #c740ff;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 10px !important;
 }
 .control-section-header h4 {
   font-size: 12px;
   font-weight: 500;
   color: #c740ff;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 0px !important;
 }
 #ornament2Randomize, #ornamentRandomize {
   width: auto;
   height: auto;
   padding: 0 12px !important;
   font-size: 22px;
   color: #c740ff;
   font-weight: 100;
   margin-left: 10px !important;
   position: absolute;
 }
 .control-group {
   margin-bottom: 15px;
 }
 .control-group:last-child {
   margin-bottom: 0;
 }
 label {
   display: block;
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 5px;
   color: #29293A;
 }
 input[type="text"], input[type="file"], select, textarea {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   background: #ffffff;
   color: #29293A;
   transition: all 0.3s ease;
 }
 input[type="text"]:focus, select:focus, textarea:focus {
   outline: none;
   border-color: #c740ff;
   box-shadow: 0 0 0 3px rgba(199, 64, 255, 0.1);
 }
 textarea {
   min-height: 80px;
   resize: vertical;
   font-family: 'Poppins', sans-serif;
 }
 input[type="range"] {
   width: 100%;
   height: 6px;
   border-radius: 3px;
   background: #e0e0e0;
   outline: none;
   -webkit-appearance: none;
 }
 input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: #c740ff;
   cursor: pointer;
   border: 2px solid #ffffff;
   box-shadow: none;
 }
 .color-controls {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 10px;
   margin-bottom: 15px;
 }
 .color-input-group {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .color-preview {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 2px solid #e0e0e0;
   margin-bottom: 5px;
   cursor: pointer;
   transition: all 0.2s ease;
   border: 2px solid #fff;
 }
 .color-preview:hover {
   border-color: #c740ff;
   transform: scale(1.1);
 }
 .color-label {
   font-size: 12px;
   font-weight: 500;
   color: #666;
   margin-bottom: 3px;
   text-align: center;
 }
 .color-input {
   width: 100% !important;
   padding: 6px !important;
   font-family: 'Courier New', monospace !important;
   font-size: 12px !important;
   text-transform: uppercase !important;
   text-align: center;
 }
 .text-alignment-buttons {
   display: flex;
   gap: 8px;
   margin-top: 0px;
 }
 .alignment-btn, .presenter-btn {
   flex: 1;
   padding: 8px;
   border: 1px solid #f7f8fa;
   border-radius: 6px;
   background: #ffffff;
   cursor: pointer;
   font-size: 12px;
   transition: all 0.3s ease;
   text-align: center;
 }
 .alignment-btn.active, .presenter-btn.active {
   background: #29293a14;
   color: #29293a;
   border: 1px solid #29293a1a;
 }
 .toggle-row {
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px;
   width: 49%;
   min-width: 40%;
   background-color: #29293a0d;
   border-radius: 8px;
   margin-bottom: 10px;
 }
 .toggle-row-sprinkles {
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px;
   width: 80%;
   min-width: 40%;
   background-color: #29293a0d;
   border-radius: 8px;
   margin-bottom: 10px !important;
 }
 .control-section > .toggle-row-sprinkles:last-of-type {
   margin-bottom: 0 !important;
 }
 .toggle-row small {
   font-size: 12px;
 }
 .toggle {
   width: 25px;
   height: 16px;
   background: #e0e0e0;
   border-radius: 12px;
   position: relative;
   cursor: pointer;
   transition: all 0.3s ease;
 }
 .toggle.active {
   background: #c740ff;
 }
 .toggle::before {
   content: '';
   position: absolute;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: white;
   top: 3px;
   left: 4px;
   transition: all 0.3s ease;
   /*   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
 }
 .toggle.active::before {
   transform: translateX(8px);
 }
 .value-display {
   text-align: center;
   font-size: 12px;
   color: #666;
   margin-top: 5px;
 }
 .logo-preview {
   width: 60px;
   height: 40px;
   object-fit: contain;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   background: #a9a9a9;
   padding: 4px;
   display: none;
 }
 .clear-btn {
   width: 24px;
   height: 24px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   background: #ffffff;
   color: #666;
   font-size: 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 .clear-btn:hover {}
 .presenter-controls {}
 .presenter-controls:first-of-type {
   border-top: none;
   margin-top: 0;
 }
 /* Canvas Area */
 .canvas-area {
   grid-area: canvas-area;
   background: #f8f9fa;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .canvas-container {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f7f8fa;
   padding: 40px 20px;
   min-height: 80vh;
 }
 .canvas-wrapper {
   transform-origin: center;
   transition: transform 0.3s ease;
 }
 #canvas {
   display: block;
   border-radius: 12px;
   box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
   overflow: scroll;
   border: 2px solid #f7f8fa;
 }
 /* Bottom Bar Sections */
 .bottom-bar-left {
   grid-area: bottom-bar-left;
   background: #ffffff;
   border-top: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding: 0 20px;
 }
 .bottom-bar-center {
   grid-area: bottom-bar-center;
   background: #ffffff;
   border-top: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 20px;
 }
 .bottom-bar-right {
   grid-area: bottom-bar-right;
   background: #ffffff;
   border-top: 1px solid #e0e0e0;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   align-items: center;
   justify-content: flex-start;
   justify-items: center;
   padding: 0 20px;
   column-gap: 15px;
 }
 /* Zoom Controls */
 .zoom-controls {
   display: flex;
   align-items: center;
   gap: 12px;
   background: #f7f8fa;
   padding: 8px 12px;
   border-radius: 6px;
 }
 .zoom-label {
   font-size: 12px;
   font-weight: 500;
   color: #666;
   min-width: 35px;
 }
 .zoom-buttons {
   display: flex;
   gap: 4px;
 }
 .zoom-btn {
   padding: 4px 8px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   background: #ffffff;
   color: #29293A;
   font-size: 11px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   min-width: 32px;
   text-align: center;
 }
 .zoom-btn:hover {
   border-color: #c740ff;
   background: #f8f9fa;
 }
 .zoom-btn.active {
   background: #c740ff;
   color: white;
   border-color: #c740ff;
 }
 .zoom-slider {
   width: 100px;
   height: 4px;
   border-radius: 2px;
   background: #e0e0e0;
   outline: none;
   -webkit-appearance: none;
   margin: 0 8px;
 }
 .zoom-slider::-webkit-slider-thumb {
   appearance: none;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #c740ff;
   cursor: pointer;
   border: 2px solid #ffffff;
   box-shadow: 0 1px 3px rgba(199, 64, 255, 0.3);
 }
 .zoom-slider::-moz-range-thumb {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #c740ff;
   cursor: pointer;
   border: 2px solid #ffffff;
   box-shadow: 0 1px 3px rgba(199, 64, 255, 0.3);
 }
 .zoom-percentage {
   font-size: 12px;
   font-weight: 500;
   color: #666;
   min-width: 35px;
   text-align: center;
 }
 /* Right Sidebar */
 .right-sidebar {
   grid-area: right-sidebar;
   background: #ffffff;
   border-left: 1px solid #e0e0e0;
   padding: 20px;
   overflow-y: auto;
 }
 .sidebar-section {
   margin-bottom: 20px;
   background: #f7f8fa;
   border-radius: 12px;
   padding: 15px;
 }
 .sidebar-section h4 {
   font-size: 12px;
   font-weight: 500;
   color: #c740ff;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 12px;
 }
 /* Buttons */
 .btn {
   background: #c740ff;
   color: white;
   border: none;
   border-radius: 8px;
   padding: 8px 16px;
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
 }
 .btn:hover {
   background: #b230e8;
   transform: none;
 }
 .btn.secondary {
   background: #f7f8fa;
   color: #29293a;
   border: 1px solid #e0e0e0;
 }
 .btn.secondary:hover {
   background: #e9ecef;
 }
 /* Image Modal */
 .image-preview-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 1000;
 }
 .image-preview-container {
   background: white;
   border-radius: 12px;
   padding: 30px;
   max-width: 500px;
   width: 90%;
   text-align: center;
 }
 .image-preview-title {
   font-size: 18px;
   font-weight: 600;
   color: #29293A;
   margin-bottom: 20px;
 }
 .crop-area {
   position: relative;
   width: 300px;
   height: 300px;
   margin: 0 auto 20px;
   border: 2px solid #e0e0e0;
   border-radius: 8px;
   overflow: hidden;
   cursor: move;
 }
 .crop-image {
   position: absolute;
   transition: none;
   user-select: none;
   -webkit-user-drag: none;
 }
 .crop-instructions {
   font-size: 14px;
   color: #666;
   margin-bottom: 20px;
 }
 .preview-buttons {
   display: flex;
   gap: 10px;
   justify-content: center;
 }
 /* Responsive Design */
 @media (max-width: 1200px) {
   .app-container {
     grid-template-columns: 70px 350px 1fr 250px;
   }
 }
 /* Simple controls panel show/hide with transition */
 @media (max-width: 1200px) {
   .app-container {
     grid-template-columns: 70px 0px 1fr; /* collapsed */
     grid-template-rows: 60px 1fr 60px;
     grid-template-areas:
       "nav-sidebar controls-panel top-bar"
       "nav-sidebar controls-panel canvas-area"
       "nav-sidebar controls-panel bottom-bar-center";
     transition: grid-template-columns 0.3s ease; /* smooth column resize */
   }
   .app-container.controls-visible {
     grid-template-columns: 70px 350px 1fr; /* expanded */
   }
   .controls-panel {
     grid-area: controls-panel;
     overflow: hidden;
     /* Start hidden */
     opacity: 0;
     transform: translateX(-20px);
     transition: opacity 0.3s ease, transform 0.3s ease;
   }
   .app-container.controls-visible .controls-panel {
     opacity: 1;
     transform: translateX(0);
   }
   /* Hide the right sidebar & extras on mobile */
   .right-sidebar, .bottom-bar-left, .bottom-bar-right {
     display: none;
   }
 }
 .canvas-area {
   flex: 1;
   min-height: 0; /* Important for flex children */
 }
 .bottom-bar-left, .bottom-bar-center, .bottom-bar-right {
   flex-shrink: 0; /* Prevent shrinking */
 }
 /* Google Fonts Search Styles */
 .font-search-input {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   background: #ffffff;
   color: #29293A;
   transition: all 0.3s ease;
 }
 .font-search-input:focus {
   outline: none;
   border-color: #c740ff;
   box-shadow: 0 0 0 3px rgba(199, 64, 255, 0.1);
 }
 .font-suggestions {
   max-height: 200px;
   overflow-y: auto;
   border: 1px solid #e0e0e0;
   border-top: none;
   border-radius: 0 0 8px 8px;
   background: #ffffff;
   display: none;
   position: relative;
   z-index: 100;
 }
 .font-suggestion {
   padding: 12px;
   cursor: pointer;
   border-bottom: 1px solid #f0f0f0;
   transition: background 0.2s ease;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .font-suggestion:hover {
   background: #f8f9fa;
 }
 .font-suggestion.highlighted {
   background: #c740ff;
   color: white;
 }
 .font-name {
   font-size: 14px;
   font-weight: 500;
 }
 .font-preview {
   font-size: 16px;
   margin-left: 10px;
   flex: 1;
   text-align: right;
   opacity: 0.7;
 }
 .font-preview.loading {
   opacity: 0.3;
 }
 .search-status {
   padding: 8px 12px;
   font-size: 12px;
   color: #666;
   background: #f8f9fa;
   border-radius: 0 0 8px 8px;
   text-align: center;
 }
 .current-font-preview {
   margin-top: 10px;
   padding: 15px;
   background: #f7f8fa;
   border-radius: 8px;
   border: 1px solid #e0e0e0;
   display: none;
 }
 .current-font-preview.show {
   display: block;
 }
 .preview-text {
   font-size: 20px;
   margin-bottom: 8px;
   transition: font-family 0.3s ease;
 }
 .preview-info {
   font-size: 12px;
   color: #666;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .load-font-btn {
   background: #c740ff;
   color: white;
   border: none;
   border-radius: 6px;
   padding: 6px 12px;
   font-size: 12px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 .load-font-btn:hover {
   background: #b230e8;
 }
 .load-font-btn:disabled {
   background: #ccc;
   cursor: not-allowed;
 }
 /* Template Selector Styles - Add to your style2.css */
 .template-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
   margin-top: 12px;
   max-height: 300px;
   overflow-y: auto;
   padding-right: 0;
 }
 .template-card {
   display: flex;
   align-items: center;
   padding: 12px;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   background: #ffffff;
   cursor: pointer;
   transition: all 0.2s ease;
   gap: 12px;
 }
 .template-card:hover {
   background: #f8f9fa;
   border-color: #c740ff;
   box-shadow: 0 2px 8px rgba(199, 64, 255, 0.1);
 }
 .template-card.selected {
   background: #29293a14;
   border: 1px solid #f7f8fa;
   transform: translateY(0);
 }
 .template-icon {
   font-size: 20px;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f7f8fa;
   border-radius: 6px;
   flex-shrink: 0;
      fill: #29293a;
 }
 .template-info {
   flex: 1;
   min-width: 0;
 }
 .template-name {
   font-size: 13px;
   font-weight: 600;
   color: #29293A;
   margin-bottom: 2px;
   line-height: 1.2;
 }
 .template-desc {
   font-size: 11px;
   color: #666;
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .template-actions {
   display: flex;
   gap: 8px;
   margin: 0 auto;
   padding-top: 8px;
   width: 90%;
 }
 .template-actions .btn {
   flex: 1;
   font-size: 12px;
   padding: 8px 12px;
   background: #fff !important;
   color: #666;
   border: solid 1px #e0e0e0;
 }
 .template-actions .btn:hover {
   background: #f7f8fa !important;
  }
 /* Loading state for templates */
 .template-card.loading {
   opacity: 0.6;
   pointer-events: none;
 }
 .template-card.loading::after {
   content: '';
   position: absolute;
   top: 50%;
   right: 12px;
   width: 16px;
   height: 16px;
   border: 2px solid #e0e0e0;
   border-top: 2px solid #c740ff;
   border-radius: 50%;
   animation: templateSpin 1s linear infinite;
 }
 @keyframes templateSpin {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
 /* Category filter styling */
 #templateCategory {
   margin-bottom: 8px;
 }
 /* Responsive adjustments */
 @media (max-width: 400px) {
   .template-grid {
     gap: 6px;
   }
   .template-card {
     padding: 10px;
     gap: 10px;
   }
   .template-icon {
     font-size: 18px;
     width: 28px;
     height: 28px;
   }
   .template-name {
     font-size: 12px;
   }
   .template-desc {
     font-size: 10px;
   }
 }
 /* Custom scrollbar for template grid */
 .template-grid::-webkit-scrollbar {
   width: 4px;
 }
 .template-grid::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 2px;
 }
 .template-grid::-webkit-scrollbar-thumb {
   background: #c1c1c1;
   border-radius: 2px;
 }
 .template-grid::-webkit-scrollbar-thumb:hover {
   background: #a1a1a1;
 }
 /* Template category indicators */
 .template-card[data-category="Events"] .template-icon {
   background: #f7f8fa;
 }
 .template-card[data-category="Product"] .template-icon {
   background: #f7f8fa;
 }
 .template-card[data-category="Education"] .template-icon {
   background: #f7f8fa;
 }
 .template-card[data-category="Content"] .template-icon {
   background: #f7f8fa;
 }
 .template-card[data-category="Community"] .template-icon {
   background: #f7f8fa;
 }
 /* Responsive logo styles */
 .logo-desktop {
   display: block;
 }
 .logo-mobile {
   display: none;
 }
 /* Mobile breakpoint - swap logos */
 /* Responsive logo styles */
 .logo-desktop {
   display: block;
 }
 .logo-mobile {
   display: none;
 }
 /* Responsive logo styles */
 .logo-desktop {
   display: block;
 }
 .logo-mobile {
   display: none;
 }
 /* Mobile breakpoint - swap logos */
 @media (max-width: 1200px) {
   .logo-desktop {
     display: none !important; /* Force hide desktop logo */
   }
   .logo-mobile {
     display: block !important; /* Force show mobile logo */
   }
   .top-bar {
     padding: 0 15px; /* Slightly tighter padding on mobile if needed */
   }
 }
 /* Add desktop hide/show functionality */
 @media (min-width: 1200px) {
   .app-container {
     grid-template-columns: 70px 350px 1fr 280px;
     transition: grid-template-columns 0.3s ease;
   }
   /* When controls should be hidden on desktop */
   .app-container.controls-hidden {
     grid-template-columns: 70px 0px 1fr 280px;
   }
   .app-container.controls-hidden .controls-panel {
     opacity: 0;
     transform: translateX(-20px);
     transition: opacity 0.3s ease, transform 0.3s ease;
   }
 }
 #close-side {
   /* Your specific styles here */
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   left: 419px;
   background: #ffffff;
   border: 1px solid #e0e0e0;
   border-radius: 0px 8px 8px 0px;
   padding: 20px 5px;
   box-shadow: none;
   cursor: pointer;
   font: 100 12px/1 'Poppins', sans-serif;
   color: #29293A;
   z-index: 900;
 }
 #close-side .controls-hidden {
   transform: translateY(-50%);
 }
 /* --- Desktop right sidebar hide/show --- */
 @media (min-width: 1200px) {
   /* Collapse the 4th column (right sidebar) when hidden */
   .app-container.rightbar-hidden {
     grid-template-columns: 70px 350px 1fr 0px;
     transition: grid-template-columns 0.3s ease;
   }
   /* Smoothly hide the panel content */
   .app-container.rightbar-hidden .right-sidebar {
     opacity: 0;
     transform: translateX(20px);
     pointer-events: none;
     transition: opacity 0.3s ease, transform 0.3s ease;
   }
 }
 /* Make the right sidebar a positioned container so the close button can sit at top-right */
 .right-sidebar {
   position: relative;
 }
 /* Close button inside the right sidebar (desktop) */
 #close-rightbar {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   right: 279px;
   background: #c740ff;
   border: 1px solid #e0e0e0;
   border-radius: 8px 0px 0px 8px;
   padding: 20px 5px;
   box-shadow: none;
   cursor: pointer;
   font: 100 12px/1 'Poppins', sans-serif;
   color: #f7f8fa;
 }
 /* Floating handle that appears when the sidebar is hidden (desktop only) */
 .rightbar-handle {
   display: none; /* default hidden; JS toggles .is-visible */
   position: fixed;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   z-index: 900;
   background: #c740ff;
   border: none;
   border-radius: 8px 0px 0px 8px;
   padding: 20px 5px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
   cursor: pointer;
   font: 100 12px/1 'Poppins', sans-serif;
   color: #f7f8fa;
 }
 .rightbar-handle:hover {}
 .rightbar-handle.is-visible {
   display: block;
 }
 /* Never show the handle on mobile/tablet (you already hide the sidebar there) */
 @media (max-width: 1200px) {
   .rightbar-handle {
     display: none !important;
   }
 }
 /* Modal Overlay */
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #29293a;
   display: flex;
   align-items: center;
   justify-content: center;
   /*   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);*/
   z-index: 1000;
 }
 .modal-overlay.hidden {
   display: none;
 }
 /* Modal Container */
 .modal {
   width: 90%;
   max-width: 800px;
   max-height: 90vh;
   min-width: 650px;
   background: white;
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   display: flex;
   flex-direction: column;
   position: relative;
 }
 /* Modal Header */
 .modal-header {
   padding: 20px;
   border-bottom: 1px solid #eee;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 20px;
 }
 .modal-title {
   font-size: 18px;
   font-weight: 600;
   color: #333;
 }
 .close-btn {
   background: none;
   border: none;
   font-size: 16px;
   font-weight: 500;
   font-family: poppins, sans-serif;
   cursor: pointer;
   color: #c740ff;
   padding: 0;
   width: auto;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .close-btn:hover {
   color: #c740ff;
 }
 /* Step Indicator */
 .step-indicator {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: 10px;
 }
 .step-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: #29293a;
   transition: background-color 0.3s ease;
 }
 .step-dot.active {
   background-color: #c740ff;
 }
 .step-dot.completed {
   background-color: #29293a33;
 }
 /* Modal Content */
 .modal-content {
   padding: 30px 20px 0 20px;
   flex: 1;
   overflow-y: auto;
 }
 .step {
   display: none;
   text-align: center;
 }
 .step.active {
   display: grid;
   grid-template-columns: 1fr 1fr; /* 3 equal columns */
   gap: 20px; /* Space between columns */
   text-align: left;
 }
 #step1.step.active {
   display: block;
   grid-template-columns: none;
 }
 .logo-intro {
   position: absolute;
   margin-top: -60px;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
 }
 .welcome {
   display: grid;
   grid-template-columns: 1fr 1fr; /* 3 equal columns */
   gap: 20px; /* Space between columns */
   text-align: left;
   margin-top: 100px;
 }
 .step h2 {
   margin-bottom: 15px;
   color: #333;
 }
 .step p {
   color: #666;
   line-height: 1.5;
 }
 /* Modal Footer */
 .modal-footer {
   padding: 20px 0 20px 0;
   border-top: 1px solid #eee;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .btn {
   padding: 10px 20px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.3s ease;
 }
 .btn-primary {
   background-color: #007bff;
   color: white;
 }
 .btn-primary:hover {
   background-color: #0056b3;
 }
 .btn-secondary {
   background-color: #6c757d;
   color: white;
 }
 .btn-secondary:hover {
   background-color: #545b62;
 }
 .btn:disabled {
   opacity: 0;
   cursor: not-allowed;
 }
 /* App Content */
 .app-content {
   text-align: center;
   margin-top: 50px;
 }
 .app-content h1 {
   color: #333;
   margin-bottom: 20px;
 }
 .reopen-btn {
   background-color: #28a745;
   color: white;
 }
 .reopen-btn:hover {
   background-color: #1e7e34;
 }
 .control-section ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 0;
 }
 .control-section li {
   position: relative;
   padding: 10px 20px 10px 40px;
   background: #f7f8fa;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 8px;
   color: #29293a;
   font-size: 14px;
   line-height: 1.4;
   transition: all 0.2s ease;
 }

 .modal-content h3 {
   margin: 0 0 12px 0;
   color: #29293a;
   font-size: 20px;
   font-weight: 600;
 }
 .modal-content p {
   margin: 0 0 24px 0;
   color: #29293a;
   font-size: 14px;
   line-height: 1.5;
 }
 /* Enhanced Image Preview Modal Styles */
 /* Add these styles to your existing CSS file */
 .image-preview-modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #29293ae6;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 10000;
 }
 .image-preview-container {
   background: #f7f8fa;
   border-radius: 12px;
   padding: 20px;
   width: 90%;
   max-width: 400px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
 .image-preview-title {
   color: #29293a;
   font-size: 18px;
   font-weight: 600;
   text-align: center;
   margin-bottom: 20px;
 }
 .crop-area {
   width: 300px;
   height: 300px;
   border: 4px solid #fff;
   border-radius: 8px;
   position: relative;
   overflow: hidden;
   margin: 0 auto;
   background: #000000;
   cursor: move;
 }
 .crop-image {
   position: absolute;
   cursor: move;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
 }
 .crop-image:hover {
   cursor: grab;
 }
 .crop-image:active {
   cursor: grabbing;
 }
 .crop-controls {
   margin: 20px 0;
 }
 .crop-instructions {
   text-align: center;
   color: #29293a;
   font-size: 14px;
   margin-bottom: 15px;
   line-height: 1.4;
 }
 .scale-control {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin: 15px 0;
 }
 .scale-control label {
   color: #29293a;
   font-size: 14px;
   font-weight: 500;
   min-width: 45px;
 }
 #imageScaleSlider {
   flex: 1;
   max-width: 200px;
   height: 6px;
   background: #e0e0e0;
   border-radius: 3px;
   outline: none;
   opacity: 1;
   transition: none;
 }
 #imageScaleSlider:hover {}
 #imageScaleSlider::-webkit-slider-thumb {
   appearance: none;
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
   background: #c740ff;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   transition: transform 0.2s;
 }
 #imageScaleSlider::-webkit-slider-thumb:hover {
   transform: none;
 }
 #imageScaleSlider::-moz-range-thumb {
   width: 18px;
   height: 18px;
   background: #c740ff;
   border-radius: 50%;
   cursor: pointer;
   border: none;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 #scaleValue {
   color: #29293a;
   font-weight: 600;
   font-size: 14px;
   min-width: 45px;
   text-align: right;
 }
 
 .preview-section {
   display: flex;
   gap: 20px;
   height: 400px;
   align-items: stretch;
 }
 .preview-canvas-container {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #1a1a1a;
   border-radius: 8px;
   padding: 20px;
   position: relative;
   min-height: 400px;
 }
 #modalPreviewCanvas {
   max-width: 100%;
   max-height: 100%;
   border: 1px solid #333;
   border-radius: 4px;
 }
 .preview-controls {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 15px;
   width: 100%;
 }
 .preview-controls h4 {
   padding: 20px 0;
   color: #29293a;
 }
 .preview-controls p {
   margin: 0;
   color: #29293a;
   font-size: 14px;
   padding-top: 10px;
 }
 .format-selector select {
   width: 100%;
   padding: 12px;
   background: #f7f8fa;
   border: 1px solid #ccc;
   border-radius: 4px;
   color: #29293a;
   font-size: 14px;
 }
 .export-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: auto;
 }
 .export-actions .btn {
   width: 100%;
   justify-content: center;
 }
 #step4.step.active {
   display: block;
   grid-template-columns: none;
 }

 .modal-header .modal-title {
   grid-column: 1;
   justify-self: start;
   margin: 0;
 }
 .modal-header .step-indicator {
   grid-column: 2;
   justify-self: center;
 }
 .modal-header .close-btn {
   grid-column: 3;
   justify-self: end;
 }
 .password-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: #29293a;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10000;
 }
 .password-modal {
   background: #2a2a3a;
   padding: 40px;
   border-radius: 12px;
   text-align: center;
   max-width: 400px;
   width: 90%;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
 }
 .password-modal h2 {
   color: #f7f8fa;
   margin: 0 0 10px 0;
   font-weight: 600;
 }
 .password-modal p {
   color: #999;
   margin: 0 0 25px 0;
 }
 .password-modal input {
   width: 100%;
   padding: 12px 16px;
   margin-bottom: 20px;
   border: 1px solid #444;
   border-radius: 6px;
   background: #1a1a1a;
   color: #f7f8fa;
   font-size: 16px;
   box-sizing: border-box;
 }
 .password-modal input:focus {
   outline: none;
   border-color: #C740FF;
 }
 .password-modal button {
   width: 100%;
   padding: 12px 16px;
   background: #C740FF;
   color: white;
   border: none;
   border-radius: 6px;
   font-size: 16px;
   cursor: pointer;
   font-weight: 500;
 }
 .password-modal button:hover {
   background: #b235e6;
 }
 .password-error {
   color: #ff4444;
   margin-top: 15px;
   font-size: 14px;
 }

 .app-container {
   transition: grid-template-columns 0.3s ease;
   min-height: 0;
 }
 @media (max-width: 1200px) {
   .app-container {
     grid-template-columns: 70px 0px 1fr !important;
   }
   .app-container.controls-open {
     grid-template-columns: 70px 350px 1fr !important;
   }
   .controls-panel {
     opacity: 0;
     transform: translateX(-12px);
     transition: opacity 0.3s ease, transform 0.3s ease;
   }
   .app-container.controls-open .controls-panel {
     opacity: 1;
     transform: none;
   }
 }
 @media (min-width: 1200px) {
   .app-container:not(.controls-open) {
     grid-template-columns: 70px 0px 1fr 280px !important;
   }
   .controls-panel {
     transition: opacity 0.3s ease, transform 0.3s ease;
   }
   .app-container:not(.controls-open) .controls-panel {
     opacity: 0;
     transform: translateX(-12px);
     pointer-events: none;
   }
 }
 /* Scroll fixes for controls panel inside grid/flex containers */
 .controls-panel {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   min-height: 0;
 }
 /* Enhanced right sidebar transitions */
 .right-sidebar {
   transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease;
   overflow: hidden;
 }
 .app-container.rightbar-hidden .right-sidebar {
   opacity: 0;
   transform: translateX(20px);
   pointer-events: none;
   width: 0; /* Add this to force width animation */
   padding: 0; /* Remove padding when hidden */
 }
 /* Ensure grid transition is smooth */
 .app-container {
   transition: grid-template-columns 0.3s ease;
 }
 /* Fix grid template when right sidebar is hidden */
 @media (min-width: 1200px) {
   .app-container.rightbar-hidden {
     grid-template-columns: 70px 350px 1fr 0px !important;
   }
   .app-container.rightbar-hidden:not(.controls-open) {
     grid-template-columns: 70px 0px 1fr 0px !important;
   }
 }
 .sidebar-section p {
   font-size: 13px;
   line-height: 1.6;
   color: #29293a;
   margin: 20px 0;
   text-align: left;
 }
 .sidebar-section ul {
   margin: 10px 0 0 0;
   padding-left: 16px;
   font-size: 12px;
   line-height: 1.6;
   color: #29293a;
   list-style-type: disc;
 }
 .sidebar-section ul li {
   margin-bottom: 4px;
 }
 .sidebar-section img {
   height: 30px;
   margin: 12px 0;
   border-radius: 8px;
   display: block;
 }
 .bottom-bar-right a {
   color: #29293a;
   text-decoration: none;
   font-size: 12px;
   text-align: center;
 }
 .bottom-bar-left a {
   color: #29293a;
   text-decoration: none;
   font-size: 12px;
 }
 .right-sidebar .toggle-row {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   background-color: transparent;
   padding: 20px; /* adjust as needed */
 }
 .tooltip {
   position: fixed;
   background: #f7f8fa;
   color: #29293a;
   padding: 12px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 500;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s ease;
   z-index: 10000;
   pointer-events: none;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 .tooltip.show {
   opacity: 0.9;
   visibility: visible;
 }
 #fixFontsBtn {
   background: #f7f8fa;
   color: #29293a;
   border: 1px solid #ccc;
   border-radius: 8px;
   padding: 10px 5px;
   font-size: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-top: 10px;
   width: 50%;
 }
 #fixFontsBtn:hover {}
 #fixFontsBtn:disabled {
   background: #cccccc;
   color: #666;
   cursor: not-allowed;
   transform: none;
   opacity: 0.7;
   margin-top: 10px;
 }
 #openOnboardingBtn {
   width: 100%;
      background: #fff;
 }
 #openOnboardingBtn:hover {
   background: #fff;
 }
 .export-btn .btn {
   background-color: #29293a;
   height: 36px;
   padding: 6px 16px 12px 16px;
   white-space: nowrap;
 }
 .export-btn .btn:hover {
   background-color: #29293acc; /* Slightly lighter on hover */
   border-color: none;
 }
 .upgrade .btn {
   background-color: #c740ff;
   height: 36px;
   padding: 6px 16px 12px 16px;
 }
 .upgrade .btn:hover {
   background-color: #c740ffcc; /* Slightly lighter on hover */
   border-color: none;
 }
 .canvas-toolbar small {
   font-size: 11px;
 }
 label {
   font-size: 13px;
 }
 /* === COLLAPSIBLE CONTROL SECTIONS === */
 /* Update existing control-section to remove padding */
 .control-section {
   margin-bottom: 20px;
   background: #f7f8fa;
   border-radius: 12px;
   padding: 10px 15px; /* Remove padding - header handles it now */
   overflow: hidden;
   transition: all 0.3s ease;
 }
 /* Collapsible header */
 .control-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
   user-select: none;
   transition: background-color 0.2s ease;
 }
 .control-section-header:hover {}
 /* Update h4 styling for new structure */
 .control-section h4 {
   font-size: 12px;
   font-weight: 500;
   color: #c740ff;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 0px; /* Remove margin since it's in header now */
 }
 /* Collapse arrow */
 .collapse-arrow {
   width: 16px;
   height: 16px;
   transition: transform 0.3s ease;
   fill: #c740ff;
   flex-shrink: 0;
 }
 .control-section.collapsed .collapse-arrow {
   transform: rotate(-90deg);
 }
 /* Content area */
 .control-section-content {
   padding-top: 15px;
   /*  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;*/
   max-height: 1000px; /* Large enough for most content */
   opacity: 1;
 }
 .control-section.collapsed .control-section-content {
   max-height: 0;
   opacity: 0;
   padding-top: 0;
   padding-bottom: 0;
   overflow: hidden;
 }
 /*.tooltip::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #2c2c2c;
}*/
 #close-side {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   background: #c740ff;
   border: 1px solid #e0e0e0;
   border-radius: 0px 8px 8px 0px;
   padding: 20px 5px;
   box-shadow: none;
   cursor: pointer;
   font: 100 12px/1 'Poppins', sans-serif;
   color: #f7f8fa;
   z-index: 900;
   transition: left 0.3s ease;
 }
 /* Desktop - controls open */
 @media (min-width: 1200px) {
   .app-container:not(.controls-open) #close-side {
     display: none; /* Hide when controls are closed */
   }
   .app-container.controls-open #close-side {
     left: 419px; /* 70px + 350px - 1px */
   }
 }
 /* Mobile - controls closed by default */
 @media (max-width: 1200px) {
   #close-side {
     display: none; /* Hidden by default on mobile */
   }
   .app-container.controls-open #close-side {
     display: block;
     left: 419px; /* 70px + 320px - 1px for mobile width */
   }
 }
 .modal-content ol {
   list-style: none;
   counter-reset: item;
   padding-left: 0;
   padding-bottom: 20px;
 }
 .modal-content ol li {
   counter-increment: item;
   position: relative;
   padding-left: 25px;
   font-size: 16px;
   font-weight: 600;
   line-height: 0.6;
   background-color: #fff;
   border: none;
  }
 .modal-content ol li::before {
   content: counter(item) ".";
   position: absolute;
   left: 0;
   color: #c740ff;
   font-weight: 600;
   font-size: 16px;
   line-height: 0.6;
 }
 .modal-content ul {
   counter-reset: item;
   padding-left: 0;
 }
 .modal-content ul li {
   counter-increment: item;
   position: relative;
   padding-left: 20px;
   padding-bottom: 0;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
   background-color: #fff;
      border: none;
 }
 .modal-content ul li::before {
   content: "•";
   position: absolute;
   left: 0;
   color: #c740ff;
   font-weight: bold;
   font-size: 16px;
 }
 .modal-content ul {
   list-style: none;
   counter-reset: item;
 }
 .req {
   display: flex;
   flex-direction: column;
   /*   justify-content: center;*/
   height: 100%; /* or a specific height */
 }
 .req h3 {
   color: #c740ff !important;
 }
 #step1 .control-section {
   background-color: #ffffff;
 }
 label {
   display: inline-block;
   margin: 5px 2px;
   cursor: pointer;
   font-size: 13px;
   /* Add this to help with alignment */
   display: flex;
   align-items: center;
   gap: 8px; /* This creates space between checkbox and text */
 }
 input[type="checkbox"] {
   /* Hide the default checkbox */
   appearance: none;
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border: none;
   background: #e0e0e0;
   border-radius: 4px;
   cursor: pointer;
   /* Remove position: absolute and use margin instead */
   margin: 0; /* Reset margin, use gap in parent instead */
   flex-shrink: 0; /* Prevent checkbox from shrinking */
 }
 input[type="checkbox"]:checked {
   background: #c740ff; /* Purple when checked */
 }
 /* Add the custom tick */
 input[type="checkbox"]:checked::after {
   content: "✓";
   color: white;
   font-size: 12px;
   font-weight: normal;
   display: block;
   text-align: center;
   line-height: 20px; /* Match the checkbox height */
 }
 /* Add these styles for disabled checkboxes */
 input[type="checkbox"]:disabled {
   cursor: not-allowed;
   opacity: 0.6;
   background: #e0e0e0 !important; /* Darker when disabled */
 }
 input[type="checkbox"]:disabled:hover {
   background: #e0e0e0 !important; /* No hover effect when disabled */
   transform: none; /* No scale effect when disabled */
 }
 /* Make the label also look disabled */
 label:has(input[type="checkbox"]:disabled) {
   opacity: 0.6;
   cursor: not-allowed;
 }
 /* For older browsers that don't support :has() */
 label.disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 /* NEW: Canvas Toolbar */
 /* Canvas Toolbar - Fixed at top center */
 /* Canvas Toolbar - Positioned relative to canvas wrapper */
 /* Canvas Toolbar - Fixed Y position, dynamic X centering */
 .canvas-toolbar {
   position: fixed;
   z-index: 100;
   display: flex;
   align-items: center;
   gap: 12px;
   background: none;
   backdrop-filter: none;
   border: none;
   border-radius: 8px;
   padding: 5px 16px;
   margin-left: 0px;
   /*  box-shadow: 0 4px 8px #29293a1a;*/
   width: fit-content;
   /* Fixed Y position - change this value as needed */
   top: 11px; /* Fixed distance from top of viewport */
 }
 .toolbar-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 9px;
   border: none;
   border-radius: 6px;
   background: #ffffff;
   cursor: pointer;
   transition: all 0.2s ease;
   color: #29293A;
 }
 .toolbar-btn:hover {
   background: #f8f9fa;
   border-color: #c740ff;
   transform: translateY(-1px);
 }
 .toolbar-btn.active {
   background: #29293a1a;
   color: white;
   border-color: none;
 }
 .toolbar-separator {
   width: 1px;
   height: 24px;
   background: #e0e0e0;
   margin: 0 4px;
 }
 .toolbar-label {
   font-size: 12px;
   color: #666;
   font-weight: 500;
   white-space: nowrap;
 }
 .format-switcher-toolbar {
   display: flex;
   align-items: center;
   gap: 15px;
 }
 @media (max-width: 1200px) {
   .format-switcher-toolbar {
     display: none;
   }
 }
 .format-label {
   font-size: 12px;
   color: #29293A;
   font-weight: 500;
   min-width: 80px;
   text-align: center;
   white-space: nowrap;
 }
 .template-card:active {
   transform: translateY(0) !important;
   background: #f8f9fa !important;
   border: 1px solid #c740ff !important;
   box-shadow: 0 1px 4px rgba(199, 64, 255, 0.2) !important;
 }
 #modalOrnamentsCanvas {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 1000 !important;
   pointer-events: none !important;
 }
 .app-container {
   grid-template-rows: 70px 1fr 60px; /* Changed from 60px to 80px */
 }
 .SMD {
   padding: 15px 0;
 }
 .logo-right {
   width: 70px;
 }
 /* step3 layout */
 .controls-row {
   display: flex;
   gap: 15px;
   align-items: center;
 }
 .controls-row .format-selector, .controls-row .export-actions {
   flex: 1; /* Both take equal space (50% each) */
 }
 /* Make sure the select and button have consistent height */
 .controls-row select, .controls-row .btn {
   height: 40px;
   box-sizing: border-box;
   width: 100%; /* Fill their container completely */
 }
 /* Guides Toggle Button in Toolbar */
 .guides-toggle-toolbar {
   display: flex;
   align-items: center;
 }
 .guides-toggle-toolbar .toggle-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px;
   border: 1px solid #e0e0e0;
   border-radius: 6px;
   background: #ffffff;
   cursor: pointer;
   font-size: 12px;
   font-weight: 500;
   transition: all 0.3s ease;
   text-align: center;
   min-width: 32px;
   min-height: 32px;
   color: #29293A;
 }
 .guides-toggle-toolbar .toggle-btn:hover {
   background: #29293a1a;
   transform: none;
 }
 .guides-toggle-toolbar .toggle-btn.active {
   background: #fff;
   color: #29293A;
   border-color: #c740ff;
 }
 .guides-toggle-toolbar .toggle-btn svg {
   transition: all 0.2s ease;
   fill: currentColor;
 }
 /* Optional: Different styling when guides are off */
 .guides-toggle-toolbar .toggle-btn:not(.active) {
   opacity: 0.7;
 }
 .guides-toggle-toolbar .toggle-btn:not(.active):hover {
   opacity: 1;
 }
 .welcome .control-section h3 {
   margin-bottom: 0px;
 }
 .welcome .control-section ol {
   margin-top: 15px;
 }
 .hidden {
   display: none;
 }
 /* Presenter count buttons in toolbar */
 .presenter-count-buttons {
   display: flex;
   gap: 4px;
 }
 .presenter-count-buttons .presenter-btn {
   flex: none;
   padding: 8px;
   border: 1px solid #e0e0e0;
   border-radius: 6px;
   background: #ffffff;
   cursor: pointer;
   font-size: 12px;
   font-weight: 500;
   transition: all 0.3s ease;
   text-align: center;
   min-width: 32px;
   min-height: 32px;
   color: #29293A;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .presenter-count-buttons .presenter-btn:hover {
   background: #29293a1a;
   transform: none;
 }
 .presenter-count-buttons .presenter-btn.active {
   background: #fff;
   color: #29293A;
   border-color: #c740ff;
 }
 .presenter-count-buttons .presenter-btn svg {
   transition: all 0.2s ease;
 }
 /*ALIGN BUTTONS in toolbar*/
 .text-alignment-buttons {
   display: flex;
   gap: 4px;
 }
 .text-alignment-buttons .alignment-btn {
   flex: none;
   padding: 8px;
   border: 1px solid #e0e0e0;
   border-radius: 6px;
   background: #ffffff;
   cursor: pointer;
   font-size: 12px;
   font-weight: 500;
   transition: all 0.3s ease;
   text-align: center;
   min-width: 32px;
   min-height: 32px;
   color: #29293A;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .text-alignment-buttons .alignment-btn:hover {
   background: #29293a1a;
   transform: none;
 }
 .text-alignment-buttons .alignment-btn.active {
   background: #fff;
   color: #29293A;
   border-color: #c740ff;
 }
 .text-alignment-buttons .alignment-btn svg {
   transition: all 0.2s ease;
 }
 .logo-m {
   background-image: url('../images/Card1.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   width: 150px; /* adjust to your desired size */
   height: 55px; /* adjust to your desired size */
 }
 .logo-right {
   background-image: url('../images/Card1.svg');
   background-size: contain;
   opacity: 0.2;
   background-repeat: no-repeat;
   background-position: left;
   width: 150px; /* adjust to your desired size */
   height: 55px; /* adjust to your desired size */
 }
 .SMD {
   background-image: url('../images/Card1.svg');
   background-size: contain;
   opacity: 1;
   background-repeat: no-repeat;
   background-position: left;
   width: 120px; /* adjust to your desired size */
   height: 30px; /* adjust to your desired size */
 }
 @media (max-width: 1200px) {
   .SMD {
     display: none;
   }
 }
 .logo-mobile {
   background-image: url('../images/C1.svg');
   background-size: contain;
   opacity: 1;
   background-repeat: no-repeat;
   background-position: left;
   width: 30px; /* adjust to your desired size */
   height: 30px; /* adjust to your desired size */
 }
 .top-bar-actions .toggle-row {
   width: 120px;
   margin-top: 0;
   padding: 0;
  background:none;
  margin-bottom:0;
 }
 #exportPDFBtn {
   padding: 6px 16px;
   margin: 5px 0;
 }
 #textEditorPanel .control-section {
   margin-bottom: 0px !important;
 }
 #activeSlideIndicator {
   background: #f7f8fa;
   color: #C740ff;
   padding: 20px;
   border-radius: 12px 12px 0 0;
   font-size: 16px;
   font-weight: 600;
   text-transform: uppercase;
      margin-top: -5px;
   margin-bottom: -10px;
   text-align: left;
 }
 #textEditorPanel {
   position: fixed !important;
   top: 80px;
   right: 20px;
   width: 350px;
   border-radius: 12px;
   z-index: 901 !important;
   box-shadow: 0 0 32px rgba(0, 0, 0, 0.15) !important;
 }
 #textEditorPanel .drag-handle {
   position: absolute;
   top: 15px;
   left: 0;
   right: 20px;
   height: 30px;
   cursor: move;
   user-select: none;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: right;
 }
 #textEditorPanel .drag-handle::before {
   content: '⋮⋮⋮';
   font-size: 18px;
   color: #c74ff0;
   letter-spacing: 2px;
 }
 /* Draggable Text Editor Styles */
 #textEditorPanel {
   transition: height 0.3s ease, opacity 0.3s ease;
   overflow: visible !important;
 }
 #textEditorPanel.collapsed > *:not(.drag-handle) {
   display: none !important;
 }
 #textEditorPanel.collapsed {
   height: auto !important;
   min-height: auto !important;
   padding-bottom: 0 !important;
 }
 .drag-handle {
   padding: 20px;
   background: #f7f8fa;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   user-select: none;
   margin-bottom: 15px;
   margin-top: -40px;
   width: 350px;
 }
 .drag-handle.dragging {
   cursor: grabbing;
   background: #29293a;
 }
 .drag-handle-grip {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   color: #29293a;
   cursor: move;
 }
 .drag-handle-grip::before {
   content: '';
   font-size: 16px;
   letter-spacing: -2px;
 }
 .drag-handle-controls {
   display: flex;
   gap: 4px;
 }
 .drag-handle-btn {
   background: none;
   border: none;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 18px;
   color: #29293a;
   transition: all 0.2s;
 }
 .show-text-editor-btn {
   padding: 4px 10px;
   background: #fff;
   color: #29293a;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   cursor: pointer;
   font-size: 20px;
   font-family: Times, "Times New Roman", "serif";
   transition: all 0.2s;
 }
 .show-text-editor-btn:hover {
   background: #29293a1a;
 }
 @media (max-width: 1200px) {
   #textEditorPanel {
     width: 280px;
     right: 10px;
     top: 70px;
   }
 }
 @media (max-width: 768px) {
   #textEditorPanel {
     width: calc(100% - 20px);
     right: 10px;
     left: 10px;
   }
 }
 .sun {
   color: #c740ff;
 }
 .new {
   padding: 1px 6px;
   background-color: #c740ff;
   color: #f7f8fa;
   font-size: 11px;
   font-weight: 600;
   width: auto;
   border-radius: 4px;
   text-align: center;
 }
 /* ===== Floating Panel Styles ===== */
 /* Floating Panel Base */
 .floating-panel-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 /* Drag Handle */
 .floating-panel-handle {
   display: none; /* Hidden by default in sidebar */
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
   background: #f7f8fa;
   border-radius: 12px 12px 0 0;
   cursor: grab;
   user-select: none;
   position: relative;
 }
 .floating-panel-handle:active {
   cursor: grabbing;
 }
 .handle-dots {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3px;
   width: fit-content;
   align-items: center;
   justify-content: center;
   margin-right: 6px; /* space before title */
 }
 .handle-dots span {
   width: 2px;
   height: 2px;
   background: #29293a;
   border-radius: 50%;
 }
 .handle-dots {
   opacity: 0.3;
 }
 .handle-title {
   color: #29293a;
   font-size: 13px;
   font-weight: 600;
   flex: 1;
 }
 .floating-close-btn {
   width: 24px;
   height: 24px;
   border: none;
   background: none;
   color: #29293a;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
 }
 /* Content Container */
 .floating-panel-content {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
 }
 /* Floating State - CRITICAL: Must stay visible */
 #text-controls.floating {
   position: fixed !important;
   display: block !important;
   width: 340px !important;
   max-height: 85vh !important;
   background: #fff !important;
   border-radius: 12px !important;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
   z-index: 1000 !important;
   padding: 0 !important;
   overflow: visible !important;
   animation: floatIn 0.3s ease;
 }
 #text-controls.floating .floating-panel-handle {
   display: flex !important;
 }
 #text-controls.floating .floating-panel-content {
   padding: 16px;
   max-height: calc(85vh - 48px);
 }
 /* Hide scrollbar for cleaner look */
 .floating-panel-content::-webkit-scrollbar {
   width: 6px;
 }
 .floating-panel-content::-webkit-scrollbar-track {
   background: transparent;
 }
 .floating-panel-content::-webkit-scrollbar-thumb {
   background: rgba(199, 64, 255, 0.2);
   border-radius: 3px;
 }
 .floating-panel-content::-webkit-scrollbar-thumb:hover {
   background: rgba(199, 64, 255, 0.4);
 }
 /* Float button to trigger floating mode */
 .float-trigger-btn {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 28px;
   height: 28px;
   border: none;
   background: rgba(199, 64, 255, 0.1);
   color: #c740ff;
   border-radius: 6px;
   cursor: pointer;
   display: none;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   transition: all 0.2s ease;
   z-index: 10;
 }
 .float-trigger-btn:hover {
   background: rgba(199, 64, 255, 0.2);
   transform: scale(1.05);
 }
 #text-controls:not(.floating) .float-trigger-btn {
   display: flex;
 }
 #text-controls.floating {
   display: block !important;
 }
 /* =====================================================
   FLOATING MODE — Fade Text Controls icon instead of hiding it
   ===================================================== */
 /* When Text Controls are floating */
 .is-floating-mode .nav-icon[data-target="text-controls"] {
   opacity: 0.4;
   pointer-events: none; /* Prevent clicks while floating */
   transition: opacity 0.3s ease;
 }
 /* Restore icon to full opacity when not floating */
 .nav-icon[data-target="text-controls"] {
   opacity: 1;
   transition: opacity 0.3s ease;
 }
 /* =====================================================
   HIDE FLOAT TRIGGER BUTTON ON SMALL SCREENS
   ===================================================== */
 @media (max-width: 1200px) {
   .float-trigger-btn {
     display: none !important;
   }
 }
 /* =====================================================
   FLOAT TRIGGER ICON — Mirror horizontally and enlarge
   ===================================================== */
 .float-trigger-btn {
   transform: scaleX(-1); /* mirror horizontally */
   font-size: 22px; /* make it bigger */
   line-height: 1; /* tighten vertical spacing */
 }
 /* Optional: nicer visual balance */
 .float-trigger-btn:hover {
   transform: scaleX(-1) scale(1.1); /* mirror + slightly enlarge on hover */
 }
 /* Video Tutorial Links */
 .video-placeholder {
   margin-top: 0;
 }
 .video-placeholder + .video-placeholder {
   margin-top: 8px;
 }
 .video-link {
   display: inline-block;
   width: 100%;
   padding: 8px;
   background: #29293a0d;
   color: #29293a;
   text-decoration: none;
   border-radius: 6px;
   font-weight: 500;
   font-size: 12px;
   transition: background 0.2s ease;
 }
 .video-link:hover {
   background: #29293a1a;
 }
 .video-link .play-icon {
   margin-right: 8px;
 }
 /* Video Overlay Modal */
 #video-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.9);
   z-index: 9999;
   align-items: center;
   justify-content: center;
 }
 #video-overlay.active {
   display: flex;
 }
 .video-container {
   position: relative;
   width: 80%;
   max-width: 1200px;
   margin: auto;
 }
 .video-close-btn {
   position: absolute;
   top: -30px;
   right: -30px;
   background: none;
   color: white;
   border: none;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   cursor: pointer;
   font-size: 20px;
   z-index: 10;
   transition: transform 0.2s ease, opacity 0.2s ease;
   opacity: 0.8;
 }
 .video-close-btn:hover {
   opacity: 1;
   transform: scale(1.1);
 }
 #centered-video {
   width: 100%;
   height: auto;
   max-height: 80vh;
   border-radius: 8px;
   display: block;
 }
 .nav-sidebar #bottom-icon {
   margin-top: 25px;
 }
 .icon-divider {
   width: 40%;
   margin-top: 25px;
   border-bottom: 1px solid #e0e0e0;
 }
 .logout {
   height: 36px;
   padding: 0;
   margin-left: 20px;
   transform: scaleX(-1);
   font-size: 18px;
   font-weight: 300;
   background: transparent;
   color: #29293a;
   border: none;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 .logout:hover {
   color: #29293a80;
 }
 .right-sidebar .sidebar-section {
   background-color: #f7f8fa;
   margin-bottom: 5px;
 }
 .right-sidebar .sidebar-section small {
   font-size: 11px;
   font-weight: 300;
 }
 .right-sidebar .sidebar-section h5 {
   font-size: 14px;
   font-weight: 500;
 }
/* ==========================================
   TEXT FORMATTING STYLES (Paragraph & Headline - Light Theme)
   ========================================== */
/* Format Buttons Container */
.paragraph-format-buttons,
.headline-format-buttons,
.subtitle-format-buttons {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

/* All buttons within the containers */
.paragraph-format-buttons button,
.headline-format-buttons button,
.subtitle-format-buttons button {
  padding: 3px 6px;
  background: #fff;
  color: #29293a;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* Button hover state */
.paragraph-format-buttons button:hover,
.headline-format-buttons button:hover,
.subtitle-format-buttons button:hover {
  background: #29293a12;
}

/* Bold button specific styling */
.paragraph-format-buttons .bold-btn {
  font-weight: 600;
}
 /* ORNAMENTS UPDATE*/
 /* Ornaments Favorites List Styles */
 #favoritesList .fav-empty {
   padding: 8px;
   color: #f7f8fa0d;
   font-size: 13px;
 }
 #favoritesList .fav-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px 8px;
   border-bottom: 1px solid #29293a1a;
 }
 #favoritesList .fav-item.active {
   background-color: #29293a0d;
 }
 #favoritesList .fav-label {
   cursor: pointer;
   flex: 1;
   font-size: 11px;
 }
 #favoritesList .fav-remove {
   background: none;
   border: none;
   color: #29293a;
   font-size: 13px;
   cursor: pointer;
   padding: 0 6px;
 }
 #favoritesList .fav-remove:hover {
   color: #29293a;
 }
 /* Ornaments Favorites Controls */
 #addToFavorites {
   padding: 6px 8px 6px 6px;
   background: #29293a0d;
   color: #29293a;
   border: 1px solid #c740ff;
   border-radius: 6px;
   cursor: pointer;
   margin-bottom: 15px;
   transition: background 0.2s ease;
   font-size: 13px;
   font-family: inherit;
 }
 #addToFavorites:hover {
   background: #29293a0d;
 }
 .fav-nav-controls {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px;
 }
 #favoritesPrev, #favoritesNext {
   background: #29293a0d;
   color: #29293a;
   border: none;
   padding: 6px 10px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 18px;
 }
 #favoritesPrev:hover, #favoritesNext:hover {
   background: #29293a0d;
 }
 #favoritesPrev:disabled, #favoritesNext:disabled {
   opacity: 0.3;
   cursor: not-allowed;
 }
 #favoritesCounter {
   min-width: 80px;
   text-align: center;
   font-size: 11px;
 }
 #favoritesList {
   max-height: 200px;
   overflow-y: auto;
   border-top: 1px solid #29293a1a;
   margin-top: 15px;
 }
.ornaments-favs {
   margin-top: 10px;
   padding: 10px;
 }

/* Design Favorites Styles */

.design-favorites-actions {
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
}

.design-favorites-actions button {
  flex: 1;
}

.bar-designs .primary-button {
  background: #fff;
  color: #29293a;
  border:1px solid #e0e0e0 ;
  padding: 8px 5px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
}

.bar-designs .primary-button:hover {
  background: #f7f8fa;
}

.bar-designs .primary-button:active {
  transform: translateY(0);
}

.bar-designs .secondary-button {
  background:#fff;
  color: #29293a;
  border:1px solid #e0e0e0 ;
  padding: 8px 5px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
}

.bar-designs .secondary-button:hover {
  background: #f7f8fa;
}

.bar-designs .secondary-button:active {
  transform: translateY(0);
}

#designFavoritesContainer {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

#designFavoritesContainer::-webkit-scrollbar {
  width: 8px;
}

#designFavoritesContainer::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

#designFavoritesContainer::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

#designFavoritesContainer::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

.design-favorites-empty {
  padding: 5px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
  line-height: 1.6;
}

.design-favorite-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  cursor: pointer;
  animation: fadeIn 0.3s ease;
}

.design-favorite-card.active {
   background: #f7f8fa;
   border: 1px solid #c740ff;
}

.design-favorite-number {
  background: #c740ff;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.design-favorite-info {
  flex: 1;
  min-width: 0;
}

.design-favorite-name {
  font-weight: 500;
  font-size: 11px;
  color: #29293a;
  margin-bottom: -3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.design-favorite-meta {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}

.design-favorite-date {
  font-size: 11px;
  color: #666;
  margin-top: 9px;
  margin-bottom: -7px;
}

.design-favorite-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-basis: 100%;
}

.design-favorite-actions .design-favorite-load {
  background: #c740ff;
  color: #f7f8fa;
  border: none;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
}

.design-favorite-actions .design-favorite-load:hover {
  background: #c740ffcc;
}

.design-favorite-load:active {
  transform: translateY(0);
}

.bar-designs .design-favorite-rename, .bar-designs .design-favorite-remove {
  background: #f7f8fa;
  color: #29293a;
  border: none;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
}

.bar-designs .design-favorite-rename:hover, .bar-designs .design-favorite-remove:hover{
  background: #f7f8fab3;
}



@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Styles */

#designFavoritesSection{
	position:fixed;
	top: 59px;
	left: 427px;
	z-index: 1;
	padding-top: 0;
	padding-bottom: 0;
   transition: all 0.3s ease;
}

#designFavoritesSection.fav-section {
  background:none!important;
	padding: 0px;
	border-radius: 6px;
}

#designFavoritesSection.fav-section label {
 font-size: 12px;
}

#designFavoritesSection .fav-section-content:not([style*="max-height: 0"]) {
  margin-top: 20px;
}

/* Hide content by default */


.fav-section-content small{
 font-size: 12px;
 font-weight: 500;
  letter-spacing: 0.5px;
}

.bar-designs{
margin-top: 20px;
background:#f7f8faf2;
padding: 10px 15px;
border-radius:12px;
width:230px;
 -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(3px);
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.bar-designs button{
float: right;
}

#designFavoritesSection.slided-left {
  left: 70px; /* Adjust to where you want it */
}

.bar-designs button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 4px 5px 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar-designs button:hover .collapse-arrow {
  fill: #c740ff;
}
/*text position*/

.text-pin-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 0 0 10px;
  border-radius: 8px;
  margin-bottom: 0;
}

.text-pin-control label {
  font-size: 14px;
  color: #29293a;
  font-weight: 500;
  margin: 0;
}

.text-pin-buttons {
  display: flex;
  gap: 5px;
}

.text-pin-buttons button {
  width: 32px;
  height: 32px;
  border: 1px solid #c0c0c0;
  background:none;
  border-radius: 6px;
  cursor: pointer;
  color:#29293a;
  font-size: 14px;
  transition: all 0.2s;
}

.text-pin-buttons button:hover {
  background:#29293a1a;
}

.text-pin-buttons button.active {
  background:#29293a14;
  border-color:#c740ff;
  color: #29293a;
}

.contact-support{
  margin-top: 10px;
  border-top: 1px solid #29293a1a;
  padding-top: 10px;
}

.contact-support small{
  font-size: 11.5px!important;
}

/*EMPTY DESIGN MODAL*/

#emptyGuideModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

#emptyGuideModalContent {
    background:#f7f8fa;
    padding: 0;
    border-radius: 12px;
    max-width: 700px;
    position: relative;
}

#guideModalClose {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #29293a6e;
    line-height: 1;
}

#guideImage {
    width: 100%;
    max-width: 700px;
    display: block;
    margin: 0 auto 0;
}

#guideDontShowAgain {
  position: absolute;
    width: 100%;
    padding: 12px;
    margin-top: -100px;
    background:none;
    color:#29293a6e;
    border: none;
    border-radius: 6px;
    font-size: 22px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    font-family: Poppins, Arial, sans-serif;
}

textarea {
  height: 40px;
  min-height: 40px;
  max-height: 150px;
}

#paragraphInput, #modal_paragraphInput {
  height: 80px;
}

#bulletInput, #modal_bulletInput  {
  height: 80px;
}

.control-section.inactive {
  opacity: 0.5;
}

.control-section.inactive .control-section-header {
  color: #999;
}

.control-section.inactive svg {
  opacity: 0.5;
}