/* ~~~~~~ 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;
        }

        #dollmaker_container {
            position: relative;
            padding: 20px;
            border-radius: 10px;
            overflow: visible;
        }

        /* Canvas area */
        #bodyArea {
            position: relative;
            width: 280px;
            height: 420px;
            border: 3px solid #1cff1c;
            background: #6c756a;
            border-radius: 5px;
            text-align: center;
            padding-top: 20px;
            float: left;
            overflow: visible;
        }
        #bodyArea h3 { 
            color:#666; 
            font-weight: bold; 
            pointer-events: none; 
        }
        #bodyArea p { 
            pointer-events: none; 
            color: #999; 
            padding: 20px; 
        }

        #downloadBtn {
            position: absolute;
            top: 470px;
            left: 20px;
            padding: 10px 18px;
            background: #1cff1c;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
        }

        #canvasControls {
            position: absolute; 
            top: 510px; 
            display: flex; 
            align-items: center; 
            gap: 10px;
        }

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

        /* pieces area & tabs */
        #piecesArea { 
            margin-left: 310px; 
            min-width: 420px; 
        }
        #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 #1cff1c;
            background: #ddd;
            color: #666;
            text-decoration:none;
            font-weight:bold;
            border-radius:5px 5px 0 0;
            cursor:pointer;
        }
        #tabsbar .active a { border-bottom:3px solid #fff; background:#fff; position:relative; z-index:2; }

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

        .collection-header {
            background: linear-gradient(135deg,#1cff1c 0%, #17cc17 100%);
            padding: 10px 15px;
            margin: 15px 0 10px 0;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            color: #333;
            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: 10px; 
        }

        .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;
        }

        /* dragged / placed items */
        .dragged-item {
            position:absolute;
            cursor: move;
            pointer-events:auto;
            display:inline-block;
            user-select: none;
        }
        .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;
        }

        /* 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 { float:none; margin:0 auto 20px; }
            #downloadBtn { position: static; margin:20px auto; display:block; }
            #piecesArea { margin-left:0; width:100%; }
        }