:root {
      --primary: #ff38b8;
      --secondary: #6c43ff;
      --accent: #00f5a8;
      --dark: #0f172a;
      --light: #f9fafb;
      --gradient-primary: linear-gradient(135deg, #ff38b8 0%, #6c43ff 100%);
      --gradient-secondary: linear-gradient(135deg, #00f5a8 0%, #00c8ff 100%);
      --gradient-card: linear-gradient(145deg, rgba(30, 25, 65, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
      --shadow-card: 0 15px 50px rgba(0, 0, 0, 0.5);
      --shadow-button: 0 8px 25px rgba(255, 56, 184, 0.45);
      --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Poppins', system-ui, sans-serif;
      background: radial-gradient(circle at 20% 30%, rgba(108, 67, 255, 0.15) 0%, rgba(255, 56, 184, 0.1) 25%, rgba(0, 245, 168, 0.05) 50%, transparent 70%),
                  radial-gradient(circle at 80% 70%, rgba(0, 245, 168, 0.1) 0%, rgba(0, 200, 255, 0.08) 30%, transparent 60%),
                  #0a0e17;
      color: var(--light);
      padding: 2rem 1.5rem;
      min-height: 100vh;
      margin: 0;
      position: relative;
      overflow-x: hidden;
      line-height: 1.6;
    }
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: 
        radial-gradient(circle at 10% 20%, rgba(255, 56, 184, 0.15) 0%, transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(108, 67, 255, 0.12) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(0, 245, 168, 0.08) 0%, transparent 40%);
      z-index: -2;
    }
    .container { max-width: 480px; margin: 0 auto; position: relative; z-index: 10; }
    .card {
      background: var(--gradient-card); border-radius: 24px; padding: 2.5rem 2rem;
      box-shadow: var(--shadow-card); text-align: center; position: relative; overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); transition: var(--transition);
    }
    .card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
    .card::before {
      content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
      z-index: -1; transition: var(--transition);
    }
    .card:hover::before { transform: scale(1.1); }
    .avatar {
      width: 100px; height: 100px; border-radius: 50%; background: var(--gradient-primary);
      margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center;
      font-size: 3.5rem; border: 4px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 0 25px rgba(255, 56, 184, 0.5); position: relative; overflow: hidden;
    }
    .avatar::after { content: "🎨"; position: absolute; animation: pulse 2s infinite; }
    @keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.7; } }
    .card h1 { margin-bottom: 0.3rem; font-size: 2.2rem; font-weight: 800; background: var(--gradient-secondary); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px; font-family: 'Montserrat', sans-serif; text-shadow: 0 2px 10px rgba(0, 245, 168, 0.2); }
    .card p.role { margin: 0 0 1.2rem; color: var(--accent); font-weight: 600; font-size: 1.15rem; letter-spacing: 1px; text-transform: uppercase; }
    .card p.description { margin: 0 0 1.8rem; font-size: 1.05rem; color: #cbd5e1; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.7; position: relative; }
    .card p.description::after { content: "✨"; position: absolute; right: -15px; top: -5px; font-size: 1.2rem; animation: float 3s ease-in-out infinite; }
    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .social-proof { background: rgba(20, 25, 45, 0.7); border-radius: 16px; padding: 1.2rem; margin: 1.8rem 0; text-align: center; border: 1px solid rgba(108, 67, 255, 0.3); position: relative; overflow: hidden; }
    .social-proof::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gradient-secondary); }
    .social-proof .count { font-size: 1.8rem; font-weight: 800; background: var(--gradient-secondary); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 0.3rem; }
    .social-proof .label { color: #94a3b8; font-size: 0.95rem; }
    .share-section { background: rgba(25, 30, 50, 0.85); backdrop-filter: blur(12px); border-radius: 20px; padding: 1.8rem; text-align: center; margin-top: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; }
    .share-section::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 245, 168, 0.1) 0%, transparent 70%); z-index: 0; }
    .share-btn { background: var(--gradient-secondary); color: white; border: none; padding: 16px 24px; border-radius: 16px; font-size: 1.15rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 245, 168, 0.35); transition: var(--transition); width: 100%; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Poppins', sans-serif; letter-spacing: 0.5px; }
    .share-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 35px rgba(0, 245, 168, 0.5); background: linear-gradient(135deg, #00e095 0%, #00b8e0 100%); }
    .share-btn:active { transform: translateY(1px); }
    .share-url { margin-top: 1.2rem; font-family: 'Poppins', monospace; font-size: 0.85rem; background: rgba(0, 15, 30, 0.7); padding: 12px; border-radius: 12px; word-break: break-all; opacity: 0.9; border: 1px solid rgba(0, 245, 168, 0.2); position: relative; z-index: 2; cursor: pointer; transition: var(--transition); }
    .share-url:hover { opacity: 1; background: rgba(0, 25, 45, 0.9); transform: scale(1.02); }
    .toast { position: fixed; top: 20px; right: 20px; background: var(--gradient-secondary); color: white; padding: 16px 24px; border-radius: 16px; font-weight: 600; z-index: 9999; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transform: translateX(400px); animation: slideIn 0.4s forwards, fadeOut 0.4s 2.6s forwards; display: flex; align-items: center; gap: 10px; }
    @keyframes slideIn { to { transform: translateX(0); } }
    @keyframes fadeOut { to { opacity: 0; transform: translateX(100px); } }
    .footer { text-align: center; margin-top: 2.5rem; color: #64748b; font-size: 0.9rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .badge { display: inline-block; background: rgba(108, 67, 255, 0.2); color: var(--accent); padding: 4px 12px; border-radius: 20px; font-weight: 600; margin-top: 10px; font-size: 0.9rem; letter-spacing: 0.5px; }
    .pulse { display: inline-block; animation: pulse 2s infinite; }
    .floating { animation: floating 3s ease-in-out infinite; }
    @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @media (max-width: 480px) { body { padding: 1.5rem; } .card { padding: 2rem 1.5rem; } .avatar { width: 85px; height: 85px; font-size: 2.8rem; } .card h1 { font-size: 1.9rem; } .links a { padding: 14px 16px; font-size: 1rem; } .share-btn { padding: 14px 20px; font-size: 1.05rem; } }
    @keyframes linkSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .links { display: grid; gap: 12px; margin-top: 1.2rem; position: relative; }
    .link-item { position: relative; border-radius: 16px; animation: linkSlide 0.4s forwards; opacity: 0; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease; }
    .links .link-item:nth-child(1) { animation-delay: 0.1s; }
    .links .link-item:nth-child(2) { animation-delay: 0.2s; }
    .links .link-item:nth-child(3) { animation-delay: 0.3s; }
    .links .link-item:nth-child(4) { animation-delay: 0.4s; }
    .links .link-item:nth-child(5) { animation-delay: 0.5s; }
    .links .link-item:nth-child(6) { animation-delay: 0.6s; }
    .links a { border-radius: 16px; padding: 16px 44px 16px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 1.05rem; text-decoration: none; transition: var(--transition); position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--light); }
    .links a::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradient-primary); z-index: -1; opacity: 0; transition: var(--transition); }
    .links a:hover::before { opacity: 1; transform: scale(1.1); }
    .links a:hover { transform: translateX(5px); color: white; box-shadow: 0 10px 25px rgba(255, 56, 184, 0.4); border-color: transparent; }
    .links a i { font-size: 1.3rem; min-width: 24px; }
    .link-item:nth-child(1) a::before { background: linear-gradient(135deg, #5c3aff 0%, #964bff 100%); }
    .link-item:nth-child(2) a::before { background: linear-gradient(135deg, #ff9a3d 0%, #ff6b3d 100%); }
    .link-item:nth-child(3) a::before { background: linear-gradient(135deg, #ff4d73 0%, #ff1a50 100%); }
    .link-item:nth-child(4) a::before { background: linear-gradient(135deg, #ff3d71 0%, #d433ff 100%); }
    .link-item:nth-child(5) a::before { background: linear-gradient(135deg, #33ccff 0%, #0099ff 100%); }
    .link-item:nth-child(6) a::before { background: linear-gradient(135deg, #00f5a8 0%, #00c8ff 100%); }
    .drag-handle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: calc(100% - 12px); display: flex; align-items: center; justify-content: center; cursor: grab; border-radius: 8px; z-index: 5; touch-action: none; transition: background 0.2s ease; }
    .drag-handle:hover { background: rgba(255, 255, 255, 0.12); }
    .drag-handle::after { content: "⋮⋮"; font-size: 1.1rem; letter-spacing: -2px; color: rgba(255, 255, 255, 0.5); line-height: 1; transform: rotate(90deg); }
    .drag-handle:hover::after { color: rgba(255, 255, 255, 0.9); }
    .link-item.is-dragging { position: fixed; z-index: 1000; pointer-events: none; opacity: 0.98; transform: scale(1.04) rotate(-1deg); box-shadow: 0 25px 50px rgba(0,0,0,0.55); transition: none; }
    .link-item.is-dragging a { cursor: grabbing; }
    .link-placeholder { border-radius: 16px; border: 2px dashed rgba(0, 245, 168, 0.5); background: rgba(0, 245, 168, 0.06); transition: height 0.2s ease; }
    .link-item.shifting { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
    body.dragging-active, body.dragging-active * { cursor: grabbing !important; }
    body.dragging-active .links a:hover { transform: none; }
    .icon { display: inline-block; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 8px; vertical-align: middle; }
    .icon-bandcamp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19.5 3.5L16 10.5L12.5 3.5H3.5V20.5H10.5V13.5H14V20.5H20.5V3.5Z'/%3E%3C/svg%3E"); }
    .icon-amazon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12.5 8C9.85 8 8 9.35 8 12.5C8 15.65 9.85 17 12.5 17C15.15 17 17 15.65 17 12.5C17 9.35 15.15 8 12.5 8ZM4 6V18H6V16H7C8.11 16 9 15.11 9 14C9 12.89 8.11 12 7 12H6V10H7C8.11 10 9 9.11 9 8C9 6.89 8.11 6 7 6H6V4H4V6ZM20 6V18H18V16H17C15.89 16 15 15.11 15 14C15 12.89 15.89 12 17 12H18V10H17C15.89 10 15 9.11 15 8C15 6.89 15.89 6 17 6H18V4H20V6Z'/%3E%3C/svg%3E"); }
    .icon-kofi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM15.5 13.5L12 17L8.5 13.5L12 10L15.5 13.5Z'/%3E%3C/svg%3E"); }
    .icon-redbubble { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM15 13H9V11H15V13Z'/%3E%3C/svg%3E"); }
    .icon-spreadshop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z'/%3E%3C/svg%3E"); }
    .icon-portfolio { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM12 17C14.21 17 16 15.21 16 13C16 10.79 14.21 9 12 9C9.79 9 8 10.79 8 13C8 15.21 9.79 17 12 17Z'/%3E%3C/svg%3E"); }
    .bestseller-widget { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 999; max-width: 260px; animation: bestsellerFloat 3.5s ease-in-out infinite; }
    @keyframes bestsellerFloat { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-8px); } }
    .bestseller-card { background: linear-gradient(160deg, rgba(255, 56, 184, 0.15) 0%, rgba(15, 23, 42, 0.95) 60%); border: 2px solid transparent; background-clip: padding-box; border-radius: 20px; padding: 1.4rem 1.2rem; box-shadow: 0 15px 45px rgba(255, 56, 184, 0.35), 0 0 0 1px rgba(255,255,255,0.08) inset; backdrop-filter: blur(14px); position: relative; overflow: hidden; }
    .bestseller-card::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, #ff38b8, #6c43ff, #00f5a8, #ff38b8); background-size: 300% 300%; z-index: -1; border-radius: 20px; animation: borderGlow 4s linear infinite; }
    @keyframes borderGlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
    .bestseller-ribbon { position: absolute; top: 12px; right: -34px; background: var(--gradient-primary); color: white; font-size: 0.7rem; font-weight: 700; padding: 4px 40px; transform: rotate(45deg); letter-spacing: 0.5px; box-shadow: 0 3px 10px rgba(0,0,0,0.3); text-transform: uppercase; }
    .bestseller-icon { font-size: 2.2rem; text-align: center; margin-bottom: 0.4rem; animation: pulse 1.8s infinite; }
    .bestseller-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; text-align: center; background: var(--gradient-secondary); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.4rem; line-height: 1.3; }
    .bestseller-desc { font-size: 0.85rem; color: #cbd5e1; text-align: center; margin-bottom: 1rem; line-height: 1.5; }
    .bestseller-track { font-size: 0.95rem; font-weight: 700; color: var(--accent); text-align: center; margin-bottom: 1rem; display: block; text-shadow: 0 0 10px rgba(0, 245, 168, 0.4); }
    .bestseller-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--gradient-primary); color: white; text-decoration: none; font-weight: 700; font-size: 1rem; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-button); transition: var(--transition); position: relative; overflow: hidden; letter-spacing: 0.3px; }
    .bestseller-btn::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent); transition: 0.5s; }
    .bestseller-btn:hover::after { left: 100%; }
    .bestseller-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 35px rgba(255, 56, 184, 0.65); }
    .bestseller-btn:active { transform: translateY(0) scale(0.98); }
    @media (max-width: 900px) { .bestseller-widget { position: static; transform: none; max-width: 480px; margin: 2rem auto 0; animation: none; } .bestseller-card::before { animation: borderGlow 4s linear infinite; } }
    @media (max-width: 480px) { .drag-handle { width: 32px; } .links a { padding-right: 48px; } }