.slogan-header{background:#fff;padding:6px 10px 2px;font-size:12px;color:#555;margin:0;font-weight:400}body{font-family:Arial,sans-serif;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;height:100vh}#toolbar-container{padding:10px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);flex-shrink:0}#toolbar{display:flex;gap:10px;flex-wrap:wrap;}#boardContainer{width:100%;flex-grow:1;border-top:2px solid #ccc;position:relative;overflow:hidden;touch-action:none;background:#f0f0f0;cursor:grab}#board{transform-origin:0 0;position:absolute;top:0;left:0;z-index:1}.ruler-canvas{position:absolute;pointer-events:none;z-index:0}#rulerHCanvas{top:0;left:0;width:100%;height:25px}#rulerVCanvas{top:0;left:0;width:12px;height:100%}.car-image,.garage-simulator,.person-figure,.screenshot-spot{position:absolute;user-select:none;touch-action:none}.car-image,.person-figure{cursor:move}.car-image img,.person-figure img{display:block;draggable:false;pointer-events:none}.car-half{background-repeat:no-repeat;cursor:move}.car-image .car-half-name{position:absolute;top:-52px;left:50%;transform:translateX(-50%);text-align:center;white-space:normal;line-height:1.2; font-size: 10px;}.car-header-controls{position:absolute;top:-48px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:3px 5px;background:rgba(230,230,230,.9);border-radius:5px;z-index:10;pointer-events:auto}.close-btn,.duplicate-btn,.edit-btn,.rotate-btn,.screenshot-btn,.view-mode-btn, .ar-btn{color:#fff;font-family:Arial,sans-serif;font-size:12px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;box-shadow:0 0 2px rgba(0,0,0,.3);pointer-events:auto}.rotate-btn{background:#4caf50;font-size:14px;line-height:16px}.close-btn{background:#f44336;font-size:9px}.edit-btn{background:#008cba;font-size:9px}.duplicate-btn{background:#03a9f4}.view-mode-btn{background:#9c27b0;font-size:10px;font-weight:700}
    .ar-btn{background:#3F51B5;font-size:11px;font-weight:700;line-height:16px}
    
    /* --- REMOVED: .evolution-info-btn styles --- */

    @media (hover: hover) and (pointer: fine) { .ar-btn { display: none !important; } }
    .dummy-btn{opacity:.3;pointer-events:none;cursor:not-allowed}.garage-simulator .edit-btn{position:absolute;top:-8px;left:-8px}.garage-simulator .close-btn{position:absolute;top:-8px;right:-8px}.garage-simulator .rotate-btn{position:absolute;top:-8px;left:50%;transform:translateX(-50%)}.car-name{font-size:10px;color:#333;white-space:nowrap;position:absolute;top:-27px;left:50%;transform:translateX(-50%);text-align:center;line-height:1.2}.dimension-label{font-size:9px;color:#333;pointer-events:none;background:rgba(255,255,255,.85);padding:1px 3px;border-radius:3px;white-space:nowrap;z-index:5;position:absolute}.car-dimensions{bottom:-20px;left:50%;transform:translateX(-50%)}.garage-main-label-w{top:-18px;left:50%;transform:translateX(-50%)}.garage-dimension-height-main{top:50%;left:-22px;transform:translateY(-50%) rotate(-90deg);transform-origin:center}.garage-dimension-height-front{top:50%;right:-22px;transform:translateY(-50%) rotate(90deg);transform-origin:center}.garage-main-label-l{bottom:-18px;left:50%;transform:translateX(-50%)}.gate-label-w{top:3px;left:50%;transform:translateX(-50%);color:#c0392b}.gate-label-h{top:50%;left:5px;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;color:#c0392b}.garage-view-label{position:absolute;top:-35px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:700;color:#555;background:rgba(220,220,220,.7);padding:2px 5px;border-radius:3px;white-space:nowrap;z-index:6;pointer-events:none}.gate-main-label{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:7px;color:#c0392b;font-weight:700;pointer-events:none;background:rgba(255,255,255,.85);padding:1px 3px;border-radius:3px;white-space:nowrap;z-index:5}select,button{padding:6px 10px;border:1px solid #ccc;border-radius:4px;font-size:14px;box-sizing:border-box}button{background:#4caf50;color:#fff;border:none;cursor:pointer}button:hover{background:#45a049}label{display:flex;align-items:center;gap:5px;font-size:14px;user-select:none}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:20px;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:10px;min-width:300px}.modal-content h3{margin:0 0 10px;text-align:center}.modal-content .input-group{display:flex;align-items:center;gap:10px}.modal-content .input-group label{flex-basis:80px;flex-shrink:0}.modal-content input[type=number],.modal-content input[type=text]{flex-grow:1;padding:8px;border:1px solid #ccc;border-radius:4px}.modal-content .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.modal-content .actions button.cancel{background-color:#f44336}.modal-content .actions button.cancel:hover{background-color:#d32f2f}.garage-simulator{pointer-events:none;position:relative}.garage-background{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.garage-border-line{position:absolute;pointer-events:auto;cursor:move;z-index:1}.border-top{top:0;left:0;width:100%;height:2px}.border-bottom{bottom:0;left:0;width:100%;height:2px}.border-left{top:0;left:0;width:2px;height:100%}.border-right{top:0;right:0;width:2px;height:100%}.inner-gate{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:rgba(244,67,54,.05);box-sizing:border-box;padding:0;pointer-events:none}.gate-border-line{position:absolute;pointer-events:auto;cursor:move;z-index:2}.gate-border-top{top:0;left:0;width:100%;height:2px}.gate-border-left{top:0;left:0;width:2px;height:100%}.gate-border-right{top:0;right:0;width:2px;height:100%}.screenshot-spot{pointer-events:none}.screenshot-spot .resize-handle,.screenshot-spot .spot-border-line,.screenshot-spot .spot-controls{pointer-events:auto}.spot-border-line{position:absolute;cursor:move;z-index:1}.spot-border-top{top:0;left:0;width:100%;height:2px;border-top:2px dashed #673ab7}.spot-border-bottom{bottom:0;left:0;width:100%;height:2px;border-bottom:2px dashed #673ab7}.spot-border-left{top:0;left:0;width:2px;height:100%;border-left:2px dashed #673ab7}.spot-border-right{top:0;right:0;width:2px;height:100%;border-right:2px dashed #673ab7}.screenshot-spot.is-capturing .resize-handle,.screenshot-spot.is-capturing .spot-border-line,.screenshot-spot.is-capturing .spot-controls{display:none}.spot-controls{position:absolute;top:-25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:3px 5px;background:rgba(230,230,230,.9);border-radius:5px;z-index:10;cursor:move}.screenshot-btn{background:#673ab7;font-size:14px;width:20px;height:20px}.resize-handle{position:absolute;width:12px;height:12px;background:#673ab7;border:2px solid #fff;border-radius:50%;z-index:11}.resize-handle.se{bottom:-7px;right:-7px;cursor:se-resize}.resize-handle.nw{top:-7px;left:-7px;cursor:nw-resize}.car-selector-group{display:flex;gap:10px}
    .up-down-view { position: relative; cursor: move; display: flex; align-items: center; justify-content: center; }
    .up-down-dimensions { position: absolute; color: white; text-shadow: 1px 1px 2px black; font-size: 9px; white-space: pre; text-align: center; line-height: 1.2; }
    .up-down-control { position: absolute; top: -8px; z-index: 11; }
    .up-down-control.left { left: -8px; }
    .up-down-control.right { right: -8px; }
    #returnToNormalViewBtn { position: fixed; top: 50%; left: 10px; transform: translateY(-50%); z-index: 1001; background-color: rgba(0, 0, 0, 0.6); color: white; border: 1px solid white; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; display: none; padding: 0; line-height: 40px; text-align: center; }
    #toolbar-handle { display: none; }
    .top-header-container { background: #fff; padding: 6px 10px 2px; font-size: 15px; color: #555; font-weight: 400; display: flex; align-items: baseline; gap: 4px; }
    .brand-home-link { color: inherit; text-decoration: none; flex-shrink: 0; }
    h1.slogan-text { font-size: inherit; font-weight: inherit; margin: 0; padding: 0; }
    
    .add-car-placeholder {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.5);
        border: 2px dashed #b0b0b0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        cursor: grab;
        transition: background-color 0.25s, border-color 0.25s;
        box-sizing: border-box;
    }
    .add-car-placeholder:active { cursor: grabbing; }
    .placeholder-icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: opacity 0.2s, transform 0.2s;
        pointer-events: none;
    }
    .placeholder-svg { width: 120px; height: auto; }
    .placeholder-car-svg { fill: #999; transition: fill 0.25s; }
    .placeholder-text { margin-top: 10px; font-size: 14px; font-weight: 500; color: #666; transition: color 0.25s; }
    .add-car-placeholder:hover { background-color: rgba(230, 245, 255, 0.8); border-color: #007bff; }
    .add-car-placeholder:hover .placeholder-car-svg { fill: #007bff; }
    .add-car-placeholder:hover .placeholder-text { color: #0056b3; }

    .selector-container { display: none; padding: 20px; box-sizing: border-box; width: 100%; }
    .add-car-placeholder.is-selecting { background-color: #ffffff; border-style: solid; border-color: #007bff; cursor: default; }
    .add-car-placeholder.is-selecting .placeholder-icon-container,
    .add-car-placeholder.is-selecting .placeholder-close-btn,
    .add-car-placeholder.is-selecting .placeholder-duplicate-btn { display: none; }
    .add-car-placeholder.is-selecting .selector-container { display: block; }
    .add-car-placeholder .selector-container .car-selector-group { flex-direction: column; width: 100%; gap: 8px; }
    
    .placeholder-close-btn, .placeholder-duplicate-btn {
        position: absolute;
        width: 22px; height: 22px;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        line-height: 1;
        cursor: pointer;
        z-index: 2;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .placeholder-close-btn:hover, .placeholder-duplicate-btn:hover { transform: scale(1.1); box-shadow: 0 2px 5px rgba(0,0,0,0.4); }
    .placeholder-close-btn { top: -8px; right: -8px; background: #f44336; font-size: 12px; }
    .placeholder-duplicate-btn { bottom: -8px; left: -8px; background: #4caf50; padding-bottom: 2px; }

.wheel-figure{position:absolute;cursor:move;user-select:none;touch-action:none;display:flex;justify-content:center;align-items:center}
.wheel-figure .wheel-top-view{box-sizing:border-box;border-radius:50%;background-color:#333;display:flex;justify-content:center;align-items:center;border:3px solid #222}
.wheel-figure .wheel-rim-top{box-sizing:border-box;border-radius:50%;background-color:#ccc;border:2px solid #aaa}
.wheel-figure .wheel-front-view{box-sizing:border-box;background-color:#333;border-left:3px solid #222;border-right:3px solid #222}
.wheel-figure[data-view=front] .wheel-top-view{display:none}
.wheel-figure[data-view=top] .wheel-front-view{display:none}
.wheel-figure .car-header-controls{top:-32px}
.wheel-figure .dimension-label{bottom:-20px}
   
.evolution-title-container { 
    position: absolute;
    text-align: center;
    z-index: 50;
    pointer-events: none; 
}
.evolution-title {
    display: inline-flex; 
    align-items: center; 
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.7);
    margin: 0;
    padding: 0;
}
.evolution-title-close-btn {
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.1);
    color: #555;
    border-radius: 50%;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    pointer-events: auto; 
    margin-left: 10px; 
    transition: background-color 0.2s, color 0.2s;
}
.evolution-title-close-btn:hover {
    background: #f44336;
    color: white;
}
/* --- CHANGE 1: New CSS for the refresh button --- */
/* This is the new "after" state */
.evolution-refresh-btn {
    width: 22px;
    height: 22px;
    background: #f44336; /* <-- Changed to red */
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: normal; /* <-- Adjusted for emoji */
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    pointer-events: auto; 
    margin-right: 10px; 
    transition: background-color 0.2s;
}
.evolution-refresh-btn:hover {
    background: #d32f2f; /* <-- Darker red for hover */
}



    [dir="rtl"] #returnToNormalViewBtn { left: auto; right: 10px; transform: translateY(-50%) rotate(180deg); }
    [dir="rtl"] .top-header-container { flex-direction: row-reverse; }
    [dir="rtl"] { text-align: right; }
    [dir="rtl"] #toolbar { flex-direction: row-reverse; }
    [dir="rtl"] label { flex-direction: row-reverse; }
    [dir="rtl"] .car-selector-group { flex-direction: row-reverse; }
    [dir="rtl"] .modal-content .input-group { flex-direction: row-reverse; }
    [dir="rtl"] .modal-content .input-group label { flex-basis: 110px; text-align: left; }
    [dir="rtl"] .modal-content .actions { justify-content: flex-start; }
    [dir="rtl"] .car-header-controls,[dir="rtl"] .car-image .car-half-name,[dir="rtl"] .car-dimensions,[dir="rtl"] .garage-view-label,[dir="rtl"] .spot-controls,[dir="rtl"] .garage-main-label-w,[dir="rtl"] .garage-main-label-l,[dir="rtl"] .gate-main-label,[dir="rtl"] .gate-label-w,[dir="rtl"] .garage-simulator .rotate-btn,[dir="rtl"] .car-name { left: auto; right: 50%; transform: translateX(50%); }
    [dir="rtl"] .garage-simulator .edit-btn { left: auto; right: -8px; }
    [dir="rtl"] .garage-simulator .close-btn { right: auto; left: -8px; }
    [dir="rtl"] .dimension-label.garage-dimension-height-main { left: auto; right: -22px; transform: translateY(-50%) rotate(90deg); }
    [dir="rtl"] .dimension-label.garage-dimension-height-front { right: auto; left: -22px; transform: translateY(-50%) rotate(-90deg); }
    [dir="rtl"] .gate-label-h { left: 5px; right: auto; transform-origin: right center; }
    [dir="rtl"] .resize-handle.se { right: auto; left: -7px; cursor: sw-resize; }
    [dir="rtl"] .resize-handle.nw { left: auto; right: -7px; cursor: ne-resize; }
    [dir="rtl"] label[for="unitSelect"] { margin-right: 5px; margin-left: 0; }
    [dir="rtl"] label a { margin-right: 15px; margin-left: 0; }
    [dir="rtl"] .up-down-control.left { left: auto; right: -8px; }
    [dir="rtl"] .up-down-control.right { right: auto; left: -8px; }
    [dir="rtl"] .placeholder-close-btn { right: auto; left: -8px; }
    [dir="rtl"] .placeholder-duplicate-btn { left: auto; right: -8px; }
    [dir="rtl"] .evolution-title { padding-right: 0; padding-left: 30px; }
    [dir="rtl"] .evolution-title-close-btn { margin-left: 0; margin-right: 10px; }
    [dir="rtl"] .evolution-refresh-btn { margin-right: 0; margin-left: 10px; }

    @media (max-width: 768px) {
      .car-selector-group { width: 100%; gap: 5px; flex-grow: 1; }
      .car-selector-group select { flex: 1; min-width: 0; }
      #toolbar-container {
        position: relative;
        overflow: hidden;
        max-height: 40px;
        padding-bottom: 20px;
        transition: max-height 0.35s ease-out;
      }
      
      #addCarBtn {
    display: none;
}


      #toolbar-container.is-expanded { max-height: 300px; }
      #toolbar-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px;
        background-color: #f0f0f0;
        border-top: 1px solid #ddd;
        cursor: ns-resize;
        touch-action: none;
      }
      #toolbar-handle-icon {
        position: relative;
        width: 20px;
        height: 14px;
        transition: transform 0.35s ease-out;
      }
      
      .handle-text {
    font-size: 12px;
    font-weight: 500;
    margin-left: 10px;
    margin-right: 10px;
}

      #toolbar-handle-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 2px;
        background-color: #aaa;
      }
      #toolbar-handle-icon::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #aaa;
      }
      #toolbar-container.is-dragging { transition: none; }
      #toolbar-container.is-expanded #toolbar-handle-icon { transform: rotate(180deg); }
      .add-car-placeholder .car-selector-group { flex-direction: column; }
      .evolution-title { font-size: 18px; }
    }
    
    
    
    
    /* --- Rim Modal Styles --- */
#rimCategoryContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

#rimCategoryContainer button {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

#rimCategoryContainer button:hover {
    background: #ddd;
}

#rimCategoryContainer button.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

#rimThumbnailContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    max-height: 40vh;
    min-height: 100px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    background-color: #f9f9f9;
}

#rimThumbnailContainer img {
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s;
}

#rimThumbnailContainer img:hover {
    border-color: #007bff;
    transform: scale(1.05);
}

/* --- Spawned Rim Figure on Board --- */
.rim-figure {
    position: absolute;
    cursor: move;
    user-select: none;
    touch-action: none;
    border: 1px dashed transparent;
    box-sizing: border-box; 
}

.rim-figure.is-selected {
    border-color: rgba(0, 0, 0, 0.4);
}

.rim-figure img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.rim-figure .car-header-controls {
    top: -25px; 
}
.rim-figure .resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #9E9E9E; 
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 11;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.rim-figure .resize-handle.se {
    bottom: -8px;
    right: -8px;
    cursor: se-resize;
}

/* --- START: NEW STYLES FOR RIM UPLOAD AND CROPPER --- */
.rim-upload-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.custom-file-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.2s;
}
.custom-file-upload-btn:hover {
    background-color: #45a049;
}
.custom-file-upload-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
#rimCropperModal .modal-content {
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
}
#cropperContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
    touch-action: none;
}
#cropperImage {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}
#cropperCanvas {
    position: absolute;
    top: 0;
    left: 0;
}
/* --- END: NEW STYLES --- */

/* --- START: NEW STYLES FOR ON-BOARD WHEEL CROPPER --- */
.wheel-cropper-tool {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed #FF9800;
    border-radius: 50%;
    cursor: move;
    background-color: rgba(255, 152, 0, 0.1);
    touch-action: none;
    user-select: none;
}
.wheel-cropper-tool .resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #FF9800;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 11;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    cursor: se-resize;
    bottom: -9px;
    right: -9px;
}
.wheel-cropper-tool .cropper-controls {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(230,230,230,.9);
    padding: 4px 6px;
    border-radius: 5px;
    z-index: 10;
    pointer-events: auto;
}
.wheel-cropper-tool .cropper-controls button {
    padding: 3px 8px;
    font-size: 12px;
    min-width: 50px;
    color: white;
    border: none;
    cursor: pointer;
}
/* --- END: NEW STYLES --- */