:root {
    --accent-color: #6A7349;
    --accent-color-darker: #555e3a;
    --text-on-accent: #F2EDE9;
    --bg-main: #F2EDE9;
    --bg-panel: #E7E2DC;
    --border-light: #CBC9BE;
    --border-medium: #A4A597;
    --text-primary: #374151;
    --text-secondary: #52525b;
   }
   
   body {
       font-family: 'Inter', sans-serif;
       user-select: none;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       background-color: var(--bg-main);
       color: var(--text-primary);
   }
   
   .poster-container {
       position: relative;
       width: 800px;
       height: 1000px;
       margin: 0 auto;
       background-color: #ffffff;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   }
   
   .background-image {
       position: absolute; top: 50%; left: 50%; max-width: none; max-height: none;
       transform-origin: center center; transform: translate(-50%, -50%) scale(1) rotate(0deg);
       z-index: 1; display: none; pointer-events: none;
   }
   
   .overlay-image {
       position: absolute; top: 0; left: 0; width: 100%; height: 100%;
       z-index: 2; pointer-events: none;
   }
   
   .editable-text {
       position: absolute; z-index: 3; cursor: grab; min-width: 50px; min-height: 30px;
       padding: 10px; border-radius: 8px; /* Slightly more rounded */
       background-color: rgba(231, 226, 220, 0.5); border: 1px dashed transparent;
       overflow: visible; white-space: pre-wrap; word-wrap: break-word; transform-origin: center center;
       user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
       transition: background-color 0.2s ease, border-color 0.2s ease;
   }
   .editable-text:hover { background-color: rgba(231, 226, 220, 0.7); }
   .editable-text.active-text {
       border-color: var(--accent-color); background-color: rgba(231, 226, 220, 0.8);
       z-index: 100; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;
   }
   .editable-text[contenteditable="true"] { cursor: text; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }
   .editable-text.dragging { cursor: grabbing !important; opacity: 0.8; border-style: solid; }
   
   .text-controls {
       position: absolute; top: -38px; /* Adjusted slightly for rounded button */
       left: 50%; transform: translateX(-50%); z-index: 101; display: none;
       background-color: rgba(40, 40, 40, 0.85); border-radius: 9999px; /* Fully rounded container */
       padding: 5px 8px; white-space: nowrap; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
       user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
   }
   .editable-text.active-text .text-controls { display: flex; gap: 6px; /* Slightly less gap */ }
   
   /* Rounder text control buttons */
   .control-btn { background: none; border: none; color: var(--bg-panel); cursor: pointer; padding: 0; font-size: 14px; /* Slightly smaller icon */ line-height: 1; width: 26px; /* Adjusted size */ height: 26px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s ease, background-color 0.2s ease; border-radius: 9999px; /* Fully rounded */ }
   .control-btn:hover { background-color: rgba(255, 255, 255, 0.15); color: #FFF; }
   .control-btn[data-action="delete"]:hover { color: #f87171; background-color: rgba(248, 113, 113, 0.2); }
   
   .color-option { width: 32px; height: 32px; border-radius: 50%; margin: 4px; cursor: pointer; border: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
   .color-option.selected { border-color: var(--accent-color); transform: scale(1.15); box-shadow: 0 0 5px rgba(106, 115, 73, 0.5); }
   .color-option i { font-size: 1em; color: white; opacity: 0; transition: opacity 0.2s ease; text-shadow: 0 1px 1px rgba(0,0,0,0.2); }
   .color-option.selected i { opacity: 1; }
   .color-option.light-color { border: 1px solid var(--border-light); box-shadow: inset 0 0 0 1px var(--border-light); }
   .color-option.light-color.selected { border-color: var(--accent-color); }
   .color-option.light-color i { color: var(--accent-color); }
   
   .image-preview-container { display: none; margin-top: 1rem; border: 2px dashed var(--border-medium); border-radius: 0.75rem; /* rounded-xl */ padding: 0.5rem; text-align: center; }
   .image-preview-container img { max-width: 100%; height: auto; border-radius: 0.5rem; /* rounded-lg */ }
   .image-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 0.5rem; gap: 0.5rem; }
   /* Rounder image control buttons */
   .image-control-button { padding: 0.5rem; border-radius: 9999px; /* rounded-full */ background-color: var(--bg-panel); cursor: pointer; border: 1px solid var(--border-light); transition: background-color 0.3s ease; font-size: 0.9rem; line-height: 1; color: var(--accent-color); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;}
   .image-control-button:hover { background-color: var(--border-light); }
   .image-control-button.text-red-500:hover { color: #dc2626; }
   
   #templateSelector { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; overflow-x: auto; padding: 0.5rem 1rem 1rem 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; background: rgba(0,0,0,0.02); border-radius: 0.75rem; /* rounded-xl */ }
   #templateSelector img { width: 120px; height: 150px; border: 2px solid var(--border-light); border-radius: 0.75rem; /* rounded-xl */ cursor: pointer; transition: all 0.3s ease; scroll-snap-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); object-fit: cover; background-color: white; }
   #templateSelector img:hover { border-color: var(--border-medium); transform: scale(1.05); }
   #templateSelector img.selected-template { border-color: var(--accent-color); box-shadow: 0 4px 10px rgba(106, 115, 73, 0.3); transform: scale(1.1); }
   
   .preview-outer-container { width: 100%; max-width: 800px; margin: 0 auto; }
   .preview-container { width: 100%; height: 0; padding-bottom: 125%; /* Aspect ratio 1000/800 = 1.25 = 125% */ position: relative; border: 1px solid var(--border-light); border-radius: 0.75rem; /* rounded-xl */ overflow: hidden; margin: 0 auto; background-color: var(--bg-panel); }
   .preview-container .poster-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: top left; transform: scale(1); box-shadow: none; overflow: hidden; }
   @media (max-width: 680px) { .preview-outer-container { max-width: 95%; } }
   
   label { color: var(--text-secondary); }
   /* Rounder inputs/selects */
   input, select { background-color: white; border-color: var(--border-light); border-radius: 0.5rem; /* rounded-lg */ }
    input:focus, select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(106, 115, 73, 0.2); outline: none; }
   /* Rounder Primary Button */
   .btn-primary {
       background-color: var(--accent-color); color: var(--text-on-accent);
       transition: background-color 0.2s ease; border-radius: 0.5rem; /* rounded-lg */
       padding-left: 1rem; padding-right: 1rem; /* Ensure padding looks good */
   }
   .btn-primary:hover { background-color: var(--accent-color-darker); }
   
   /* Ensure Tailwind utility classes are applied (from CDN link in HTML) */
   /* Add any additional custom styles here */