* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; }
    body { 
      display: flex; 
      flex-direction: column; 
      align-items: center;
      transition: background 0.5s ease; 
      background: #fafafa;
      padding: 20px;
      gap: 20px;
    }

    /* Controls Styling */
    .controls {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(12px);
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 15px;
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.18);
      max-width: 100%;
    }

    /* Dropdown Styling */
    .dropdown {
      position: relative;
      width: 160px;
      user-select: none;
    }
    .dropdown .selected {
      height: 44px;
      padding: 0 20px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #333;
      transition: all 0.3s ease;
    }
    .dropdown .selected svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }
    .dropdown.open .selected svg {
      transform: rotate(180deg);
    }

    .dropdown .options {
      position: absolute;
      top: 50px;
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.3s ease;
      z-index: 10;
      backdrop-filter: blur(12px);
    }
    .dropdown.open .options { max-height: 240px; }
    .dropdown .options li {
      list-style: none;
      padding: 12px 20px;
      font-size: 14px;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .dropdown .options li:hover {
      background: rgba(0,0,0,0.05);
    }

    /* Buttons Styling */
    .controls button {
      background: linear-gradient(45deg, #6366f1, #8b5cf6);
      color: white;
      border: none;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
    }
    .controls button svg {
      width: 18px;
      height: 18px;
    }
    .controls button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    }

    /* Code Box Styling */
    .code-box {
      font-family: 'Fira Code', monospace;
      font-size: 14px;
      padding: 18px 24px;
      background: rgba(0, 0, 0, 0.8);
      border-radius: 12px;
      color: #fff;
      width: 100%;
      max-width: 800px;
      position: relative;
      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
      border: 1px solid rgba(255,255,255,0.1);
      margin-top: auto;
      margin-bottom: 20px;
    }
    .code-box-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    .code-box-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      color: #8b5cf6;
    }
    
        .copy-icon {
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      transition: all 0.3s ease;
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.1);
    }

    .copy-icon:hover {
      background: rgba(255,255,255,0.2);
    }

    .copy-icon.copied {
      animation: bounce 0.5s ease;
    }

    .copy-icon.copied::after {
      content: '✅ Copied!';
      position: absolute;
      top: -40px;
      right: 0;
      background: #4ade80;
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }


    /* Mobile Responsive */
    @media (max-width: 768px) {
      body {
        padding: 15px;
        gap: 15px;
      }
      
      .controls {
        width: 100%;
        flex-direction: column;
        padding: 15px;
        order: 1;
      }
      
      .dropdown, .controls button {
        width: 100%;
      }
      
      .code-box {
        order: 3;
        margin-bottom: 0;
      }
      
      #generateBtn {
        order: 2;
        margin-bottom: 15px;
      }
    }

    /* Icons */
    .icon {
      width: 34px;
      height: 34px;
      stroke: currentColor;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }