@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');
        body { font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif; }
        
        .sub4unlock-hero { text-align: center; padding: 40px 20px; }
        .sub4unlock-hero .mascot { width: 120px; margin-bottom: 20px; animation: float 3s ease-in-out infinite; }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .sub4unlock-hero h1 { font-size: 32px; margin-bottom: 10px; }
        .sub4unlock-hero p { color: var(--ios-text-secondary); font-size: 15px; max-width: 400px; margin: 0 auto; }
        
        .feature-badges { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
        .feature-badge { padding: 8px 16px; background: rgba(10,132,255,0.1); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--ios-primary); display: flex; align-items: center; gap: 6px; }
        
        .form-card { max-width: 600px; margin: 0 auto; }
        
        .form-section { margin-bottom: 24px; }
        .form-section label { display: block; margin-bottom: 10px; font-weight: 700; font-size: 14px; }
        .form-section .hint { font-size: 12px; color: var(--ios-text-secondary); margin-top: 6px; }
        
        .form-input { 
            width: 100%; 
            padding: 14px 18px; 
            border-radius: 14px; 
            border: 1px solid var(--ios-border); 
            background: var(--ios-card); 
            color: var(--ios-text); 
            outline: none; 
            font-size: 15px;
            transition: border-color 0.2s;
        }
        .form-input:focus { border-color: var(--ios-primary); }
        .form-input::placeholder { color: var(--ios-text-secondary); }
        
        .action-row { 
            display: flex; 
            flex-direction: column; 
            gap: 12px; 
            margin-bottom: 16px; 
            padding: 18px;
            background: rgba(255,255,255,0.02);
            border-radius: 16px;
            border: 1px solid var(--ios-border);
            position: relative;
            animation: slideIn 0.3s ease;
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .action-row select, .action-row input { 
            width: 100%;
            padding: 12px 16px; 
            border-radius: 12px; 
            border: 1px solid var(--ios-border);
            background: var(--ios-card); 
            color: var(--ios-text); 
            outline: none; 
            font-size: 14px;
        }
        .action-row select:focus, .action-row input:focus { border-color: var(--ios-primary); }
        
        .action-row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .action-number { font-size: 12px; font-weight: 700; color: var(--ios-primary); background: rgba(10,132,255,0.1); padding: 4px 10px; border-radius: 8px; }
        
        .remove-action {
            background: rgba(255,59,48,0.1);
            color: #ff3b30;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .remove-action:hover { background: #ff3b30; color: white; }
        
        @media (min-width: 768px) {
            .action-row .action-inputs { display: grid; grid-template-columns: 180px 1fr 1fr; gap: 12px; }
        }
        
        .add-action-btn {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            border: 2px dashed var(--ios-border);
            background: transparent;
            color: var(--ios-text-secondary);
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 24px;
        }
        .add-action-btn:hover { border-color: var(--ios-primary); color: var(--ios-primary); background: rgba(10,132,255,0.05); }
        
        .result-card {
            background: linear-gradient(135deg, rgba(10,132,255,0.1), rgba(52,199,89,0.1));
            border-radius: 16px;
            padding: 24px;
            text-align: center;
        }
        .result-card h3 { margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
        .result-card h3 i { color: #34c759; }
        .result-url { 
            width: 100%; 
            background: var(--ios-card); 
            border: 1px solid var(--ios-border); 
            padding: 14px; 
            border-radius: 12px; 
            font-size: 13px; 
            color: var(--ios-primary); 
            outline: none;
            text-align: center;
        }
        .copy-btn { margin-top: 15px; }
        
        .social-icons { display: flex; justify-content: center; gap: 15px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--ios-border); }
        .social-icons a { 
            width: 40px; height: 40px; 
            border-radius: 12px; 
            display: flex; align-items: center; justify-content: center; 
            color: white; 
            font-size: 18px;
            transition: transform 0.2s;
        }
        .social-icons a:hover { transform: scale(1.1); }
        .social-icons .yt { background: #ff0000; }
        .social-icons .tg { background: #0088cc; }
        .social-icons .ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }