/* ~~~~~~ base styles ~~~~~~ */
        body {
            font-family: Verdana, Arial, sans-serif;
            font-size: 13px;
            background-image: url('background.jpg');
            background-size: 100%;
            color: #666;
            margin: 0;
            padding: 20px;
        }
        
        .dragged-item img,
        .item-svg img,
        .upload-item img,
        .favourite-item img {
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
        }
        
        #navbar {
            background-color: green;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
        }
        
        #navbar ul {
          display: flex;
          gap: 12px;
          color: black;
        }
        
        #navbar ul li {
          flex-flow: row;
          display: block;
        }

        #dollmaker_container {
            position: relative;
            display: flex;
            gap: 20px;
            padding: 20px;
            border-radius: 10px;
            overflow: visible;
            align-items: flex-start;
        }

        /* Left column wrapper - Canvas area + controls */
        .canvas-column {
            flex-shrink: 0;
            width: 280px;
            max-height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            position: sticky;
            top: 20px;
            padding-bottom: 20px;
        }

        /* Scrollbar styling for canvas column */
        .canvas-column::-webkit-scrollbar {
            width: 8px;
        }
        .canvas-column::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }
        .canvas-column::-webkit-scrollbar-thumb {
            background: #1cff1c;
            border-radius: 4px;
        }
        .canvas-column::-webkit-scrollbar-thumb:hover {
            background: #17cc17;
        }

        /* Left column - Canvas area */
        #bodyArea {
            position: relative;
            height: 420px;
            border: 3px solid #880909;
            background: #464646;
            border-radius: 5px;
            text-align: center;
            overflow: visible;
        }
        #bodyArea h3 { 
            color:#666; 
            font-weight: bold; 
            pointer-events: none; 
        }
        #bodyArea p { 
            pointer-events: none; 
            color: #999; 
            padding: 20px; 
        }

        #downloadBtn {
            position: relative;
            margin-top: 10px;
            padding: 10px 18px;
            background: #880909;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
        }
        
        #uploadBtn {
            position: relative;
            margin-top: 10px;
            padding: 10px 18px;
            background: #1cff1c;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
        }

        #uploadInput {
            display: none;
        }

        #canvasControls {
            position: relative;
            margin-top: 10px;
            display: flex; 
            align-items: flex-start; 
            gap: 5px;
        }
        
        #canvasColourPicker {
          width: 50px; 
          height: 38px; 
          border: 3px solid #880909; 
          border-radius: 5px; 
          cursor: pointer; 
          background: transparent;
        }

        #canvasColourPickerLabel {
            color: #fff; 
            font-weight: bold;
        }

        /* Right column - pieces area & tabs */
        #piecesArea { 
            flex: 1; /* Take up remaining space */
            min-width: 420px;
            position: relative;
            z-index: 1; /* Keep pieces area below dragged items */
        }
        
        #tabsbar {
            text-align: left;
            padding: 5px 10px;
            display: flex;
            flex-wrap:wrap;
            gap: 24px 6px;
            list-style: none;
            margin: 0;
        }
        
        #tabsbar li a {
            padding: 8px 14px;
            border: 3px solid #880909;
            background: #880909;
            color: #fff;
            text-decoration:none;
            font-weight:bold;
            border-radius:5px 5px 0 0;
            cursor:pointer;
        }
        
        #tabsbar .active a { 
          border: 3px solid #5e0000;
          background: #5e0000; 
          position: relative; 
          z-index: 2; 
        }

        .ui-tabs-panel {
            padding: 0px 18px 18px 18px;
            border: 3px solid #880909;
            background: #464646;
            border-radius:5px;
            min-height: 300px;
            display:none;
            margin-top:5px;
        }
        .ui-tabs-panel.active { display:block; }

        .collection-header {
            background-color: #880909;
            padding: 10px 15px;
            margin: 15px 0 10px 0;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            color: #fff;
            display:flex;
            justify-content:space-between;
            user-select:none;
        }
        .collection-header::after { content:'▼'; transition: transform 0.3s; }
        .collection-header.collapsed::after{ transform: rotate(-90deg); }
        .collection-content { max-height:2000px; overflow:hidden; transition:max-height 0.3s, opacity 0.3s; opacity:1; }
        .collection-content.collapsed{ max-height:0; opacity:0; margin:0; }

        .placeholder-images { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 3px; 
        }

        .subcollection-heading {
          color: #9cf;
          font-family: monospace;
          font-size: 14px;
          margin-top: 8px;
          margin-bottom: 3px;
        }

        .item-svg {
            cursor: grab;
            border: none;
            border-radius:3px;
            transition: transform 0.12s;
            background: transparent;
            display:inline-block;
            box-sizing:border-box;
        }

        .placeholder-img {
            width:80px; height:80px;
            background: linear-gradient(135deg,#667eea,#764ba2);
            border-radius:5px; display:flex; align-items:center; justify-content:center; color:white; font-size:10px; cursor:grab;
        }
        
        .subfolder-spacer {
           height: 3px;
        }

        /* dragged / placed items */
        .dragged-item {
            position:absolute;
            cursor: move;
            pointer-events:auto;
            display:inline-block;
            user-select: none;
            z-index: 100; /* Ensure dragged items are always on top */
        }
        .dragged-item svg { display:block; pointer-events:none; }
        .dragged-item img { display:block; pointer-events:none; }
        .dragged-item.flipped > * { transform: scaleX(-1); }
        .dragged-item.flipped > div { transform: scaleX(-1); }

        /* favourites area (tab content) */
        #favourites-container {
            min-height: 80px;
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            align-items:flex-start;
        }
        .favourite-item {
            cursor: grab;
            border: none;
            border-radius:5px;
            padding:5px;
            background: transparent;
            position:static;
            z-index:1;
            display:inline-flex;
            align-items:center;
            justify-content:center;
        }
        .favourite-item.dragging {
            z-index:20000;
            position: fixed !important;
            width: auto; height:auto;
        }

        /* uploads area (tab content) */
        #uploads-container {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: flex-start;
            margin-top: 10px;
        }
        
        .upload-item {
          padding: 5px;
        }
        
        /* context menu */
        .context-menu {
            position: fixed;
            background: white;
            border: 1px solid #ccc;
            border-radius:6px;
            box-shadow: 0 4px 18px rgba(0,0,0,0.25);
            z-index: 20000;
            display: none;
            min-width:160px;
        }
        .context-menu.active { display:block; }
        .context-menu-item { padding:10px 14px; cursor:pointer; transition: background .12s; }
        .context-menu-item:hover { background:#f0f0f0; }

        /* small responsive tweaks */
        @media screen and (max-width:1024px) {
            #dollmaker_container { 
                padding:10px; 
            }
            #bodyArea { 
                margin: 0 auto 20px;
            }
            #downloadBtn { 
                position: static; 
                margin: 10px 0;
                display: block; 
            }
            #piecesArea { 
                width: 100%;
                min-width: 0;
            }
        }