:root{
      --primary-color:#4361ee; --secondary-color:#3f37c9; --accent-color:#4895ef;
      --light-gray:#f8f9fa; --medium-gray:#e9ecef; --dark-gray:#495057;
      --white:#ffffff; --shadow:0 4px 6px rgba(0,0,0,.1); --transition:all .3s ease;
    }
    body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--light-gray);margin:0;color:var(--dark-gray);line-height:1.6}

    /* Shell */
    .sock-designer-container{
      display:flex; max-width:1400px; margin:2rem auto; background:#fff;
      border-radius:12px; box-shadow:var(--shadow); overflow:hidden; min-height:80vh;
    }

    /* Left panel: Pattern selection (initial view only) */
    .controls-panel{
      flex:1 1 auto; padding:2rem; background:#fff; border-right:1px solid var(--medium-gray);
      overflow-y:auto; display:flex; flex-direction:column;
    }
    .controls-panel h1{color:var(--secondary-color); margin:0 0 1.5rem; font-weight:700; font-size:1.8rem; text-align:center}

    .pattern-gallery{margin-bottom:2rem}
    .pattern-gallery h3{margin:0 0 .5rem;color:var(--secondary-color);font-size:1.2rem}
    .pattern-gallery p{margin:0 0 1rem}

    /* Rows: exactly 4 columns */
    .pattern-thumbnails{display:flex;flex-direction:column;gap:16px;width:100%}
    .pattern-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}

    .pattern-thumbnail{
      display:flex; flex-direction:column; border:2px solid var(--medium-gray); border-radius:12px;
      background:#fff; padding:10px; cursor:pointer; transition:var(--transition); height:100%;
    }
    .pattern-thumbnail:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-color)}
    .pattern-thumbnail.active{border-color:var(--primary-color);background:#f0f7ff}

    .thumbnail-svg{width:100%;height:180px;display:grid;place-items:center;overflow:hidden;margin-bottom:8px}
    .thumbnail-svg svg{width:100%!important;height:100%!important}
    .pattern-name{text-align:center;font-weight:600;color:var(--dark-gray);font-size:14px}

    /* Right panel (design mode layout lives here) */
    .preview-panel{
      flex:1; padding:2rem; display:none; background:var(--light-gray);
    }

    /* Design mode toggles */
    .sock-designer-container.design-mode .controls-panel{ display:none; }     /* hide left completely */
    .sock-designer-container.design-mode .preview-panel{ display:block; }     /* show only preview */

    /* Inside preview-panel: two-column layout (center stage + right controls) */
    .design-layout{
      display:grid; grid-template-columns:minmax(420px,1fr) 360px; gap:20px; align-items:start;
      max-width:1200px; margin:0 auto;
    }
    /* Center stage area */
    .stage{
      display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    }
    .preview-header{
      width:100%; max-width:520px; margin-bottom:1rem; display:none;
      background:#fff; padding:1rem 1.25rem; border-radius:8px; box-shadow:var(--shadow); border:1px solid var(--medium-gray)
    }
    .preview-header h3{margin:0 0 .5rem;color:var(--secondary-color)}
    .sock-canvas{width:100%; display:flex; justify-content:center}
    .sock-pattern{display:none;max-width:520px;width:100%;background:#fff;padding:1.25rem;border-radius:8px;box-shadow:var(--shadow);}
    .sock-pattern.active{display:block;animation:fadeIn .4s ease}
    .sock-pattern svg{width:100%;height:auto;display:block}
    #empty-preview{display:none!important}

    /* Right sidebar: color controls */
    .controls-sidebar{
      position:sticky; top:16px;
      background:#fff; border:1px solid var(--medium-gray); border-radius:12px; padding:16px;
      box-shadow:var(--shadow); display:none;   /* hidden until design-mode */
    }
    .sock-designer-container.design-mode .controls-sidebar{ display:block; }

    .option-group{margin-bottom:1rem;padding:1rem;background:var(--light-gray);border-radius:8px}
    .option-group h3{margin:0 0 .75rem}
    .color-selection{display:flex;flex-direction:column;gap:1rem}
    .color-option{display:flex;flex-direction:column}
    .color-option label{font-weight:600;margin-bottom:.5rem}
    .color-palette{display:flex;gap:.75rem;flex-wrap:wrap}
    .color-swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:var(--transition);box-shadow:var(--shadow)}
    .color-swatch:hover{transform:scale(1.08)}
    .color-swatch.active{border-color:var(--primary-color);transform:scale(1.08)}

    .action-buttons{display:flex;gap:12px;margin-top:12px}
    .btn{padding:10px 16px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:var(--transition);font-size:14px}
    .btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}
    .btn-outline{background:transparent;border:2px solid #007bff;color:#007bff}.btn-outline:hover{background:#007bff;color:#fff}

    @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
    @media (max-width:900px){
      .design-layout{grid-template-columns:1fr;}
      .controls-sidebar{position:static}
    }
    @media (max-width:768px){
      .pattern-row{grid-template-columns:repeat(2,1fr)}
      .sock-designer-container{flex-direction:column}
    }