.w-embed {
   overflow: auto;
 }

 table {
   border-collapse: collapse;
   width: 100%;
   max-width: 800px;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }

 th,
 td {
   padding: 1rem 0rem 1rem 1rem;
   text-align: left;
   vertical-align: top;
 }

 th {
   font-family: var(--_typography---font-styles--heading);
   color: var(--main-scheme--heading);
   letter-spacing: -.1rem;
   margin-top: 0;
   margin-bottom: 0;
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1;
   min-width: 13rem;
 }

 th:nth-child(even) {
   background-color: white;
 }

 td:nth-child(even) {
   background-color: white;
 }

 /* Table Generator Styles */
 #tableGenerator {
   position: relative;
   padding: 2rem;
   padding-top: 3rem;
 }

 .table-wrapper {
   position: relative;
   display: inline-block;
 }

 .table-container {
   position: relative;
 }

 /* Editable cells */
 th[contenteditable="true"],
 td[contenteditable="true"] {
   outline: none;
   cursor: text;
 }

 th[contenteditable="true"]:focus,
 td[contenteditable="true"]:focus {
   background-color: #f0f7ff !important;
   box-shadow: inset 0 0 0 2px #3b82f6;
 }

 /* Add column button */
 .add-column-btn {
   position: absolute;
   right: -40px;
   top: 50%;
   transform: translateY(-50%);
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 2px dashed #cbd5e1;
   background: white;
   color: #64748b;
   font-size: 24px;
   font-weight: 300;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
   line-height: 1;
   padding: 0;
 }

 .add-column-btn:hover {
   border-color: #3b82f6;
   color: #3b82f6;
   background: #eff6ff;
 }

 /* Add row button */
 .add-row-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 40px;
   margin-top: 8px;
   border: 2px dashed #cbd5e1;
   border-radius: 8px;
   background: white;
   color: #64748b;
   font-size: 24px;
   font-weight: 300;
   cursor: pointer;
   transition: all 0.2s;
   line-height: 1;
   padding: 0;
 }

 .add-row-btn:hover {
   border-color: #3b82f6;
   color: #3b82f6;
   background: #eff6ff;
 }

 /* Row controls container */
 .row-controls-wrapper {
   position: absolute;
   left: -80px;
   top: 0;
   bottom: 0;
   width: 80px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 10px;
 }

 .row-controls {
   display: flex;
   gap: 4px;
   opacity: 0;
   transition: opacity 0.2s;
 }

 tr:hover .row-controls {
   opacity: 1;
 }

 tr {
   position: relative;
 }

 /* Column controls wrapper */
 .column-controls-wrapper {
   position: absolute;
   top: -45px;
   left: 0;
   right: 0;
   height: 45px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding-bottom: 5px;
 }

 .column-controls {
   display: flex;
   gap: 4px;
   opacity: 0;
   transition: opacity 0.2s;
 }

 th {
   position: relative;
 }

 th:hover .column-controls,
 .column-controls-wrapper:hover .column-controls {
   opacity: 1;
 }

 /* Control buttons */
 .control-btn {
   width: 28px;
   height: 28px;
   border-radius: 6px;
   border: 1px solid #e2e8f0;
   background: white;
   color: #64748b;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   padding: 4px;
 }

 .control-btn:hover {
   background: #f1f5f9;
 }

 .control-btn.delete:hover {
   background: #fef2f2;
   color: #ef4444;
   border-color: #fecaca;
 }

 .control-btn.move {
   cursor: grab;
 }

 .control-btn.move:active {
   cursor: grabbing;
 }

 /* Drag styles */
 .dragging {
   opacity: 0.5;
 }

 .drag-over {
   background-color: #dbeafe !important;
 }

 .control-btn svg {
   width: 16px;
   height: 16px;
   display: block;
   flex-shrink: 0;
 }

 /* Copy button styles */
 .copy-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 16px;
   padding: 10px 20px;
   background: #1e293b;
   color: white;
   border: none;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
 }

 .copy-btn:hover {
   background: #334155;
 }

 .copy-btn.copied {
   background: #10b981;
 }

 .copy-btn svg {
   width: 18px;
   height: 18px;
 }

 /* Toast notification */
 .toast {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%) translateY(100px);
   background: #1e293b;
   color: white;
   padding: 12px 24px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   transition: transform 0.3s ease;
   z-index: 1000;
 }

 .toast.show {
   transform: translateX(-50%) translateY(0);
 }